/* This is a Marx clone with variable based custom styling: github.com/mblode/marx */

 @import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap');

 @media (prefers-color-scheme: light) {
   :root {
     --backgroundColor: #FFF;
     --textColor: #000;
     --highlightColor: #9DD5E3;
     --grey: #f0f0f0;
   }
 }

 @media (prefers-color-scheme: dark) {
   :root {
     --backgroundColor: #01242e;
     --textColor: #FDF;
     --highlightColor: #C990A4;
     --grey: #202020;
   }
 }

 :root {
   --headerFont: 'Funnel Display';
   --mainFont: 'Space Mono';
   --monospaceFont: 'Space Mono';
 }

 /* Document
 * ========================================================================== */
 /**
 * Add border box sizing in all browsers (opinionated).
 */
 *,
 ::before,
 ::after {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }

 /**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
 ::before,
 ::after {
   text-decoration: inherit;
   /* 1 */
   vertical-align: inherit;
   /* 2 */
 }

 /**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */
 html {
   cursor: default;
   background: var(--backgroundColor);
   /* 1 */
   line-height: 1.5;
   /* 2 */
   -moz-tab-size: 4;
   /* 3 */
   -o-tab-size: 4;
   tab-size: 4;
   /* 3 */
   -webkit-tap-highlight-color: transparent;
   -ms-text-size-adjust: 100%;
   /* 5 */
   -webkit-text-size-adjust: 100%;
   /* 5 */
   word-break: break-word;
   /* 6 */
 }

 /* Sections
 * ========================================================================== */
 /**
 * Remove the margin in all browsers (opinionated).
 */
 body {
   margin: 0;
 }

 /**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
 }

 /* Grouping content
 * ========================================================================== */
 /**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */
 dl dl,
 dl ol,
 dl ul,
 ol dl,
 ul dl {
   margin: 0;
 }

 /**
 * Remove the margin on nested lists in Edge 18- and IE.
 */
 ol ol,
 ol ul,
 ul ol,
 ul ul {
   margin: 0;
 }

 /**
 * 1. Add the correct sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */
 hr {
   height: 0;
   /* 1 */
   overflow: visible;
   /* 2 */
 }

 /**
 * Add the correct display in IE.
 */
 main {
   display: block;
 }

 /**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
 nav ol,
 nav ul {
   list-style: none;
   padding: 0;
 }


 /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
 pre {
   font-family: var(--monospaceFont), monospace;
   /* 1 */
   font-size: 1em;
   /* 2 */
 }

 /* Text-level semantics
 * ========================================================================== */
 /**
 * Remove the gray background on active links in IE 10.
 */
 a {
   background-color: transparent;
 }

 /**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */
 abbr[title] {
   text-decoration: underline;
   -webkit-text-decoration: underline dotted;
   text-decoration: underline dotted;
 }

 /**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
 b,
 strong {
   font-weight: bolder;
 }

 /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
 code,
 kbd,
 samp {
   font-family: var(--monospaceFont), monospace;
   /* 1 */
   font-size: 1em;
   /* 2 */
 }

 /**
 * Add the correct font size in all browsers.
 */
 small {
   font-size: 80%;
 }

 /* Embedded content
 * ========================================================================== */
 /*
 * Change the alignment on media elements in all browsers (opinionated).
 */
 audio,
 canvas,
 iframe,
 img,
 svg,
 video {
   display: block;
   /*margin: 2em auto;*/
   vertical-align: middle;
   border-style: none;
 }


 /**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
 svg:not([fill]) {
   fill: currentColor;
 }

 /**
 * Hide the overflow in IE.
 */
 svg:not(:root) {
   overflow: hidden;
 }

 /* Tabular data
 * ========================================================================== */
 /**
 * Collapse border spacing in all browsers (opinionated).
 */
 table {
   border-collapse: collapse;
 }

 /* Forms
 * ========================================================================== */
 /**
 * Remove the margin on controls in Safari.
 */
 button,
 input,
 select {
   margin: 0;
 }

 /**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */
 button {
   overflow: visible;
   /* 1 */
   text-transform: none;
   /* 2 */
 }

 /**
 * Correct the inability to style buttons in iOS and Safari.
 */
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
 }

 /**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */
 fieldset {
   border: 1px solid #a0a0a0;
   /* 1 */
   padding: 0.35em 0.75em 0.625em;
   /* 2 */
 }

 /**
 * Show the overflow in Edge 18- and IE.
 */
 input {
   overflow: visible;
 }

 /**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */
 legend {
   color: inherit;
   /* 2 */
   display: table;
   /* 1 */
   max-width: 100%;
   /* 1 */
   white-space: normal;
   /* 1 */
 }

 /**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
 progress {
   display: inline-block;
   /* 1 */
   vertical-align: baseline;
   /* 2 */
 }

 /**
 * Remove the inheritance of text transform in Firefox.
 */
 select {
   text-transform: none;
 }

 /**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */
 textarea {
   margin: 0;
   /* 1 */
   overflow: auto;
   /* 2 */
   resize: vertical;
   /* 3 */
 }

 /**
 * Remove the padding in IE 10-.
 */
 [type="checkbox"],
 [type="radio"] {
   padding: 0;
 }

 /**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
 [type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
   /* 2 */
 }

 /**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
   height: auto;
 }

 /**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
 ::-webkit-input-placeholder {
   color: inherit;
   opacity: 0.54;
 }

 /**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
 ::-webkit-search-decoration {
   -webkit-appearance: none;
 }

 /**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
 ::-webkit-file-upload-button {
   -webkit-appearance: button;
   /* 1 */
   font: inherit;
   /* 2 */
 }

 /**
 * Remove the inner border and padding of focus outlines in Firefox.
 */
 ::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }

 /**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */
 :-moz-focusring {
   outline: 1px dotted ButtonText;
 }

 /**
 * Remove the additional :invalid styles in Firefox.
 */
 :-moz-ui-invalid {
   box-shadow: none;
 }

 /* Interactive
 * ========================================================================== */
 /*
 * Add the correct display in Edge 18- and IE.
 */
 details {
   display: block;
 }

 /*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */
 dialog {
   background-color: white;
   border: solid;
   color: black;
   display: block;
   height: -moz-fit-content;
   height: -webkit-fit-content;
   height: fit-content;
   left: 0;
   margin: auto;
   padding: 1em;
   position: absolute;
   right: 0;
   width: -moz-fit-content;
   width: -webkit-fit-content;
   width: fit-content;
 }

 dialog:not([open]) {
   display: none;
 }

 /*
 * Add the correct display in all browsers.
 */
 summary {
   display: list-item;
 }

 /**
 * Add the correct display in IE.
 */
 template {
   display: none;
 }

 /* User interaction
 * ========================================================================== */
 /*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */
 a,
 area,
 button,
 input,
 label,
 select,
 summary,
 textarea,
 [tabindex] {
   -ms-touch-action: manipulation;
   /* 1 */
   touch-action: manipulation;
   /* 2 */
 }

 /**
 * Add the correct display in IE 10-.
 */
 [hidden] {
   display: none;
 }

 /* Accessibility
 * ========================================================================== */
 /**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
 [aria-busy="true"] {
   cursor: progress;
 }

 /*
 * Change the cursor on control elements in all browsers (opinionated).
 */
 [aria-controls] {
   cursor: pointer;
 }

 /*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
 [aria-disabled="true"],
 [disabled] {
   cursor: not-allowed;
 }

 /*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
 [aria-hidden="false"][hidden] {
   display: initial;
 }

 [aria-hidden="false"][hidden]:not(:focus) {
   clip: rect(0, 0, 0, 0);
   position: absolute;
 }


 main,
 header,
 footer,
 article,
 section,
 aside,
 details,
 nav,
 summary {
   margin: 0 auto;
   margin-bottom: 16px;
   width: 100%;
 }

 main {
   display: block;
   margin: 0 auto;
   max-width: 768px;
   padding: 0 16px 16px;
 }

 nav {
   text-align: center;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--grey);
 }




 footer {
   border-top: 1px solid var(--grey);
   padding: 8px 0;
   text-align: center;
   font-size: 0.9em;
   margin-top: 5em;
   margin-bottom: 0;
   background: var(--grey);
 }

 hr {
   border: 0;
   border-top: 1px solid var(--grey);
   display: block;
   margin-top: 16px;
   margin-bottom: 16px;
   width: 100%;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
   height: 0;
   overflow: visible;
 }

 /*img {
  height: auto;
  max-width: 100%;
  vertical-align: baseline;
}
*/
 @media screen and (max-width: 400px) {

   article,
   section,
   aside {
     clear: both;
     display: block;
     max-width: 100%;
   }
 }

 embed,
 iframe,
 video {
   border: 0;
 }

 body {
   color: var(--textColor);
   font-family: var(--mainFont), serif;
   font-size: 1em;
   line-height: 1.5;
 }

 p {
   margin: 0;
   margin-bottom: 16px;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   color: var(--textColor);
   font-family: var(--headerFont), serif;
   /*text-align: center;*/
   line-height: 1.2;
   font-weight: 500;
 }

 h1 {
   font-size: 40px;
   margin: 30px 0 20px 0;
   text-align: center;
 }

 h2 {
   font-size: 24px;
   margin: 24px 0 16px 0;
 }

 h3 {
   font-size: 24px;
   margin: 24px 0 16px 0;
 }

 h4 {
   font-size: 24px;
   margin: 24px 0 16px 0;
 }

 h5 {
   font-size: 20px;
   margin: 24px 0 16px 0;
 }

 h6 {
   font-size: 16px;
   margin: 24px 0 16px 0;
 }

 small {
   vertical-align: bottom;
 }

 pre {
   background: var(--grey);
   color: var(--textColor);
   display: block;
   font-family: var(--monospaceFont), monospace;
   font-size: 16px;
   margin: 16px 0;
   padding: 16px;
   white-space: pre-wrap;
   overflow-wrap: break-word;
 }

 code {
   color: var(--textColor);
   font-family: var(--monospaceFont), monospace;
   font-size: 16px;
   line-height: inherit;
   margin: 0;
   padding: 0;
   vertical-align: baseline;
   word-break: break-all;
   word-wrap: break-word;
 }


 a {
   color: var(--textColor);
   text-decoration: none;
   font-weight: bold;
   background-color: transparent;
 }

 a:hover {
   color: var(--highlightColor);
   text-decoration: none;
 }

 dl {
   margin-bottom: 16px;
 }

 dd {
   margin-left: 40px;
 }

 ul,
 ol {
   margin-bottom: 8px;
   padding-left: 40px;
   vertical-align: baseline;
 }

 blockquote {
   border-left: 2px solid var(--highlightColor);
   font-family: var(--mainFont), sans-serif;
   font-style: italic;
   margin: 16px 0;
   padding-left: 16px;
 }

 figure {
   text-align: center;
 }

 figcaption {
   font-family: var(--mainFont), sans-serif;
 }

 u {
   text-decoration: underline;
 }

 s {
   text-decoration: line-through;
 }

 sup {
   font-size: 14px;
   vertical-align: super;
 }

 sub {
   font-size: 14px;
   vertical-align: sub;
 }

 mark {
   background: var(--highlightColor);
   color: var(--textColor);
 }

 input,
 select,
 textarea {
   display: block;
   background: var(--grey);
   background-clip: padding-box;
   border: none;
   color: var(--textColor);
   display: block;
   width: 100%;
   font-size: 1rem;
   margin: 0.6em 0;
   padding: 0.5em 1em;

   line-height: 1.5;
   -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
   transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
   transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
   font-family: var(--mainFont), sans-serif;
   outline: none;
 }


 select {
   border: 1px solid rgba(0, 0, 0, 0.12);
   vertical-align: sub;
 }

 select:not([size]):not([multiple]) {
   height: -webkit-calc(2.25rem + 2px);
   height: calc(2.25rem + 2px);
 }

 select[multiple] {
   height: auto;
 }

 label {
   display: inline-block;
   line-height: 2;
 }

 fieldset {
   border: 0;
   margin: 0;
   padding: 8px 0;
 }

 legend {
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   text-align: center;
   display: block;
   margin-bottom: 8px;
   padding: 8px 0;
   width: 100%;
 }

 textarea {
   overflow: auto;
   resize: vertical;
 }


 input[type=submit],
 input[type=reset],
 input[type=button],
 button {
   background-color: var(--grey);
   border: none;
   border-radius: 0px;
   padding: 8px 16px;
   display: inline-block;
   font-weight: 400;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   border: 1px solid transparent;
   font-size: 1rem;
   line-height: 1.5;
   -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
   transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
   transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
 }

 input[type=submit]::-moz-focus-inner,
 input[type=reset]::-moz-focus-inner,
 input[type=button]::-moz-focus-inner,
 button::-moz-focus-inner {
   padding: 0;
 }

 input[type=submit]:hover,
 input[type=reset]:hover,
 input[type=button]:hover,
 button:hover {
   background-color: var(--highlightColor);
 }

 input[type=submit]:not(:disabled):active,
 input[type=reset]:not(:disabled):active,
 input[type=button]:not(:disabled):active,
 button:not(:disabled):active {
   background-color: var(--grey);
 }

 input[type=submit]:focus,
 input[type=reset]:focus,
 input[type=button]:focus,
 button:focus {
   outline: none;
 }

 input[type=submit]:disabled,
 input[type=reset]:disabled,
 input[type=button]:disabled,

 button:disabled {
   opacity: .2;
   cursor: not-allowed;
 }

 table {
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   margin-bottom: 16px;
 }

 caption {
   padding: 8px 0;
 }

 thead th {
   border: 0;
   border-bottom: 2px solid rgba(0, 0, 0, 0.12);
   text-align: left;
 }

 tr {
   margin-bottom: 8px;
 }

 th,
 td {
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   padding: 16px;
   vertical-align: inherit;
 }

 tfoot tr {
   text-align: left;
 }

 tfoot td {
   color: rgba(0, 0, 0, 0.54);
   font-size: 8px;
   font-style: italic;
   padding: 16px 4px;
 }

 nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 868px;
 }

 nav h1 {
   margin: 0;
   /* Removes default margin for better alignment */
 }

 nav ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   gap: 1rem;
   /* Adds space between list items */
 }

 nav ul li {
   display: inline;
   /* Ensures list items are inline */
 }