@font-face {
     font-family: AN;
     src: url(/fonts/ArialNarrow.ttf);
 }

 :root {
     --bg-dark: #6d7387;
     --bg-gold: rgb(188, 141, 22);
     --bg-brown: rgb(150, 98, 0);
     --bg-brown-hover: rgb(144, 110, 0);
     --shadow-white: 0 0 1px white;
     --shadow-text: 0 0 1rem white;
     --shadow-h1: 0 0 1rem purple;
     --blur-subtle: 0.035rem;
     --blur-med: 0.285rem;
     --blur-heavy: 3rem;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     background-color: var(--bg-dark);
     color: white;
     font-family: 'AN', Arial Narrow, Arial, sans-serif;
     line-height: 1.5rem;
     text-shadow: var(--shadow-text);
 }

 .content {
     padding: 5rem 1.25rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 3rem;
 }

 .intro,
 .to-do {
     filter: blur(var(--blur-subtle));
     max-width: 100%;
 }

 .intro {
     transform: rotate(-5deg);
     background-color: rgba(26, 25, 98, 0.505);
     padding: 1rem;
     width: 100%;
     max-width: 35rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     z-index: 99;
     mix-blend-mode: screen;
 }

 .to-do {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     mix-blend-mode: luminosity;
 }

 .to-do p {
     margin: 0 auto;
     width: 100%;
     max-width: 45rem;
     padding: 0 1rem;
     text-align: center;
 }

 ul {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 1rem;
     width: 45rem;
     max-width: 100%;
 }

 li {
     background-color: var(--bg-brown);
     box-shadow: var(--shadow-white);
     padding: 0.5rem;
     width: max-content;
     text-align: center;
     list-style: none;
     mix-blend-mode: luminosity;
     transition: 0.5s;
 }

 li:hover {
     background-color: var(--bg-brown-hover);
 }

 .selection-counter {
     text-align: center;
     font-size: 0.9rem;
     color: greenyellow;
     margin: 0 auto;
 }

 .email-send-btn {
     border: none;
     color: white;
     font-size: 1rem;
     margin: 0 auto;
     padding: 0.5rem;
     background-color: var(--bg-gold);
     box-shadow: var(--shadow-white);
     mix-blend-mode: luminosity;
     cursor: pointer;
 }

 h1 {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(5, 15);
     font-family: 'Times New Roman', Times, serif;
     color: white;
     text-shadow: var(--shadow-h1);
     filter: blur(var(--blur-med));
     mix-blend-mode: multiply;
     z-index: -2;
 }

 h1::selection {
     color: rgba(172, 255, 47, 0.75);
 }

 a {
     color: white;
 }

 a[href^="http"]::after {
     content: " ↗";
 }

 ::selection {
     color: yellowgreen;
 }

 .pylon {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     height: 80vh;
     width: 90vw;
     filter: blur(var(--blur-heavy));
     opacity: 75%;
     mix-blend-mode: color-dodge;
     z-index: -1;
 }

 .me {
     filter: blur(var(--blur-med));
     mix-blend-mode: screen;
     z-index: 99;
 }

 li.selected {
     opacity: 0.6;
     text-decoration: line-through;
 }

 li:hover:not(.selected) {
     opacity: 0.7;
 }

 select {
     background: transparent;
     border: none;
     outline: none;
     color: white;
     font-size: 1rem;
     font-family: 'AN', Arial Narrow, Arial, sans-serif;
     text-shadow: var(--shadow-text);
     line-height: 1.5rem;
     cursor: pointer;
     display: inline-block;
 }

 @media (max-width: 600px) {

     .content {
         padding: 1rem 1rem;
     }

     ul {
         width: 100%;
     }

     .pylon {
         width: 100vw;
     }

     .me {
         max-width: 100%;
         height: auto;
     }
 }

 select::-ms-expand {
     display: none;
 }

 option {
     background-color: var(--bg-dark);
     color: white;
     font-family: 'AN', Arial Narrow, Arial, sans-serif;
 }