@font-face{font-family:Jost;src:url(/assets/fonts/jost-vf.woff2)format("woff2"),url(/assets/fonts/jost-vf.woff)format("woff");font-display:swap}body{background-color:#222;background-image:linear-gradient(#000d 300px,#0008 800px 85%,#000),var(--image-header);color:#eee;min-height:100vh;font-family:Jost,sans-serif;font-size:1rem}.page{max-width:90vw;margin:auto;padding:1rem}@media (orientation:landscape){.page{max-width:1024px}}:-webkit-any(header,fieldset li) :-webkit-any(a){color:#a541ed}:-webkit-any(header,fieldset li) :-webkit-any(a):hover{color:gold}:-moz-any(header,fieldset li) :-moz-any(a){color:#a541ed}:-moz-any(header,fieldset li) :-moz-any(a):hover{color:gold}:is(header,fieldset li) :is(a){color:#a541ed}:is(header,fieldset li) :is(a):hover{color:gold}header{place-items:center;margin-bottom:3rem;display:grid}header h1{text-align:center;border-bottom:1px solid #aaa;margin-bottom:.5rem;font-size:3rem;display:inline-block}header .data{justify-items:center;margin-top:2rem;display:grid}header .logo{width:250px}header p{text-align:center;max-width:700px;margin-bottom:0;font-size:1.4rem}header .options{accent-color:gold;margin:2rem 0;font-size:1.25rem}header .social{gap:1rem;margin-top:2rem;font-size:1.3rem;display:flex}@media (orientation:portrait){header .social{flex-direction:column}}header .social :-webkit-any(a){color:#fff;border:2px solid #fff;gap:.5rem;padding:1rem;text-decoration:none;display:flex}header .social :-webkit-any(a):hover{--color:#a54be6;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--color),black 20%)) drop-shadow(0 0 3px var(--color));fill:var(--color);color:var(--color)}header .social :-moz-any(a){color:#fff;border:2px solid #fff;gap:.5rem;padding:1rem;text-decoration:none;display:flex}header .social :-moz-any(a):hover{--color:#a54be6;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--color),black 20%)) drop-shadow(0 0 3px var(--color));fill:var(--color);color:var(--color)}header .social :is(a){color:#fff;border:2px solid #fff;gap:.5rem;padding:1rem;text-decoration:none;display:flex}header .social :is(a):hover{--color:#a54be6;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--color),black 20%)) drop-shadow(0 0 3px var(--color));fill:var(--color);color:var(--color)}header .social svg{fill:#fff;width:32px;height:32px}.list{flex-wrap:wrap;justify-content:center;gap:5rem 2rem;width:100%;margin-bottom:6rem;display:flex}header+.list :where(.card){clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%);position:relative}header+.list :where(.card):after{--size:50px;content:"";background:color-mix(in srgb,var(--paper-color),black 20%);width:var(--size);height:var(--size);transition:transform .25s;display:block;position:absolute;bottom:-5px;right:-10px}header+.list :where(.card):hover{clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%);cursor:pointer}header+.list :where(.card):hover:after{transform:translate(45px,45px)}.card{--paper-color:#fff;background:var(--paper-color);color:#111;border-top:8px solid var(--level);background-image:linear-gradient(25deg,#00000010 50%,#0000 50.5%);flex-direction:column;width:200px;min-height:200px;padding:1rem;transition:clip-path .25s,transform .25s;display:flex;box-shadow:8px 8px 10px #0006}.card.easy{--level:#6bbc6b}.card.medium{--level:#edd75d}.card.advanced{--level:#f47b7b}.card h2{border-bottom:1px solid #000;margin:0 0 1rem;font-size:2rem}.card p{color:#222;letter-spacing:-.5px;text-wrap:balance;margin:0 0 2.5rem;font-size:1.2rem}.card p :where(a:link){color:#0745e4}.card p :where(a:visited){color:#7a1dad}.card p :where(a:hover){color:red}.card:hover{transform:translateY(-25px)}.card>a{--theme-color:#242424;--dark-color:color-mix(in srgb,var(--theme-color),black 20%);letter-spacing:.5px;background:radial-gradient(circle,var(--theme-color) 50%,var(--dark-color) 85%);color:#fff;justify-content:center;margin-top:auto;padding:1rem;font-family:Montserrat,sans-serif;font-size:.9rem;font-weight:300;text-decoration:none;display:none}.card>a:hover{--theme-color:indigo}#faq{border:1px solid #888;width:-moz-fit-content;width:fit-content;margin:3rem auto;padding:1rem 2rem}#faq legend{padding:0 1rem}#faq ul{max-width:700px;font-size:1.2rem;line-height:1.2;list-style-type:square}#faq ul li{margin-bottom:.75rem}.page:has(.hints:checked) .card>a{opacity:0;transition:opacity .3s .1s;display:flex}.page:has(.hints:checked) .card:hover a{opacity:1}:root{--image-header:image-set(url(/assets/headers/css.avif) type("image/avif"), url(/assets/headers/css.webp) type("image/webp"))}body{margin:0}