@import "https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";@font-face{font-family:PinkBlue;src:url(./Pink Blue-sa4jmsbw.ttf)}@font-face{font-family:Pricedown;src:url(./pricedown bl-jcmtvnhm.ttf)}@property --btn-primary{syntax:"<color>";inherits:true;initial-value:#fb438a}:root{--secondary:#fb438a;--primary:#1dc8e8;--background:#26262e;--icon-colour:#fff;--buncss-light:initial;--buncss-dark: ;color-scheme:light dark;color:#c7d3eb;background-color:var(--background);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Avenir,Helvetica,Arial,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--buncss-light: ;--buncss-dark:initial}}*{box-sizing:border-box;font-family:Inter,sans-serif}h1,h2,h3,h4{margin:0}h1{color:var(--primary);letter-spacing:20px;text-shadow:0 0 4px var(--secondary),0 0 4px var(--secondary),0 0 4px var(--secondary),0 0 4px var(--secondary);-webkit-text-stroke:2px black;margin:0;font-family:PinkBlue,sans-serif;font-size:40px;@media screen and (width<=600px){&{font-size:16vw}}}button:not(.btn-pushable){cursor:pointer;position:relative;z-index:2;background:0 0;border:none;border-radius:8px;min-height:40px;padding:0 20px;&:hover{&:after{background:#e63075;transform:translate(1px,2px)}}&:before{z-index:-1;content:"";position:absolute;border-radius:inherit;background:#fff;inset:0;transform:translate(2px,3px)}&:after{z-index:-1;background:var(--secondary);content:"";position:absolute;background:var(--secondary);border-radius:inherit;inset:0}}dialog[popover]:popover-open{display:grid;border:1px solid #fff6;border-radius:8px;gap:20px;padding:40px;&::backdrop{backdrop-filter:blur(2px);background:#0002}& form{display:grid;gap:20px;&:invalid{& button[type=submit]{opacity:.5;cursor:not-allowed}& input[type=submit]{opacity:.5;cursor:not-allowed}}& input{height:40px;padding:0 8px}}}#app{display:grid;place-items: center;height:90vh;& main{display:grid;grid-auto-flow:row;grid-template-rows:max-content 1fr;text-align:center;gap:20px;max-width:1400px;margin:0 auto;& h1{letter-spacing:40px;font-size:140px}}}#game{display:grid;grid-auto-flow:row;grid-template-rows:max-content 1fr;gap:20px;max-width:1400px;margin:0 auto;& nav{display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr 1fr;place-items: center;&>:first-child{justify-self:start}&>:last-child{justify-self:end}}&.complete{& .progress{transform:translateY(30px)scale(1.5)}}& .progress{border:2px solid rgba(from var(--secondary)r g b/.5);display:grid;grid-auto-columns:1fr;grid-auto-flow:column;z-index:10;border-radius:30px;gap:6px;padding:8px;&>div{background:rgba(from var(--secondary)r g b/.5);position:relative;border-radius:30px;width:30px;height:30px;padding:2px;&.played{background:#e71515;&:before{position:absolute;content:"";border-radius:30px 30px 0 0;height:15px;inset:0}&:after{position:absolute;content:"";border-radius:30px 30px 0 0;height:15px;inset:0}&.year{&:before{background:var(--primary)}}&.month{&:after{background:var(--primary);top:unset;transform:rotate(180deg)}}}}}& main{display:grid;gap:50px}& .image-area{& .thumbnail{aspect-ratio:16/9;& img{object-fit:contain;width:100%}}}& form.guesses{display:grid;grid-auto-flow:row;justify-self:stretch;gap:40px;&:invalid{& button[type=submit]{cursor:not-allowed;opacity:.5}}& fieldset.radio-group{display:grid;grid-auto-flow:column;position:relative;border:none;margin:0;padding:0;&:before{position:absolute;background:var(--secondary);content:"";height:2px;bottom:0;left:0;right:0}&>:first-child{&:after{position:absolute;content:"";background:var(--secondary);width:2px;height:20px;bottom:0;left:0}}&>:last-child{&:after{position:absolute;content:"";background:var(--secondary);width:2px;height:20px;bottom:0;right:0}}& label.radio-group-option{position:relative;display:grid;color:#fff;place-items: center;height:50px;&:before{position:absolute;content:"";background:var(--secondary);display:grid;place-items: center;width:2px;height:10px;bottom:0;left:calc(50% - 1px)}&:hover:not(&:has(input[type=radio]:checked)){color:var(--secondary);cursor:pointer}&:focus-within{outline:3px solid #fff}&:has(input[type=radio]:checked){background:var(--secondary)}&>input[type=radio]{position:absolute;opacity:0;outline:none;cursor:pointer;margin:0;inset:0}}}}& .answer{display:grid;backdrop-filter:blur(20px);background:var(--secondary);align-content: center;justify-self:stretch;justify-items:center;gap:20px;width:100vw;min-height:400px;font-family:Pricedown,sans-serif;& .chips{display:flex;gap:20px;& .chip{display:grid;border-radius:40px;place-items: center;width:100px;height:40px;&.correct{background:green}&.wrong{background:#e71515}}}& button{--btn-primary:var(--primary)}& .cokhex{letter-spacing:10px;color:#fff;-webkit-text-stroke:2px black;font-family:Pricedown,sans-serif;font-size:70px}}& .modal{position:fixed;display:grid;backdrop-filter:blur(20px);align-content: center;justify-items:center;gap:20px;font-family:Pricedown,sans-serif;inset:0;& .body{background:var(--secondary);min-width:60vw;min-height:50vh}}& #alsitty{position:fixed;transform-origin:bottom left;z-index:10;width:50px;transition:all .3s;bottom:0;left:0;&:hover{transform:scale(3)}}}.btn-pushable{position:relative;cursor:pointer;outline-offset:4px;user-select:none;touch-action:manipulation;background:0 0;border:none;padding:0;transition:filter .25s;&:hover{filter:brightness(110%);& .btn-front{transition:transform .25s cubic-bezier(.3,.7,.4,1.5);transform:translateY(-6px)}& .btn-shadow{transition:transform .25s cubic-bezier(.3,.7,.4,1.5);transform:translateY(4px)}}&:active{& .btn-front{transition:transform 34ms;transform:translateY(-2px)}& .btn-shadow{transition:transform 34ms;transform:translateY(1px)}}&:focus:not(:focus-visible){outline:none}& .btn-shadow{position:absolute;will-change:transform;background:#00000040;border-radius:12px;width:100%;height:100%;transition:transform .6s cubic-bezier(.3,.7,.4,1);top:0;left:0;transform:translateY(2px)}& .btn-edge{position:absolute;background:linear-gradient(to left,hsl(from var(--btn-primary)h s 16%)0%,hsl(from var(--btn-primary)h s 32%)8%,hsl(from var(--btn-primary)h s 32%)92%,hsl(from var(--btn-primary)h s 16%)100%);border-radius:12px;width:100%;height:100%;top:0;left:0}& .btn-front{display:block;position:relative;color:#fff;background:var(--btn-primary);will-change:transform;border-radius:12px;padding:12px 27px;transition:transform .6s cubic-bezier(.3,.7,.4,1);font-size:1.1rem;transform:translateY(-4px)}}@media (width>=768px){.btn-front{padding:12px 42px;font-size:1.25rem}}