@font-face{font-weight:400;font-style:normal;font-family:CompassGoldTitle;src:url(/fonts/CompassGold.woff) format("woff");font-display:block}@font-face{font-weight:400;font-style:normal;font-family:CompassGold;size-adjust:130%;src:url(/fonts/CompassGold.woff) format("woff");font-display:block}*{margin:0;padding:0;box-sizing:border-box}:root{--font-heading: "CompassGold", monospace;--font-body: "CompassGold", monospace;--color-black: #111;--color-darkest: #3B3B3D;--color-gray: #818571;--color-light: #C6CEA5;--color-green: #64B47C;--color-bright: #038c4c;--color-text: var(--color-light);--color-card: #4e5044}body{background:var(--color-darkest);font-family:var(--font-body);color:var(--color-text);image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;background-image:repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(198,206,165,.03) 4px,rgba(198,206,165,.03) 8px),repeating-linear-gradient(90deg,transparent,transparent 4px,rgba(198,206,165,.03) 4px,rgba(198,206,165,.03) 8px);position:relative;font- &:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;background-image:radial-gradient(circle at 20% 30%,var(--color-bright) 2px,transparent 2px),radial-gradient(circle at 80% 70%,var(--color-green) 3px,transparent 3px),radial-gradient(circle at 50% 50%,var(--color-gray) 2px,transparent 2px),radial-gradient(circle at 90% 20%,var(--color-bright) 2px,transparent 2px),radial-gradient(circle at 10% 80%,var(--color-green) 2px,transparent 2px);background-size:100% 100%;animation:pixelFloat 20s ease-in-out infinite}}.shape{position:fixed;z-index:-1;width:8px;height:8px;opacity:.4}.shape-1{animation:pixelDrift 15s linear infinite;box-shadow:150px 100px 0 var(--color-gray),158px 100px 0 var(--color-gray),150px 108px 0 var(--color-gray),158px 108px 0 var(--color-gray)}.shape-2{animation:pixelDrift 10s linear infinite;box-shadow:8px 0 0 var(--color-bright),0 8px 0 var(--color-bright),8px 16px 0 var(--color-bright),-100px 100px 0 var(--color-green),-92px 100px 0 var(--color-green),-100px 108px 0 var(--color-green)}.shape-3{animation:pixelDrift 5s linear infinite;box-shadow:8px 0 0 var(--color-bright),0 8px 0 var(--color-bright),-100px 100px 0 var(--color-green),-92px 100px 0 var(--color-green),-100px 108px 0 var(--color-green),150px 100px 0 var(--color-gray),158px 100px 0 var(--color-gray),150px 108px 0 var(--color-gray),158px 108px 0 var(--color-gray)}@keyframes pixelFloat{0%,to{transform:translate(0);opacity:.3}25%{transform:translate(10px,-20px);opacity:.5}50%{transform:translate(-5px,-10px);opacity:.4}75%{transform:translate(15px,-30px);opacity:.6}}@keyframes pixelDrift{0%{transform:translateY(0) translate(0);opacity:.4}50%{transform:translateY(-20px) translate(10px);opacity:.6}to{transform:translateY(0) translate(0);opacity:.4}}.container{position:relative;z-index:1}.container{max-width:800px;margin:0 auto;position:relative;z-index:1}a{color:var(--color-green);text-decoration:none;font-weight:900;border-bottom:3px solid var(--color-green);padding-bottom:2px;&.button{border:none;padding-bottom:0}&:hover{color:var(--color-bright);border-bottom-color:var(--color-bright);background:#029a531a}&:active{transform:translate(2px,2px)}}.hero{border:8px solid var(--color-light);padding:60px 40px;margin-bottom:60px;background:var(--color-card);box-shadow:0 12px 0 0 var(--color-darkest);text-align:center;position:relative;&.dithered{background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px)}.hero-title{font-size:72px;font-weight:900;text-transform:uppercase;color:var(--color-light);text-shadow:0 5px 0px var(--color-darkest);margin:0 0 20px;letter-spacing:-4px;line-height:1}.hero-subtitle{font-size:24px;font-weight:700;color:var(--color-green);text-shadow:0 2px 0px var(--color-darkest);margin:0 0 40px;letter-spacing:2px}@media(max-width:800px){.hero-title{font-size:50px}.hero-subtitle{font-size:20px}}@media(max-width:600px){.hero-title{font-size:32px}.hero-subtitle{font-size:16px}}}button{background:var(--color-bright);color:var(--color-light);border:5px solid var(--color-light);box-shadow:0 6px 0 var(--color-black);padding:18px 36px;font-size:24px;font-weight:900;font-family:var(--font-body);text-shadow:0 2px 0px var(--color-darkest);text-transform:uppercase;cursor:pointer;margin-right:16px;margin-bottom:16px;position:relative;&:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--color-black)}&:focus{outline:none;transform:translateY(4px);box-shadow:0 2px 0 var(--color-black)}}.checkbox-wrapper{display:flex;align-items:center;margin:20px 0;cursor:pointer;user-select:none;padding:12px;border:4px solid var(--color-gray);background:var(--color-card)}input[type=checkbox]{appearance:none;width:32px;height:32px;border:5px solid var(--color-light);background:var(--color-card);cursor:pointer;position:relative;margin-right:16px}input[type=checkbox]:checked{background:var(--color-green);border-color:var(--color-green)}input[type=checkbox]:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--color-darkest);font-size:24px;font-weight:900;line-height:1}input[type=radio]{appearance:none;width:32px;height:32px;border:5px solid var(--color-light);background:var(--color-card);cursor:pointer;position:relative;margin-right:16px}input[type=radio]:checked{background:var(--color-green);border-color:var(--color-green)}input[type=radio]:checked:after{content:"●";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--color-bright);font-size:16px;font-weight:900;line-height:1}.radio-wrapper{display:flex;align-items:center;margin:20px 0;cursor:pointer;user-select:none;padding:12px;border:4px solid var(--color-gray);background:var(--color-card)}label{font-size:18px;font-weight:700;text-transform:uppercase}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:none!important;position:relative;background:var(--color-card);color:var(--color-light);border:5px solid var(--color-light);padding:18px 50px 18px 18px;font-size:18px;font-family:var(--font-body);font-weight:700;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 0 var(--color-black);text-shadow:0 2px 0px var(--color-darkest);margin:16px 0;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23C6CEA5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:24px;&:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--color-black)}&:focus{outline:none;transform:translateY(4px);box-shadow:0 2px 0 var(--color-black)}}.select-wrapper{position:relative;display:inline-block}.select-wrapper:after{content:"";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid var(--color-light);pointer-events:none}.pixel-container{border:6px solid var(--color-green);padding:32px;margin:30px 0;background:var(--color-card);box-shadow:12px 12px 0 var(--color-gray);position:relative}.pixel-container:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--color-bright),var(--color-bright) 4px,transparent 4px,transparent 12px)}.corner-pixels{position:relative}.corner-pixels:before,.corner-pixels:after{content:"";position:absolute;width:12px;height:12px;background:var(--color-light)}.corner-pixels:before{top:-6px;left:-6px;box-shadow:12px 0 0 var(--color-light),0 12px 0 var(--color-light)}.corner-pixels:after{bottom:-6px;right:-6px;box-shadow:-12px 0 0 var(--color-light),0 -12px 0 var(--color-light)}
