@import"https://fonts.bunny.net/css?family=inter:400|josefin-sans:400,700|noto-music:400";:root{--text-color: #E8E8E8;--bg-color: #16161A;--red: #F97583;--green: #42D392;--blue: #6088F3}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:var(--bg-color);color:var(--text-color)}#site_wrapper{min-height:100vh;display:grid;grid-template-columns:1fr minmax(258px,1fr) 205px minmax(258px,1fr) 1fr;grid-template-rows:64px minmax(115px,1fr) 205px minmax(173px,min-content) minmax(175px,1fr) 64px;grid-template-areas:"header header header header header" "gap_1 gap_1 gap_1 gap_1 gap_1" ". . featured_header . ." ". featured_main featured_main featured_main ." "gap_2 gap_2 gap_2 gap_2 gap_2" "footer footer footer footer footer"}.header{grid-area:header;display:flex;justify-content:space-between;padding:16px;position:sticky;top:0;background-color:var(--bg-color)88;backdrop-filter:blur(16px);z-index:10}.featured_header{grid-area:featured_header}.featured_main{grid-area:featured_main;position:relative;display:grid;place-items:center}.featured_main a:not(.btn),.footer a:not(.btn){color:var(--text-color);&:hover,&:focus{color:var(--green)}}.footer{grid-area:footer;background-image:radial-gradient(ellipse 50% 64px at bottom,#333a,transparent)}.footer p{margin-top:1.5rem;opacity:.6;text-align:center}.nav-list{list-style-type:none;display:flex;gap:1rem;margin-top:-1px}.btn,h1,h2,h3,h4,h5,h6{font-family:Josefin Sans,sans-serif}.logo{width:100%;height:100%;background-color:var(--text-color);color:#000;border-radius:1rem;position:relative;display:grid;place-items:center;box-shadow:#0004 0 6px 12px;z-index:1}.logo .default-image{position:absolute;opacity:1;transition:opacity .7s ease-in-out}.logo .hover-image{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);opacity:0;border-radius:.85rem;transition:opacity .7s ease-in-out}.logo:hover,.logo:focus{.default-image{opacity:0}.hover-image{opacity:1}}.mobile{display:none}.menu-button,.menu-close button{display:block;background:none;border:none;cursor:pointer}#menu-dialog::backdrop{background-color:#000a;backdrop-filter:blur(16px)}#menu-dialog{margin:auto;background-color:transparent;border:none;padding:0}.modal ul{list-style-type:none;display:grid;gap:2rem}.modal a{color:var(--text-color);text-decoration:none;font-size:2em;font-family:Josefin Sans,sans-serif;transition:color .2s ease-in-out}.modal a:hover,.modal a:focus{color:var(--green)}.menu-close{position:fixed;top:16px;right:16px}.modal a.active{color:var(--blue);text-decoration:underline}.featured_main.page{gap:1rem;margin-top:2rem}.btn{min-height:34px;min-width:168px;display:flex;justify-content:center;align-items:center;background-color:var(--text-color);border-radius:24px;text-transform:uppercase;text-decoration:none;color:var(--bg-color);text-shadow:var(-bg-color) 0 0 0;font-size:14px;font-weight:700;transition:text-shadow .2s ease-in-out,background-color .2s ease-in-out}.btn:hover,.btn:focus{background-color:#d4d4d4}.btn:active{text-shadow:var(--bg-color) 0 0 4px}.btn{&.red,&.green,&.blue{color:var(--text-color);text-shadow:var(--text-color) 0 0 0;&:active{text-shadow:var(--text-color) 0 0 4px}}}.btn.red{background-color:var(--red);&:hover,&:focus{background-color:#d76571}}.btn.green{background-color:var(--green);&:hover,&:focus{background-color:#3aa072}}.btn.blue{background-color:var(--blue);&:hover,&:focus{background-color:#5170c2}}.flex-column{display:flex;flex-direction:column;align-items:center;gap:1rem;height:100%}.flex-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1rem;margin:0 auto}.right{margin-left:auto}.left{margin-right:auto}.bottom{margin-top:auto}.grid{width:100%;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));place-items:center}.tall{grid-row:1 / 3}.card{padding:1rem 0;background-color:#333;border:1px solid #444;border-radius:.5rem;box-shadow:0 0 6px 12px #0004}.card>div{width:100%;padding:0 1rem}.logo.code{background-color:var(--green)}.logo.code .default-image{font-family:Courier New,Courier,monospace;font-size:5rem;color:var(--text-color)}#tutorial{display:flex;flex-direction:column;gap:2rem;align-items:start;max-width:100%}blockquote{background-color:#121212;padding:1rem;border:1px solid #333;border-radius:.5rem;width:fit-content;overflow-x:scroll}blockquote pre{max-width:calc(100vw - 4rem)}hr{width:100%}.logo.art{background-color:var(--blue)}.logo.art .default-image{width:100%;height:100%;mask-image:radial-gradient(transparent 29%,black 30%,black 50%,transparent 51%);will-change:transform;background:repeating-conic-gradient(var(--red) 0%,var(--green) 33%,#33f 66%,var(--red) 100%);animation:spin 12s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#image-gallery{align-items:flex-start}#image-gallery *{max-width:100%}#image-gallery img{box-shadow:0 0 8px #0004}.lightbox{display:none;position:fixed;z-index:999;inset:0;padding:1rem;background-color:#000a;backdrop-filter:blur(16px)}.lightbox:target{display:block}.lightbox div{display:block;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:contain}.logo.music .default-image{font-family:Noto Music,sans-serif;font-size:6em}.album{display:grid;border-radius:24rem;box-shadow:0 0 0 transparent;transition:box-shadow .6s ease}.album:hover,.album:focus{box-shadow:-10px 0 20px var(--red),10px 0 20px var(--green),0 10px 20px var(--blue)}.album img{border-radius:.25rem}.info{text-align:right}.logo.web{background-color:var(--red)}.logo.web .default-image{width:70%;height:70%;border-radius:50%;box-shadow:inset 0 0 50px #fff8,inset 20px 0 80px #f0f,inset -20px 0 80px #0ff,inset 20px 0 140px #f0f,inset -20px 0 140px #0ff,-10px 0 40px #f0f8,10px 0 40px #0ff8}.controls button{font-family:inherit;font-size:1.3rem;padding:4px;min-width:40px;min-height:40px;user-select:none}button.unstyled{background-color:transparent;border:0;font-family:inherit;color:var(--text-color);cursor:pointer;&:hover{color:var(--green)}}.game-ctrls{list-style-type:none;display:flex;flex-direction:column;gap:4px}kbd{background-color:#333;border-radius:3px;border:1px solid #444;display:inline-block;padding:2px 4px}@media screen and (max-width: 760px){#site_wrapper{grid-template-columns:1rem 1fr 156px 1fr 1rem;grid-template-rows:64px 97px 156px minmax(352px,min-content) minmax(90px,1fr) 64px}.nav-list{flex-direction:column;gap:32px}.wide{display:none}.mobile{display:block}.logo.music .default-image{font-size:5em}}