/* frontend/styles/index.css */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
strong,
b {
  font-weight: bold;
}
em,
i {
  font-style: italic;
}
a img {
  border: none;
}
:root {
  --blue: #2E6DBB;
  --silver: #EBEDEE;
  --green-50: hsl(125, 65%, 93%);
  --green-100: hsl(127, 65%, 85%);
  --green-200: hsl(124, 63%, 74%);
  --green-300: hsl(123, 53%, 55%);
  --green-400: hsl(123, 57%, 45%);
  --green-500: hsl(122, 73%, 35%);
  --green-600: hsl(122, 80%, 29%);
  --green-700: hsl(125, 79%, 26%);
  --green-800: hsl(125, 86%, 20%);
  --green-900: hsl(125, 97%, 14%);
  --purple-50: hsl(262, 90%, 96%);
  --purple-100: hsl(262, 100%, 88%);
  --purple-200: hsl(262, 100%, 78%);
  --purple-300: hsl(264, 96%, 70%);
  --purple-400: hsl(268, 82%, 60%);
  --purple-500: hsl(273, 80%, 49%);
  --purple-600: hsl(274, 87%, 43%);
  --purple-700: hsl(274, 87%, 37%);
  --purple-800: hsl(274, 87%, 31%);
  --purple-900: hsl(276, 91%, 23%);
  --red-50: hsl(0, 100%, 95%);
  --red-100: hsl(0, 100%, 87%);
  --red-200: hsl(0, 100%, 80%);
  --red-300: hsl(0, 91%, 69%);
  --red-400: hsl(0, 83%, 62%);
  --red-500: hsl(356, 75%, 53%);
  --red-600: hsl(354, 85%, 44%);
  --red-700: hsl(352, 90%, 35%);
  --red-800: hsl(350, 94%, 28%);
  --red-900: hsl(348, 94%, 20%);
  --yellow-50: hsl(49, 100%, 96%);
  --yellow-100: hsl(48, 100%, 88%);
  --yellow-200: hsl(48, 95%, 76%);
  --yellow-300: hsl(48, 94%, 68%);
  --yellow-400: hsl(44, 92%, 63%);
  --yellow-500: hsl(42, 87%, 55%);
  --yellow-600: hsl(36, 77%, 49%);
  --yellow-700: hsl(29, 80%, 44%);
  --yellow-800: hsl(22, 82%, 39%);
  --yellow-900: hsl(15, 86%, 30%);
  --grey-50: hsl(216, 33%, 97%);
  --grey-100: hsl(214, 15%, 91%);
  --grey-200: hsl(210, 16%, 82%);
  --grey-300: hsl(211, 13%, 65%);
  --grey-400: hsl(211, 10%, 53%);
  --grey-500: hsl(211, 12%, 43%);
  --grey-600: hsl(209, 14%, 37%);
  --grey-700: hsl(209, 18%, 30%);
  --grey-800: hsl(209, 20%, 25%);
  --grey-900: hsl(210, 24%, 16%);
}
:root {
  --space-xx-small: 0.1em;
  --space-x-small: 0.25em;
  --space-small: 0.5em;
  --space-medium: 1em;
  --space-large: 2em;
  --space-x-large: 3em;
  --space-xx-large: 4em;
  --space-xxx-large: 6em;
  --type-base: calc(1.6em + 0.5vw);
  --type-xxx-small: 55%;
  --type-xx-small: 65%;
  --type-x-small: 75%;
  --type-small: 85%;
  --type-medium: 100%;
  --type-large: 125%;
  --type-x-large: 150%;
  --type-xx-large: 200%;
  --type-xxx-large: 300%;
  --header-height: 3.5em;
}
@media (max-width: 40em) {
  :root {
    --header-height: 5.5em;
  }
}
html {
  font-size: 10px;
}
body {
  font-size: calc(1.6em + 0.5vw);
  font-size: var(--type-base);
}
@font-face {
  font-family: "PWScratchedfont";
  src:
    local("PWScratchedfont"),
    url("/_bridgetown/static/PWScratchedfont-D2A4CDPD.woff2") format("woff2"),
    url("/_bridgetown/static/PWScratchedfont-YTXUWODW.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Code Saver";
  src:
    local("Code Saver Regular"),
    url("/_bridgetown/static/codesaver-regular-XNMSPGQ6.woff2") format("woff2"),
    url("/_bridgetown/static/codesaver-regular-KCJFX2EH.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Code Saver";
  src:
    local("Code Saver Medium Italic"),
    url("/_bridgetown/static/codesaver-mediumitalic-PD22DVBS.woff2") format("woff2"),
    url("/_bridgetown/static/codesaver-mediumitalic-MMRWX54Y.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Code Saver";
  src:
    local("Code Saver Medium"),
    url("/_bridgetown/static/codesaver-medium-OFSYCPC5.woff2") format("woff2"),
    url("/_bridgetown/static/codesaver-medium-W2LOVZHO.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Code Saver";
  src:
    local("Code Saver Bold Italic"),
    url("/_bridgetown/static/codesaver-bolditalic-5C5ZLCOX.woff2") format("woff2"),
    url("/_bridgetown/static/codesaver-bolditalic-XNLFXBI6.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Code Saver";
  src:
    local("Code Saver Bold"),
    url("/_bridgetown/static/codesaver-bold-OGXURESY.woff2") format("woff2"),
    url("/_bridgetown/static/codesaver-bold-6RSR2KNZ.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lore";
  src:
    local("LORE Regular"),
    local("LORE-Regular"),
    url("/_bridgetown/static/LORE-Regular-LCOVJRE2.woff2") format("woff2"),
    url("/_bridgetown/static/LORE-Regular-IIWBFVB4.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lore Alternates";
  src:
    local("LORE Alternates Regular"),
    local("LORE-Alternates-Regular"),
    url("/_bridgetown/static/LORE-Alternates-Regular-O5KYNDM6.woff2") format("woff2"),
    url("/_bridgetown/static/LORE-Alternates-Regular-5ZMDDDN4.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lore";
  src:
    local("LORE Regular"),
    local("LORE-Regular"),
    url("/_bridgetown/static/LORE-Regular-LCOVJRE2.woff2") format("woff2"),
    url("/_bridgetown/static/LORE-Regular-IIWBFVB4.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lore Alternates";
  src:
    local("LORE Alternates Regular"),
    local("LORE-Alternates-Regular"),
    url("/_bridgetown/static/LORE-Alternates-Regular-O5KYNDM6.woff2") format("woff2"),
    url("/_bridgetown/static/LORE-Alternates-Regular-5ZMDDDN4.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lore Alternates";
  src:
    local("LORE Alternates Bold"),
    local("LORE-Alternates-Bold"),
    url("/_bridgetown/static/LORE-Alternates-Bold-REKN5PWQ.woff2") format("woff2"),
    url("/_bridgetown/static/LORE-Alternates-Bold-77XFIRIM.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lore Alternates";
  src:
    local("LORE Alternates Bold"),
    local("LORE-Alternates-Bold"),
    url("/_bridgetown/static/LORE-Alternates-Bold-REKN5PWQ.woff2") format("woff2"),
    url("/_bridgetown/static/LORE-Alternates-Bold-77XFIRIM.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lore";
  src:
    local("LORE Bold"),
    local("LORE-Bold"),
    url("/_bridgetown/static/LORE-Bold-X5BPRZ52.woff2") format("woff2"),
    url("/_bridgetown/static/LORE-Bold-GL6L6YSR.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lore";
  src:
    local("LORE Bold"),
    local("LORE-Bold"),
    url("/_bridgetown/static/LORE-Bold-X5BPRZ52.woff2") format("woff2"),
    url("/_bridgetown/static/LORE-Bold-GL6L6YSR.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis Semi";
  src:
    local("Metropolis Semi Bold"),
    local("Metropolis-SemiBold"),
    url("/_bridgetown/static/Metropolis-SemiBold-54TNDREM.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-SemiBold-32CIISXT.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Light"),
    local("Metropolis-Light"),
    url("/_bridgetown/static/Metropolis-Light-GIBW2C4E.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-Light-JRTCGJ37.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Black"),
    local("Metropolis-Black"),
    url("/_bridgetown/static/Metropolis-Black-VRJU5FGV.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-Black-P3KFXRUN.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis Extra";
  src:
    local("Metropolis Extra Bold"),
    local("Metropolis-ExtraBold"),
    url("/_bridgetown/static/Metropolis-ExtraBold-5ZYXKN3P.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-ExtraBold-J6XTDPFV.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis Extra";
  src:
    local("Metropolis Extra Light"),
    local("Metropolis-ExtraLight"),
    url("/_bridgetown/static/Metropolis-ExtraLight-LJQ3FUHK.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-ExtraLight-I7BVRW5R.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Medium Italic"),
    local("Metropolis-MediumItalic"),
    url("/_bridgetown/static/Metropolis-MediumItalic-F6AUOPF2.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-MediumItalic-65Z3Y2A7.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Thin"),
    local("Metropolis-Thin"),
    url("/_bridgetown/static/Metropolis-Thin-IKRLMIFU.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-Thin-LRAAY5DG.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Bold Italic"),
    local("Metropolis-BoldItalic"),
    url("/_bridgetown/static/Metropolis-BoldItalic-CZAHBXEY.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-BoldItalic-EW4UQGSB.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Regular"),
    local("Metropolis-Regular"),
    url("/_bridgetown/static/Metropolis-Regular-EI7AUYNS.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-Regular-GMASQYNY.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Medium"),
    local("Metropolis-Medium"),
    url("/_bridgetown/static/Metropolis-Medium-YKSHBBQB.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-Medium-KK2RTBBK.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis Semi";
  src:
    local("Metropolis Semi Bold Italic"),
    local("Metropolis-SemiBoldItalic"),
    url("/_bridgetown/static/Metropolis-SemiBoldItalic-CNXAUPDG.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-SemiBoldItalic-Q2BOJ5FR.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Thin Italic"),
    local("Metropolis-ThinItalic"),
    url("/_bridgetown/static/Metropolis-ThinItalic-P7ZVS3DP.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-ThinItalic-LMQMQW4L.woff") format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis Extra";
  src:
    local("Metropolis Extra Bold Italic"),
    local("Metropolis-ExtraBoldItalic"),
    url("/_bridgetown/static/Metropolis-ExtraBoldItalic-ZDHRTKKZ.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-ExtraBoldItalic-P3POQP4U.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Light Italic"),
    local("Metropolis-LightItalic"),
    url("/_bridgetown/static/Metropolis-LightItalic-VE3DY6LD.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-LightItalic-HCIZKIHT.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Bold"),
    local("Metropolis-Bold"),
    url("/_bridgetown/static/Metropolis-Bold-RMHAPW7L.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-Bold-RVINVWBD.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis Extra";
  src:
    local("Metropolis Extra Light Italic"),
    local("Metropolis-ExtraLightItalic"),
    url("/_bridgetown/static/Metropolis-ExtraLightItalic-GXP6B3CU.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-ExtraLightItalic-5Y73DRWB.woff") format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Regular Italic"),
    local("Metropolis-RegularItalic"),
    url("/_bridgetown/static/Metropolis-RegularItalic-CRWOPODP.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-RegularItalic-DZMOHLSP.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src:
    local("Metropolis Black Italic"),
    local("Metropolis-BlackItalic"),
    url("/_bridgetown/static/Metropolis-BlackItalic-6E2AB6C6.woff2") format("woff2"),
    url("/_bridgetown/static/Metropolis-BlackItalic-ZN4KVLCB.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src:
    local("Commissioner ExtraLight"),
    local("Commissioner-ExtraLight"),
    url("/_bridgetown/static/Commissioner-ExtraLight-MLVWWOZB.woff2") format("woff2"),
    url("/_bridgetown/static/Commissioner-ExtraLight-3GY3XUOU.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src:
    local("Commissioner SemiBold"),
    local("Commissioner-SemiBold"),
    url("/_bridgetown/static/Commissioner-SemiBold-UNRKFNYB.woff2") format("woff2"),
    url("/_bridgetown/static/Commissioner-SemiBold-6HGAZHGJ.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src:
    local("Commissioner Medium"),
    local("Commissioner-Medium"),
    url("/_bridgetown/static/Commissioner-Medium-WFXXCRHP.woff2") format("woff2"),
    url("/_bridgetown/static/Commissioner-Medium-ZNU6WZMN.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src:
    local("Commissioner Bold"),
    local("Commissioner-Bold"),
    url("/_bridgetown/static/Commissioner-Bold-THT4OTFO.woff2") format("woff2"),
    url("/_bridgetown/static/Commissioner-Bold-DHERKTTN.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src:
    local("Commissioner Thin"),
    local("Commissioner-Thin"),
    url("/_bridgetown/static/Commissioner-Thin-6OTQHL4Y.woff2") format("woff2"),
    url("/_bridgetown/static/Commissioner-Thin-3POIIMTI.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src:
    local("Commissioner Black"),
    local("Commissioner-Black"),
    url("/_bridgetown/static/Commissioner-Black-6VB5HA4U.woff2") format("woff2"),
    url("/_bridgetown/static/Commissioner-Black-SYTO3HDM.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src:
    local("Commissioner Regular"),
    local("Commissioner-Regular"),
    url("/_bridgetown/static/Commissioner-Regular-NPNHRFUQ.woff2") format("woff2"),
    url("/_bridgetown/static/Commissioner-Regular-X5X6DVEY.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src:
    local("Commissioner ExtraBold"),
    local("Commissioner-ExtraBold"),
    url("/_bridgetown/static/Commissioner-ExtraBold-HXCQEX4Q.woff2") format("woff2"),
    url("/_bridgetown/static/Commissioner-ExtraBold-AL47I4L6.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src:
    local("Commissioner Light"),
    local("Commissioner-Light"),
    url("/_bridgetown/static/Commissioner-Light-KNRFF5ZI.woff2") format("woff2"),
    url("/_bridgetown/static/Commissioner-Light-6THQGVJL.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-blueprint: "PWScratchedfont", sans-serif;
  --font-handwriting: "Lore Alternates", sans-serif;
  --font-handwriting-alt: "Lore", sans-serif;
  --font-mono: "Code Saver", monospace;
  --font-sans: "Commissioner", sans-serif;
  --font-heading: "Metropolis Semi", sans-serif;
}
p ~ p {
  margin-top: 2em;
  margin-top: var(--space-large);
}
h2 {
  font-size: 150%;
  font-size: var(--type-x-large);
  font-weight: 500;
  color: #EBEDEE;
  color: var(--silver);
  font-family: "Metropolis Semi", sans-serif;
  font-family: var(--font-heading);
}
p {
  font-weight: 400;
}
a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 2px;
  color: hsl(125, 79%, 26%);
  color: var(--green-700);
}
a:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}
mark.word {
  --color: var(--green-200);
  position: relative;
  background: none;
}
mark.word:before {
  content: "";
  position: absolute;
  display: block;
  top: 45%;
  left: -3px;
  right: -1px;
  bottom: 0;
  background: var(--color);
  z-index: -1;
  transform: skew(-10deg) rotate(1deg);
}
mark {
  padding: 1px 5px;
  background:
    linear-gradient(
      90deg,
      hsl(262, 100%, 90%) 5%,
      hsl(262, 100%, 88%),
      hsl(262, 100%, 92%) 95%);
  background:
    linear-gradient(
      90deg,
      hsl(262, 100%, 90%) 5%,
      var(--purple-100),
      hsl(262, 100%, 92%) 95%);
  border-radius: 2px;
}
code {
  font-family: "Code Saver", monospace;
  font-family: var(--font-mono);
}
.font-sm {
  font-size: 85%;
  font-size: var(--type-small);
}
.font-x-sm {
  font-size: 75%;
  font-size: var(--type-x-small);
}
.font-xx-sm {
  font-size: 65%;
  font-size: var(--type-xx-small);
}
.font-normal {
  font-style: normal;
}
.font-weight-200 {
  font-weight: 200;
}
.font-weight-300 {
  font-weight: 300;
}
.font-weight-500 {
  font-weight: 500;
}
.text-center {
  text-align: center;
}
ui-tape {
  --tape-gray: #dbd8be;
  --tape-edge-gray: #b7b49d;
  --border: 1px dotted var(--tape-edge-gray);
  position: absolute;
  opacity: 0.5;
  background-color: #dbd8be;
  background-color: var(--tape-gray);
}
ui-tape.top {
  height: 4vmin;
  top: -2vmin;
  width: 30%;
  left: 50%;
  transform: translateX(-50%);
  border-right: var(--border);
  border-left: var(--border);
}
ui-tape.left {
  width: 4vmin;
  height: 30%;
  left: -2vmin;
  top: 50%;
  transform: translateY(-50%);
  border-top: var(--border);
  border-bottom: var(--border);
  border-right: 0;
  border-left: 0;
}
ui-tape.right {
  width: 4vmin;
  height: 30%;
  right: -2vmin;
  top: 50%;
  transform: translateY(-50%);
  border-top: var(--border);
  border-bottom: var(--border);
  border-right: 0;
  border-left: 0;
}
ui-tape.bottom {
  height: 4vmin;
  bottom: -2vmin;
  width: 30%;
  left: 50%;
  transform: translateX(-50%);
  border-right: var(--border);
  border-left: var(--border);
}
button,
.button {
  display: flex;
  align-items: center;
  gap: 1em;
  gap: var(--space-medium);
  background: hsl(122, 80%, 29%);
  background: var(--green-600);
  color: #EBEDEE;
  color: var(--silver);
  -webkit-text-decoration: none;
  text-decoration: none;
  font-family: "Lore", sans-serif;
  font-family: var(--font-handwriting-alt);
  padding: 0.5em 1em;
  padding: var(--space-small) var(--space-medium);
  border-radius: 100px;
  border: 2px solid #EBEDEE;
  border: 2px solid var(--silver);
  transition: all 0.05s linear;
}
button:hover,
.button:hover {
  transform: scale(1.02, 1.02) rotate(-0.5deg);
}
button span,
.button span {
  display: inline-block;
}
button svg,
.button svg {
  width: auto;
  fill: #EBEDEE;
  fill: var(--silver);
}
:root {
  --drop-shadow-sm: drop-shadow(1px 2px 3px rgba(0,0,0,0.4));
  --drop-shadow: drop-shadow(6px 8px 8px rgba(0,0,0,0.4));
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  background:
    conic-gradient(
      from 90deg at 2px 2px,
      rgba(0, 0, 0, 0) 90deg,
      rgba(255, 255, 255, 0.02745) 0) 0 0 / 40px 40px,
    #2E6DBB;
  background:
    conic-gradient(
      from 90deg at 2px 2px,
      rgba(0, 0, 0, 0) 90deg,
      rgba(255, 255, 255, 0.02745) 0) 0 0 / 40px 40px,
    var(--blue);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "Commissioner", sans-serif;
  font-family: var(--font-sans);
}
main {
  flex: 1 0 auto;
}
hr {
  margin-top: 0.25em;
  margin-top: var(--space-x-small);
  border: none;
  height: 2px;
  background: #EBEDEE;
  background: var(--silver);
}
section {
  margin: auto;
  padding-left: 1em;
  padding-left: var(--space-medium);
  padding-right: 1em;
  padding-right: var(--space-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90ch;
}
@media (max-width: 40em) {
  section {
    padding-left: 0.5em;
    padding-left: var(--space-small);
    padding-right: 0.5em;
    padding-right: var(--space-small);
  }
}
a#skip {
  position: absolute;
  left: -999rem;
  top: 1rem;
  font-size: 75%;
  font-size: var(--type-x-small);
  z-index: 99;
}
a#skip:focus {
  left: 1rem;
}
@media (min-width: 40.01em) {
  .mobile-only {
    display: none;
  }
}
@media (max-width: 40em) {
  .desktop-only {
    display: none;
  }
}
body > header {
  margin-left: 1em;
  margin-left: var(--space-medium);
  margin-right: 1em;
  margin-right: var(--space-medium);
  display: flex;
  justify-content: center;
  margin-top: 6em;
  margin-top: var(--space-xxx-large);
  margin-bottom: 1em;
  margin-bottom: var(--space-medium);
}
hgroup.hero h1 {
  font-family: "PWScratchedfont", sans-serif;
  font-family: var(--font-blueprint);
  font-size: calc(3rem + 2vw);
  color: #EBEDEE;
  color: var(--silver);
}
hgroup.hero h1 .caps {
  font-size: calc(6rem + 4vw);
}
hgroup.hero p {
  margin-top: 0.25em;
  margin-top: var(--space-x-small);
  font-size: calc(1.5rem + 1vw);
  font-family: "Lore Alternates", sans-serif;
  font-family: var(--font-handwriting);
  color: #EBEDEE;
  color: var(--silver);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}
@media (max-width: 40em) {
  hgroup.hero h1 {
    font-size: calc(2.4rem + 1.5vw);
  }
  hgroup.hero h1 .caps {
    font-size: calc(5.2rem + 2vw);
  }
  hgroup.hero p {
    font-size: calc(1rem + 0.8vw);
    text-decoration-thickness: 1px;
  }
}
section.philosophy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
  gap: var(--space-medium);
  margin-top: 3em;
  margin-top: var(--space-x-large);
}
section.philosophy h2 {
  margin: auto;
  width: 100%;
  text-align: center;
}
section.philosophy a.button {
  margin: auto;
  text-align: center;
  margin-top: 2em;
  margin-top: var(--space-large);
}
section.philosophy a.button span {
  transform: translateY(2px);
}
section.philosophy a.button svg {
  height: 1.3em;
  transform: translateY(-1px);
}
.letter-container {
  position: relative;
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.4));
  filter: var(--drop-shadow-sm);
}
.letter-container img.pen {
  position: absolute;
  height: 60%;
  width: auto;
  bottom: 5%;
  right: -1%;
  rotate: 7deg;
  z-index: 2;
}
@media (max-width: 60em) {
  .letter-container img.pen {
    display: none;
  }
}
article.letter {
  max-width: 60ch;
  margin: auto;
  padding: 0 3em;
  line-height: 1.5;
  font-size: 85%;
  font-size: var(--type-small);
  background-image: url(/assets/paper-texture-beige.jpg);
  background-size: cover;
  background-position: 100% 80%;
}
article.letter p {
  font-family: "Code Saver", monospace;
  font-family: var(--font-mono);
}
article.letter footer {
  text-align: right;
  line-height: 1;
  margin-right: 1em;
  margin-right: var(--space-medium);
  font-family: "Code Saver", monospace;
  font-family: var(--font-mono);
}
article.letter footer svg.signature {
  height: 5em;
  width: auto;
  margin-bottom: -0.5em;
}
article.letter footer span.designation {
  display: block;
  line-height: 1.9;
  font-size: 85%;
  font-size: var(--type-small);
}
@media (max-width: 40em) {
  article.letter {
    padding: 0 1em;
  }
}
@supports (height: 1lh) {
  @media (min-width: 40ch) {
    article.letter {
      --punch-hole-ratio: 0.6;
      --punch-hole-position: 1.5lh;
      --dashed-line-thickness: 2px;
      border: solid 0 rgba(0, 0, 0, 0);
      border-width: 0 1.5lh;
      border-width: 0 var(--punch-hole-position);
      border-radius: 1px;
      background:
        conic-gradient(
          at 2px,
          rgba(0, 0, 0, 0) 75%,
          #616E7C 25%) 0 -.125lh/ calc(100% - 2px) 0.5lh padding-box,
        linear-gradient(hsl(45, 86%, 85%) 50%, #F5F5F5 0) 0 0/ 100% 2lh;
      background:
        conic-gradient(
          at var(--dashed-line-thickness),
          rgba(0, 0, 0, 0) 75%,
          #616E7C 25%) 0 -.125lh/ calc(100% - var(--dashed-line-thickness)) 0.5lh padding-box,
        linear-gradient(hsl(45, 86%, 85%) 50%, #F5F5F5 0) 0 0/ 100% 2lh;
      -webkit-mask:
        radial-gradient(
          calc(0.5 * 0.6 * 1lh) at calc(0.5 * 1.5lh),
          rgba(0, 0, 0, 0) calc(100% - 1px),
          red) 0 0 / calc(100% - 1.5lh) 1lh border-box;
      mask:
        radial-gradient(
          calc(0.5 * 0.6 * 1lh) at calc(0.5 * 1.5lh),
          rgba(0, 0, 0, 0) calc(100% - 1px),
          red) 0 0 / calc(100% - 1.5lh) 1lh border-box;
      -webkit-mask:
        radial-gradient(
          calc(0.5 * var(--punch-hole-ratio) * 1lh) at calc(0.5 * var(--punch-hole-position)),
          rgba(0, 0, 0, 0) calc(100% - 1px),
          red) 0 0 / calc(100% - var(--punch-hole-position)) 1lh border-box;
      mask:
        radial-gradient(
          calc(0.5 * var(--punch-hole-ratio) * 1lh) at calc(0.5 * var(--punch-hole-position)),
          rgba(0, 0, 0, 0) calc(100% - 1px),
          red) 0 0 / calc(100% - var(--punch-hole-position)) 1lh border-box;
    }
    article.letter p ~ p {
      margin-top: 1lh;
    }
  }
}
section.testimonials {
  margin: auto;
  margin-top: 2em;
  margin-top: var(--space-large);
}
section.testimonials h2 {
  margin: auto;
  width: 100%;
}
section.testimonials article {
  width: 100%;
  max-width: 80ch;
  margin-top: 2em;
  margin-top: var(--space-large);
  display: flex;
  flex-direction: column;
}
section.testimonials figure {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 50ch;
}
section.testimonials figure ~ figure {
  margin-top: 6em;
  margin-top: var(--space-xxx-large);
}
@media (max-width: 40em) {
  section.testimonials figure ~ figure {
    margin-top: 6em;
    margin-top: var(--space-xxx-large);
  }
}
section.testimonials figure:nth-child(4n+1) {
  align-self: flex-start;
}
section.testimonials figure:nth-child(4n+1) blockquote {
  background-position: 20% 30%;
}
section.testimonials figure:nth-child(4n-2) {
  align-self: flex-end;
}
section.testimonials figure:nth-child(4n-2) blockquote {
  background-position: 40% 10%;
}
section.testimonials figure:nth-child(4n-1) {
  align-self: center;
}
section.testimonials figure:nth-child(4n-1) blockquote {
  background-position: 80% 60%;
}
section.testimonials figure:nth-child(4n) {
  align-self: flex-start;
}
section.testimonials figure:nth-child(4n) blockquote {
  background-position: 55% 90%;
}
section.testimonials blockquote {
  position: relative;
  background-color: hsl(210, 24%, 16%);
  background-color: var(--grey-900);
  background-image: url(/assets/grain.png);
  background-size: cover;
  color: #EBEDEE;
  color: var(--silver);
  padding: 1em;
  padding: var(--space-medium);
  padding-top: 0.5em;
  padding-top: var(--space-small);
  font-family: "Commissioner", sans-serif;
  font-family: var(--font-sans);
  letter-spacing: 0.2px;
  line-height: 1.6;
  font-weight: 200;
  border-radius: 1px;
  border: 1px solid #EBEDEE;
  border: 1px solid var(--silver);
}
section.testimonials figcaption {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  margin-top: 1em;
  margin-top: var(--space-medium);
  color: #EBEDEE;
  color: var(--silver);
  font-family: "Lore", sans-serif;
  font-family: var(--font-handwriting-alt);
  position: absolute;
  bottom: -2.2em;
  right: 0px;
  border-radius: 1px;
  border: 1px solid #EBEDEE;
  border: 1px solid var(--silver);
  padding-top: 0.5em;
  padding-top: var(--space-small);
  padding-bottom: 0.25em;
  padding-bottom: var(--space-x-small);
  padding-left: 1em;
  padding-left: var(--space-medium);
  padding-right: 1em;
  padding-right: var(--space-medium);
  z-index: -1;
}
section.testimonials figcaption span.author {
  font-size: 85%;
  font-size: var(--type-small);
  line-height: 1.2;
}
section.testimonials figcaption span.designation {
  font-size: 55%;
  font-size: var(--type-xxx-small);
}
section.who-is-rt {
  margin-top: 4em;
  margin-top: var(--space-xx-large);
}
section.who-is-rt h2 {
  width: 100%;
  margin: auto;
  text-align: center;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  color: hsl(210, 24%, 16%);
  color: var(--grey-900);
  margin-bottom: 2em;
  margin-bottom: var(--space-large);
}
section.who-is-rt article {
  position: relative;
  max-width: 70ch;
  background: hsl(45, 86%, 92%);
  box-shadow: 0 0 100px 70px hsl(45, 86%, 85%) inset;
  line-height: 1.6;
  filter: drop-shadow(6px 8px 8px rgba(0, 0, 0, 0.4));
  filter: var(--drop-shadow);
  font-size: 85%;
  font-size: var(--type-small);
  border-radius: 1px;
  padding: 2em 3em;
  padding: var(--space-large) var(--space-x-large);
  margin: auto;
  margin-top: 3em;
  margin-top: var(--space-x-large);
  margin-bottom: 3em;
  margin-bottom: var(--space-x-large);
}
section.who-is-rt article strong {
  font-weight: 600;
}
section.who-is-rt article hr {
  background-color: hsl(211, 12%, 43%);
  background-color: var(--grey-500);
  height: 1px;
  margin-top: 2em;
  margin-top: var(--space-large);
}
section.who-is-rt article ul.arrow-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em 2em;
  gap: var(--space-small) var(--space-large);
  margin-top: 2em;
  margin-top: var(--space-large);
  font-family: "Lore", sans-serif;
  font-family: var(--font-handwriting-alt);
}
section.who-is-rt article ul.arrow-links li a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  gap: var(--space-small);
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: transform 0.05s linear;
  color: var(--color);
  fill: var(--color);
}
section.who-is-rt article ul.arrow-links li a:hover {
  transform: scale(1.1, 1.1) rotate(1deg);
}
section.who-is-rt article ul.arrow-links li a svg {
  width: 1em;
  height: auto;
  transform: translateY(-3px);
}
section.who-is-rt article div.figure-container {
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.4));
  filter: var(--drop-shadow-sm);
  display: inline-block;
  float: left;
  margin-right: 2em;
  margin-right: var(--space-large);
  margin-bottom: 1em;
  margin-bottom: var(--space-medium);
}
@media (max-width: 50em) {
  section.who-is-rt article {
    padding: 2em 1em;
    padding: var(--space-large) var(--space-medium);
    display: flex;
    flex-direction: column;
  }
  section.who-is-rt div.figure-container {
    float: none;
    float: initial;
    align-self: center;
    margin-right: 0 !important;
    margin-bottom: 3em !important;
    margin-bottom: var(--space-x-large) !important;
  }
  section.who-is-rt figure.id-card {
    transform: rotate(0);
  }
  section.who-is-rt hr {
    width: 100%;
  }
}
figure.id-card {
  --border-radius: 5px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  gap: var(--space-medium);
  background: url(/assets/paper-texture-white.jpg);
  background-size: cover;
  border-radius: 5px;
  border-radius: var(--border-radius);
  padding: 2em 4em;
  padding: var(--space-large) var(--space-xx-large);
  transform: rotate(-0.5deg);
}
figure.id-card:before {
  --inset: 9px;
  content: "";
  position: absolute;
  top: 9px;
  top: var(--inset);
  left: 9px;
  left: var(--inset);
  right: 9px;
  right: var(--inset);
  bottom: 9px;
  bottom: var(--inset);
  pointer-events: none;
  border-radius: var(--border-radius);
  border: 2px solid hsl(274, 87%, 37%);
  border: 2px solid var(--purple-700);
}
figure.id-card img {
  width: 8em;
  height: auto;
  border-radius: 3px;
  border: 1px solid hsl(123, 57%, 45%);
  border: 1px solid var(--green-400);
}
figure.id-card figcaption {
  text-align: center;
  line-height: 1;
}
figure.id-card figcaption h3 {
  font-family: "Metropolis Semi", sans-serif;
  font-family: var(--font-heading);
  font-size: 125%;
  font-size: var(--type-large);
  color: hsl(210, 24%, 16%);
  color: var(--grey-900);
}
figure.id-card figcaption h4 {
  font-family: "Code Saver", monospace;
  font-family: var(--font-mono);
  font-size: 75%;
  font-size: var(--type-x-small);
  margin-top: 0.1em;
  margin-top: var(--space-xx-small);
}
figure.id-card figcaption p.email {
  margin-top: 0.25em;
  margin-top: var(--space-x-small);
}
figure.id-card figcaption p.email a {
  font-family: "Code Saver", monospace;
  font-family: var(--font-mono);
  font-size: 75%;
  font-size: var(--type-x-small);
  color: hsl(274, 87%, 43%);
  color: var(--purple-600);
}
figure.id-card figcaption ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  margin-top: 1em;
  margin-top: var(--space-medium);
}
figure.id-card figcaption ul svg {
  height: 0.8em;
  width: auto;
  fill: hsl(125, 86%, 20%);
  fill: var(--green-800);
  transition: transform 0.05s linear;
}
figure.id-card figcaption ul svg:hover {
  transform: scale(1.1, 1.1);
}
@media (max-width: 40em) {
  figure.id-card figcaption ul svg {
    height: 0.9em;
  }
}
figure.id-card figcaption footer {
  display: flex;
  align-items: center;
  gap: 0.5em;
  gap: var(--space-small);
  font-size: 55%;
  font-size: var(--type-xxx-small);
  position: absolute;
  bottom: 1.5em;
  right: 2em;
  font-family: "Code Saver", monospace;
  font-family: var(--font-mono);
  --pin-primary: var(--red-600);
  --pin-secondary: var(--yellow-600);
}
figure.id-card figcaption footer svg {
  height: 1.2em;
  width: auto;
  transform: translateY(-1px);
}
section.working-together {
  margin-top: 4em;
  margin-top: var(--space-xx-large);
}
section.working-together h2 {
  margin: auto;
  width: 100%;
}
section.working-together article {
  position: relative;
  max-width: 75ch;
  margin: auto;
  align-items: center;
  gap: 4em;
  gap: var(--space-xx-large);
  margin-top: 3em;
  margin-top: var(--space-x-large);
  margin-bottom: 3em;
  margin-bottom: var(--space-x-large);
  background: hsl(45, 86%, 92%);
  box-shadow: 0 0 100px 70px hsl(45, 86%, 85%) inset;
  line-height: 1.6;
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.4));
  filter: var(--drop-shadow-sm);
  font-size: 85%;
  font-size: var(--type-small);
  padding: 2em 3em;
  padding: var(--space-large) var(--space-x-large);
  border-radius: 1px;
}
section.working-together article ul {
  list-style-type: circle;
  margin-left: 1.9em;
  margin-top: 1em;
  margin-top: var(--space-medium);
  font-weight: 300;
  font-size: 90%;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  gap: var(--space-small);
}
section.working-together article hr {
  background: hsl(211, 12%, 43%);
  background: var(--grey-500);
}
section.working-together article strong {
  font-weight: 600;
}
section.working-together a.button {
  margin: auto;
  padding-left: 2em;
  padding-left: var(--space-large);
  padding-right: 2em;
  padding-right: var(--space-large);
}
section.working-together a.button span {
  transform: translateY(2px);
}
section.working-together a.button svg {
  height: 1.3em;
  transform: translateY(-1px);
}
@media (max-width: 40em) {
  section.working-together article {
    padding: 2em 1em;
    padding: var(--space-large) var(--space-medium);
  }
  section.working-together ui-tape.left,
  section.working-together ui-tape.right {
    display: none;
  }
}
body > footer {
  text-align: center;
  font-size: 55%;
  font-size: var(--type-xxx-small);
  font-family: "Code Saver", monospace;
  font-family: var(--font-mono);
  color: #EBEDEE;
  color: var(--silver);
  margin-bottom: 0.5em;
  margin-bottom: var(--space-small);
}
body > footer hr {
  height: 1px;
}
body > footer p {
  padding: 0.1em 1em;
  padding: var(--space-xx-small) var(--space-medium);
}
section.contact-icons {
  position: absolute;
  top: 0.5em;
  left: 50%;
  transform: translateX(-50%);
}
section.contact-icons ul {
  display: flex;
  gap: 1em;
  gap: var(--space-medium);
}
section.contact-icons svg {
  fill: #EBEDEE;
  fill: var(--silver);
  height: 2rem;
  transition: transform 0.1s linear;
}
section.contact-icons svg:hover {
  transform: scale(1.3, 1.3);
}
@media (max-width: 40em) {
  section.contact-icons svg {
    height: 2rem;
  }
}
img.macintosh {
  position: absolute;
  top: 0;
  left: -0.5vw;
  width: 10vw;
  transform: rotate(20deg);
}
@media (max-width: 60em) {
  img.macintosh {
    display: none;
  }
}
div.testimonials-collage-container {
  position: relative;
}
div.testimonials-collage-container img.megaphone {
  position: absolute;
  top: 22em;
  left: -1.2em;
  width: 18vw;
  height: auto;
  rotate: -8deg;
}
@media (max-width: 60em) {
  div.testimonials-collage-container img.megaphone {
    display: none;
  }
}
div.working-together-collage-container {
  position: relative;
}
div.working-together-collage-container img.cricket {
  position: absolute;
  top: calc(-1em);
  right: -0.5em;
  width: 12vw;
  height: auto;
}
@media (max-width: 60em) {
  div.working-together-collage-container img.cricket {
    display: none;
  }
}
div.working-together-collage-container img.headphones {
  position: absolute;
  top: 35em;
  left: -1em;
  width: 9vw;
  height: auto;
  rotate: -50deg;
}
@media (max-width: 75em) {
  div.working-together-collage-container img.headphones {
    display: none;
  }
}
div.footer-collage {
  display: flex;
  margin-top: 3em;
  margin-top: var(--space-x-large);
  margin-bottom: 6em;
  margin-bottom: var(--space-xxx-large);
  justify-content: center;
  align-items: flex-end;
}
div.footer-collage img.airplane {
  width: 50vw;
  height: auto;
}
@media (max-width: 60em) {
  div.footer-collage img.airplane {
    width: 90vw;
  }
}
article.not_found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 2em);
}
article.not_found h1 {
  font-family: "Metropolis Semi", sans-serif;
  font-family: var(--font-heading);
  font-size: 200%;
  font-size: var(--type-xx-large);
  color: #EBEDEE;
  color: var(--silver);
}
article.not_found img {
  height: 10em;
  width: auto;
}
article.not_found a {
  margin-top: 2em;
  margin-top: var(--space-large);
}
/*# sourceMappingURL=/_bridgetown/static/index.6VTTCSZ5.css.map */