*{box-sizing:border-box;margin:0;padding:0}img,picture,svg,canvas,video{max-width:100%}input,button,textarea,select{font-family:inherit;text-wrap:unset}:root{color-scheme:light;--font-size-h1: 2.5em;--font-size-h2: 2em;--font-size-h3: 1.5em;--font-size-h4: 1.25em;--font-size-h5: 1.15em;--font-size-p: 1.1em;--title-typeface: Shin Go Pro, mutantemoji, system-ui, sans-serif;--typeface: Rubik, fotrodin, mutantemoji, system-ui, sans-serif;--gap-lg: 40px;--gap-md: 20px;--gap-sm: 12px;--header-height: 140px;--radius-lg: 34px;--radius-md: 15px;--radius-sm: 8px;--sidebar-width: 161px;--bg-image: url(/assets/images/backgrounds/tropical.jpg);--accent-dark: oklch(44% .06 236);--accent: oklch(76% .12 241);--bg-color: oklch(70% .1 244);--h2-color: oklch(30% .12 230);--h3-color: oklch(35% .1 235);--h4-color: oklch(40% .08 238);--h5-color: oklch(45% .07 230);--link-active-color: oklch(55% .08 180);--link-color: oklch(35% .08 160);--link-hover-color: oklch(45% .08 170);--purple: oklch(74.8% .13 287.7);--text-color: oklch(27% .062 240);--wiiu-blue: oklch(74.8% .13 227.7);--btn-bg: linear-gradient(oklch(95% .16 279 / 1) 0%, oklch(85% .16 271 / 1) 50%, oklch(80% .16 268 / 1) 50%, oklch(75% .16 260 / 1) 100%);--btn-sel-bg: linear-gradient(to bottom, oklch(65% .22 240 / .8) 50%, oklch(62% .22 250 / .9) 50%);--button-1: oklch(80% .122 var(--button-hue));--button-2: oklch(55% .1 calc(var(--button-hue) + 34));--button-3: oklch(75% .1 calc(var(--button-hue) + 36));--button-active-shadow: oklch(32% .05 calc(var(--button-hue) + 2) / .6);--button-hue: 225;--button-shadow: oklch(60% .11 calc(var(--button-hue) + 2));--card-hue: 255;--card-title-bg: linear-gradient( in oklab to bottom, oklch(82% .06 var(--card-hue)), oklch(76% .08 var(--card-hue)) 50%, oklch(73.5% .1 var(--card-hue)) 50%, oklch(65.67% .12 var(--card-hue)) );--nav-bg: radial-gradient(circle at top left, oklch(100% 0 0) 0%, oklch(97% 0 0) 55%, oklch(95% 0 0) 10%, oklch(90% 0 0) 100%);--nav-outline: var(--wiiu-blue);--nav-shadow: 4px 4px 12px oklch(24.8% .13 227.7), inset white 0 0 3px 1px;--plastic-container-gradient: oklch(84% .12 262.5 / .85);--side-bg: oklch(94.611% .00011 271.152);--side-bg-alt: oklch(98% .01 240) 50%, oklch(94% .02 240) 60%;--translucent-bg: linear-gradient(to bottom, oklch(82% .12 243.8 / .85) 0%, oklch(78% .13 243.8 / .85) 100%);--cursor: url(/assets/images/cursors/paw.webp) 14 1, auto;--cursor-help: url(/assets/images/cursors/pawhelp.webp) 14 1, help;--cursor-select: url(/assets/images/cursors/pawselect.webp) 14 1, pointer}html.night{color-scheme:dark;--accent: oklch(50% .12 241);--text-color: oklch(87% .062 240);--link-color: oklch(65% .16 143);--link-hover-color: oklch(75% .13 143);--h2-color: oklch(84% .06 230);--h3-color: oklch(75% .082 240);--h4-color: oklch(84% .075 238);--h5-color: oklch(86.6% .097 230.6);--nav-bg: radial-gradient(circle at top right, oklch(20% 0 0) 0%, oklch(25% 0 0) 55%, oklch(21% 0 0) 10%, oklch(30% 0 0) 100%);--nav-outline: oklch(63% .13 231);--nav-shadow: none;--translucent-bg: linear-gradient(to bottom, oklch(42% .1 243.8 / .85), oklch(34% .1 243.8 / .85));--btn-bg: linear-gradient(oklch(75% .16 271), oklch(65% .16 271) 50%, oklch(60% .16 268) 50%, oklch(55% .16 260));--btn-sel-bg: linear-gradient(to bottom, oklch(55% .12 240 / .8) 50%, oklch(52% .12 250 / .9) 50%);body{--bg-image: url(/assets/images/backgrounds/night.avif)}.card{background:oklch(39% .07 var(--card-hue))}.cardHeader{background:linear-gradient(in oklab to bottom,oklch(62% .1 var(--card-hue)),oklch(56% .1 var(--card-hue)) 50%,oklch(53.5% .1 var(--card-hue)) 50%,oklch(55.67% .12 var(--card-hue)))}}html.disablecursor{--cursor: auto;--cursor-help: help;--cursor-select: pointer}html.disableAnimations *,html.disableAnimations *:before,html.disableAnimations *:after{animation:none!important;transition:none!important}html:not(.disableAnimations){scroll-behavior:smooth}html{cursor:var(--cursor)}body{background-attachment:fixed;background-color:var(--bg-color);background-image:var(--bg-image);background-position:center;background-size:cover;color:var(--text-color);font-family:var(--typeface);line-height:1.6;margin:0 auto;max-width:1400px;min-height:50vw;text-rendering:optimizeLegibility}footer{background:var(--nav-bg);border-radius:6px 6px 0 0;box-shadow:var(--nav-shadow);margin-top:2em;outline:var(--wiiu-blue) 3px solid;text-align:center}button,a{cursor:var(--cursor-select)}main{display:flex;flex-direction:column;flex-grow:1;gap:16px;padding-bottom:1em;width:100%}h1{align-items:center;background:linear-gradient(to bottom,#fff,oklch(95% .036 221) 50%,#bae7f5 50%);background-clip:text;border-bottom:#ffffff18 1px solid;color:transparent;filter:drop-shadow(1px 1px 3px rgba(0,0,0,.2));font-family:blitzbold,var(--title-typeface);font-size:var(--font-size-h1);font-weight:800;letter-spacing:.001em;line-height:1;margin-bottom:8px;padding-bottom:2px;paint-order:stroke fill;-webkit-text-stroke:2px oklch(45% .069 239);img{height:.9em}}h2{color:var(--h2-color);font-family:var(--title-typeface);font-size:var(--font-size-h2);font-weight:700;line-height:1;margin-bottom:6px;text-shadow:1px 1px 0px rgba(255,255,255,.3)}h3{color:var(--h3-color);font-family:var(--title-typeface);font-size:var(--font-size-h3);font-weight:800;line-height:1.1;margin-bottom:4px}h4{color:var(--h4-color);font-family:var(--title-typeface);font-size:var(--font-size-h4);font-weight:800;line-height:1;text-shadow:0px 1px 0px rgba(255,255,255,.2);text-wrap:nowrap}h5{background-color:transparent;color:var(--h5-color);font-size:var(--font-size-h5);letter-spacing:.02rem;line-height:1;margin-bottom:.3rem}h6{font-size:.875rem}p,li,label{font-size:var(--font-size-p);font-weight:400;letter-spacing:.01em}p{margin-bottom:1em}label{font-size:16px}blockquote{padding-left:1em;border-radius:12px;background-color:#fdd1d6;border-left:4px solid hsl(0,0%,0%,.3)}code{background-color:oklch(from var(--accent) 20% c h / .1);border:1px solid oklch(from var(--accent) 20% c h / .4);border-radius:3px;color:#000;font-family:google sans code,monospace;font-size:.9rem;letter-spacing:0em;padding:.15em .3em}ul{font-weight:600;list-style-position:inside;margin:10px;text-align:left}ul li{list-style:none;padding-left:35px;position:relative;&:before{background-image:url(/assets/images/icons/mutant/paw_print.webp);background-repeat:no-repeat;background-size:contain;content:"";height:20px;left:0;position:absolute;top:3px;width:20px}}ol{padding:0 0 1em 2em}dt{font-family:var(--title-typeface);font-weight:700}dd{color:#002a41;font-family:var(--typeface);font-size:17px;font-weight:600}a:not(.nav-button){color:var(--link-color);font-weight:800;transition:.1s ease-in-out;&:hover{color:var(--link-hover-color);font-style:oblique;text-decoration:wavy underline}&:active{color:var(--link-active-color)}}abbr{cursor:var(--cursor-help)}small{line-height:1.2}mark{background:transparent;color:oklch(45% .18 95);&.red{color:oklch(30% .2 20)}}textarea{appearance:none;background-color:#fff6;border:1px solid hsla(0,0%,100%,.4);border-radius:4px;outline:0;padding:2px;transition:.12s ease;vertical-align:top;&:focus{border:1px solid var(--accent)}}hr{background:linear-gradient(to right,#fff3,#ffffff80 50%,#fff3);border:0;height:1px;margin:14px 0;width:100%;&.black{background:linear-gradient(to right,transparent,oklch(0% 0 0 / .5),transparent)}}.pixelart{image-rendering:crisp-edges;image-rendering:pixelated}.pronouns{color:var(--accent-dark);font-family:blitzbold,var(--typeface);font-size:1.8em;font-weight:600;line-height:1}.year-label{border-bottom:2px solid rgba(255,255,255,.2);font-family:pophappiness,var(--typeface);font-size:2em;margin:14px 0}#layout-wrapper{display:flex;gap:0;margin:0 auto;max-width:1400px;padding-bottom:1em}.left-column,.center-column,.right-column{display:flex;flex-direction:column;gap:16px}.left-column{flex-shrink:0;gap:var(--gap-lg);margin:0 var(--gap-sm);max-height:calc(100vh - 40px);overflow:visible;position:sticky;top:0;width:var(--sidebar-width)}.right-column{align-self:flex-start;margin:0 var(--gap-sm);overflow:visible;position:sticky;top:20px;width:var(--sidebar-width)}.grid{display:grid;gap:var(--gap-md);grid-template-columns:1fr 1fr .5fr}.flex-columns{align-items:flex-start;display:flex;gap:var(--gap-md);>.col{display:flex;flex-direction:column;gap:8px;min-width:0}}.flex-vert{display:flex;flex-direction:row;gap:12px}#header-container{display:flex;justify-content:center}#header{align-items:center;aspect-ratio:700 / 140;background-color:#078d70;background-image:url(/assets/images/art/banner2.webp);background-position:center;background-size:cover;border-radius:12px;box-shadow:0 0 20px #0006,inset 0 1px 1px #fff9,inset 0 -1px 1px #0003,inset 0 0 15px #0003;display:flex;flex-direction:column;justify-content:center;margin:20px;position:relative;transition:transform .3s cubic-bezier(.34,1.56,.64,1);width:min(700px,95vw);z-index:4;&:after{background:linear-gradient(to bottom,rgba(255,255,255,.5) 0%,transparent 100%);border-radius:17px 17px 100% 100%/17px 17px 30px 30px;content:"";height:55%;left:2px;mix-blend-mode:screen;position:absolute;right:2px;top:2px}h1{background:linear-gradient(to bottom,#fff 30%,oklch(92% .12 247));border:none;filter:drop-shadow(0px 2px 0px #005d80) drop-shadow(0px 4px 8px rgba(0,0,0,.4));font-family:inkitype,blitzbold,var(--title-typeface);font-size:3.5rem;letter-spacing:.1rem;margin-bottom:5px;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:0}&:hover{transform:translateY(-4px) scale(1.02)}&:active{transform:scale(.98)}}#randomtext{backdrop-filter:blur(10px) brightness(.85);background:#ffffff26;border-radius:20rem;color:#fff;font-family:blitzmain,var(--title-typeface);font-size:1.1em;font-weight:600;margin-top:4px;padding:0 16px;text-align:center;text-shadow:0px 1px 0px rgba(0,0,0,.8),0px 4px 8px rgba(0,0,0,.3);width:fit-content;& img{height:24px;width:24px;vertical-align:middle}}.container{background-color:oklch(from var(--plastic-container-gradient) l c h / 1);border-radius:var(--radius-lg);box-shadow:0 2px 3px #fff6 inset,0 2px 8px #0000001a;height:fit-content;padding:12px 14px 14px;position:relative;width:100%;html:not(.disableBlur) &.translucent{backdrop-filter:blur(26px) saturate(1.2) brightness(1.2);background-color:var(--plastic-container-gradient)}&.glass{backdrop-filter:blur(34px) saturate(.5) brightness(1);background:#0006;box-shadow:0 1px 1px #fff6 inset,0 2px 8px #0000001a;p{color:#e6e6e6}:is(h2,h3,h4){color:#87cefa;text-shadow:none}&:before{display:none}}&.darker{backdrop-filter:blur(8px) saturate(1) brightness(.5)}&.green{background:linear-gradient(in oklab to bottom,oklch(77% .14 181 / .76),#81e3cbc2,#5eddc2c2 6%,#3ad4aac2 15%,oklch(71% .16 192.5 / .76))}}.floatimgleft{border-radius:14px;float:left;margin-right:14px}.floatimgright{border-radius:14px;float:right;margin-left:14px}.card{background-color:oklch(79% .07 var(--card-hue));border-radius:var(--radius-lg);box-shadow:inset -2px -2px 4px oklch(31% .12 var(--card-hue) / .16),inset 2px 2px 4px oklch(31% .12 var(--card-hue) / .16),0 2px 4px oklch(39% .1 var(--card-hue) / .2),0 2px 6px oklch(29% .1 var(--card-hue) / .2);contain:layout;height:fit-content;margin:6px 0;transition:.15s ease;&:hover{box-shadow:inset -2px -2px 2px oklch(31% .1 var(--card-hue) / .12),inset 2px 2px 2px oklch(31% .1 var(--card-hue) / .12),0 4px 6px oklch(32% .1 var(--card-hue) / .2),0 4px 12px oklch(28% .1 var(--card-hue) / .25)}&.purple{--card-hue: -55}&.green{--card-hue: 180}&.cyan{--card-hue: 210}}.cardHeader{align-items:center;background:linear-gradient(in oklab to bottom,oklch(82% .06 var(--card-hue)),oklch(76% .08 var(--card-hue)) 50%,oklch(73.5% .1 var(--card-hue)) 50%,oklch(65.67% .12 var(--card-hue)));border-radius:30000px;box-shadow:0 3px 3px oklch(49% .14 var(--card-hue) / .6);display:flex;gap:6px;padding:.25em .25em .25em 18px;.cardTitle{border:none;color:oklch(98% .01 var(--card-hue));font-family:var(--title-typeface);font-size:1.5em;font-weight:700;line-height:1;padding:2px 0;paint-order:stroke fill;-webkit-text-stroke:3.5px oklch(31.35% .065 calc(var(--card-hue) - 20))}}.cardContent{border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow-y:auto;padding:10px 12px 15px;scrollbar-color:oklch(70% .1 var(--card-hue)) transparent;scrollbar-width:thin}.score-badge{background:var(--accent);border-radius:var(--radius-sm);color:#fff;display:inline-block;font-family:var(--title-typeface);font-weight:800;padding:2px 10px}.interests .dotted-bg{background-color:#ffffff0d;border:.25em dotted rgba(255,255,255,.2);margin:.5em auto 10px;max-height:650px;overflow-y:auto;padding:.5em 0 .5em .5em;p{font-size:.95rem;line-height:1.3}br{display:block;margin:4px 0}}.updates{.cardContent{max-height:200px}}.fich{.cardContent{text-align:center;img{border-radius:10px;height:100px}}h3 small{opacity:.7}}.imgdivider{border-radius:6px;height:30px;object-fit:cover;opacity:.9;width:100%}.img-grid{display:flex;flex-wrap:wrap;gap:6px;img{border-radius:3px;height:192px;object-fit:cover;width:192px}&.small img{height:80px}}button,.nav-button{align-items:center;background:var(--btn-bg);border:rgba(255,255,255,.4) 1px solid;border-radius:6px;box-shadow:inset 0 1px 1px #ffffff4d,0 0 0 1px #1795fa1a;color:#2a5397;text-shadow:0px 1px 0px rgba(255,255,255,.8);cursor:var(--cursor-select);display:inline-flex;font-family:"shin go pro",var(--title-typeface);font-size:1.15em;font-weight:700;gap:6px;height:42px;line-height:1;padding:0 8px;position:relative;text-decoration:none;&.nav-button{font-size:1.1em;height:36px;margin-bottom:4px;min-width:140px}img{filter:drop-shadow(1px 1px 0px lab(0% 0 0 / .2));height:1.5em;margin-bottom:0}&:hover{box-shadow:inset 0 1px 1px #ffffff4d,-2px 2px 2px oklch(40% .2 220 / .1),0 0 0 1px #1795fa1a;filter:brightness(1.05)}&:active{box-shadow:inset 0 0 14px oklch(40% .16 237 / 1);filter:brightness(.95)}&.selected{background:var(--btn-sel-bg);box-shadow:inset 0 2px 4px #0003,0 -1px 2px oklch(60% .22 250 / .5);pointer-events:none;transform:none;color:#fff;text-shadow:0px 1px 0px rgba(0,0,0,.6)}a{color:#fff;text-decoration:none}&:disabled{cursor:not-allowed;opacity:.3}}button.pill{background:linear-gradient(in oklab to top,var(--button-1),var(--button-2) 50%,var(--button-3));border:none;border-radius:999px;box-shadow:-3px 3px 2px var(--button-shadow),inset 0 0 10px #ffffff4d;font-weight:700;gap:4px;height:44px;padding:0 14px;text-shadow:0px -1.5px rgba(0,0,0,.5);transition:.18s cubic-bezier(.34,1.56,.64,1);color:#fff;&:after{background:linear-gradient(to bottom,#ffffff4d,#fff0);border-radius:14px 14px 45% 45%;content:"";height:70%;left:5%;position:absolute;top:3px;width:90%}&.secondary{background:linear-gradient(#e3e5ef,#dbdeeb);box-shadow:2px 2px 10px 2px #00000014;color:#222!important;display:inline-block;font-family:fotrodin;font-size:152%;font-weight:500;height:90px;outline:2.7px solid var(--wiiu-blue);overflow:hidden;text-align:center;text-shadow:none;width:fit-content;&:before{background:#fff;border-radius:0 99px 700% 0;content:"";height:80%;left:0;position:absolute;top:0;width:93%}&:after{background:#e3e5ef;border-radius:999px 0 999px 999px;content:"";height:50%;left:0;position:absolute;top:30px;width:90%}span{position:relative;z-index:5}}&.small{font-size:17px;height:40px;min-width:100px;vertical-align:top}&.big{height:60px;width:175px}&.green{background:linear-gradient(in oklab to top,oklch(from var(--button-1) l c 169),oklch(from var(--button-2) l c 145) 50%,oklch(from var(--button-3) l c 146));--button-shadow: oklch(from var(--button-1) 60% c 169)}&.red{background:linear-gradient(in oklab to top,oklch(from var(--button-1) 80% c 6),oklch(from var(--button-2) 50% c 0) 50%,oklch(from var(--button-3) 45% c 1));--button-shadow: oklch(from var(--button-1) 60% c 6)}&.selected{background:linear-gradient(to top,oklch(from var(--button-1) calc(l - .07) c h),oklch(from var(--button-2) calc(l - .09) c h) 50%,oklch(from var(--button-3) calc(l - .08) c h));box-shadow:inset 0 -2px 6px #00000080,0 1px 3px #00000080,0 -1px 1px #00000080;color:#ffffffe6;pointer-events:none;transform:scale(.95) translate(-3px,3px);&:after{opacity:.4}}&:hover{--button-shadow: transparent;transform:translate(-3px,3px)}&:active{box-shadow:inset 2px 2px 6px var(--button-active-shadow),inset -2px -2px 6px var(--button-active-shadow),1px 1px 3px var(--button-active-shadow),-1px -1px 3px var(--button-active-shadow);transform:translate(-3px,3px) scale(.97,.93)}}.nav-link{display:flex;gap:4px;img{height:1.2rem;vertical-align:bottom}}.palette{display:flex;flex-wrap:wrap;gap:6px}.swatch{border:2px solid rgba(255,255,255,.6);border-radius:50%;box-shadow:0 2px 4px #0003;cursor:var(--cursor-help);height:32px;width:32px}.checkbox-container{cursor:var(--cursor-select);display:flex;flex-direction:row-reverse;gap:5px;input[type=checkbox]{opacity:0;position:absolute}.checkmark{background-color:#fff;border-radius:5px;height:24px;outline:1.5px solid var(--accent);position:relative;transition:.2s ease;width:24px;&:after{background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);border-radius:8px 8px 100% 100%;content:"";height:40%;left:10%;opacity:0;position:absolute;top:2px;width:80%}&:before{border:solid white;border-width:0 3px 3px 0;content:"";display:none;height:10px;left:8px;position:absolute;top:3px;transform:rotate(45deg);width:5px}}&:hover input~.checkmark{background-color:#f0f8ff}input:checked~.checkmark{background:radial-gradient(circle at bottom,var(--button-1),var(--button-2),var(--button-3));outline-width:0;&:after{opacity:1}&:before{display:block}}}.flag{border:#1c1c1c 2px solid;border-radius:3px;background-position:center;background-size:cover;cursor:var(--cursor-help);display:inline-block;height:1em;image-rendering:crisp-edges;image-rendering:pixelated;vertical-align:middle;width:1.5em;&.agender{background:linear-gradient(to bottom,#000 0 14.3%,#b9b9b9 14.3% 28.6%,#fff 28.6% 42.9%,#b8f483 42.9% 57.1%,#fff 57.1% 71.4%,#b9b9b9 71.4% 85.7%,#000 85.7% 100%)}&.nb{background:linear-gradient(to top,#2d2d2d 25%,#9b59d0 25% 50%,#fff 50% 75%,#fff433 75%)}&.gay{background-image:linear-gradient(#078d70 0 14.3%,#26ceaa 14.3% 28.6%,#99e8c2 28.6% 42.9%,#fff 42.9% 57.1%,#7bade3 57.1% 71.4%,#5049cb 71.4% 85.7%,#3e1a78 85.7% 100%)}&.pupgender{background-image:url(/assets/images/flags/Pupgender.webp)}&.sharkpupgender{background-image:url(/assets/images/flags/sharkpupgender.webp)}}.cats img{border-radius:12px;height:120px!important}.glasspane{background:radial-gradient(ellipse at top left,oklch(90% .1 271 / .3),#879bdd4d 50%,#6a7cbc4d 50.5%,#4e5f9c4d);background-color:#34427d4d;border-radius:16px;outline:1px solid oklch(100% .1 271 / .15);padding:8px}.sociallink{background-color:#fff;border-radius:30%;box-shadow:0 1px 1px #00415280;display:inline-block;overflow:hidden;position:relative;transition:.15s ease;&:hover{border-radius:20%}&:active{transform:scale(.95)}&:after{background:linear-gradient(to bottom,#ffffff80,#ffffff1a);border-radius:8px 8px 100% 100%/8px 8px 40% 40%;content:"";height:50%;left:0;pointer-events:none;position:absolute;right:0;top:0}}.socialimg{height:50px}a.sociallink{font-size:0}progress-bar{background:linear-gradient(to bottom,#fff,oklch(from var(--accent) 84% 0 h) 50%,oklch(from var(--accent) 80% 0 h) 50% 100%);border-radius:6px;box-shadow:#878787 0 .5px 1px;display:block;height:12px;outline:hsla(0,0%,75%,.8) 1px solid;overflow:hidden;position:relative;width:100%;player-container &{cursor:var(--cursor-select)}}progress-fill{background:linear-gradient(to right,oklch(from var(--accent) 65% c h),oklch(from var(--accent) 75% c h) 14% 80%,oklch(from var(--accent) 65% c h));border-radius:3px;display:block;height:100%;overflow:hidden;position:relative;transform-origin:left;transition:.05s ease;width:100%;transform:scaleX(0);&:before{background:#fff;border-radius:inherit;content:"";height:50%;left:0;opacity:.5;position:absolute;top:0;width:100%}}.date-progress progress-bar{height:6px}.shiny-thing{align-items:center;background:var(--nav-bg);border-radius:var(--radius-md);box-shadow:var(--nav-shadow);display:flex;flex-direction:column;height:fit-content;justify-content:center;outline:3px solid var(--nav-outline);padding:2% 0;text-align:center;width:100%;button{display:flex}h4{padding:.1em 0}}nav,.side2{position:sticky;top:20px}.side2{align-items:center;display:block;flex-direction:column;gap:1px;padding:2px 5% 5%;width:160px}#clockcontainer{background:linear-gradient(0deg,#3d2821,#59413a 50%,#7a5b52 50%,#98786e);border-radius:8px;box-shadow:inset 0 2px 2px #00000080,0 2px 1px #fffc,0 0 2px #000;height:fit-content;text-align:center}#clock{color:#feb29b;font-family:clock,monospace;font-size:28px;line-height:1.3;text-shadow:0 0 8px oklch(69.25% .1965 37);&:before{content:"88:88:88";opacity:.15;position:absolute;text-shadow:none}}.date-progress{display:block;font-size:.9em;opacity:.8;text-align:left;.date-percent{float:right}}.bar{border-radius:100000px;height:5px;outline:oklch(from var(--accent) 60% .1 h) 2px solid;width:100px}.bar-fill{background:var(--btn-bg);height:100%}.date-percent{font-feature-settings:"tnum"}.song-title{color:oklch(from var(--accent) 50% c h);font-size:1.1em;font-weight:500;height:min-content;line-height:1;overflow:auto;padding:4px 0;text-align:center}.artist-name{color:#000;font-size:1em;font-weight:500;line-height:1;margin-bottom:10px;opacity:.4;text-align:center}.album-art{border:transparent 3px solid;border-radius:50%;box-shadow:#63636380 0 0 5px;height:110px;margin:0 auto 10px;overflow:hidden;position:relative;width:110px!important;&:before{background:#fff;border:oklch(25% .00003 271 / .4) 2px solid;border-radius:50%;box-shadow:inset -1px -1px 2px #00000090;content:"";height:20px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;z-index:9999}img{object-fit:cover;.playing &{animation:spin 20s infinite linear}}}#music-progress,.time-display{padding:0 6px}.time-display{color:#00000080;display:flex;font-family:monospace;font-size:12px;justify-content:space-between;margin-bottom:5px}.controls{align-items:center;display:flex;gap:10px;justify-content:center}.control-btn{align-items:center;background:linear-gradient(to bottom,#87d5d5,#5ab9b9,#3a9a9a);border:none;border-radius:50%;box-shadow:inset 0 1px #ffffff80,inset 0 -1px 2px #0000004d,0 2px 3px #0000004d,0 0 0 2px #b8e6e6,0 0 0 3px #6ac0c0!important;color:#2d6666!important;cursor:var(--cursor-select);display:flex;font-family:system-ui;font-size:16px;height:30px;justify-content:center;line-height:1;position:relative;transition:.15s ease;width:30px;&:before{background:linear-gradient(to bottom,rgba(255,255,255,.6) 0%,rgba(255,255,255,.2) 50%,transparent 100%);border-radius:50%;content:"";height:35%;left:50%;pointer-events:none;position:absolute;top:3px;transform:translate(-50%);width:70%}&:hover{background:linear-gradient(to bottom,#96dddd,#6ac0c0,#4aabab)}&:active{background:linear-gradient(to bottom,#5ab9b9,#3a9a9a,#2d8080);box-shadow:inset 0 1px 2px #0006,0 0 0 2px #b8e6e6,0 0 0 3px #6ac0c0}&.play-pause{font-size:24px;height:40px;width:40px}}dialog{background:transparent;border:none;cursor:zoom-out;margin:auto;max-height:90vh;max-width:90vw;outline:none;&::backdrop{background:#040c22ab}}.modal-content{align-items:center;display:flex;flex-direction:column;justify-content:center;position:relative;img{max-height:80vh;max-width:100%}}.flying-image,#modal-img{view-transition-name:active-image}#modal-caption{background-color:#040c22ab;border-radius:20rem;color:#ccc;font-family:var(--typeface);font-size:1.1rem;margin-top:16px;padding:6px;text-align:center}.page{display:none;&.active{display:block}}#coolbuttons{h3,h2{text-align:center}h3{margin:.4em 0}}buttongrid{align-items:center;display:flex;flex-wrap:wrap;font-size:0px;justify-content:center;a{img{image-rendering:crisp-edges;outline:transparent 6px solid;transition:.05s ease-in;&:hover{box-shadow:0 0 3px #fff;outline:rgba(255,255,255,.5) 2px solid;transform:scale(1.1)}&:active{outline-color:#fff;transform:scale(.95)}}}}#button{margin-bottom:10px}.is-switching{animation:zoom .8s cubic-bezier(.34,1.36,.64,1)}@keyframes zoom{0%{opacity:1;transform:scale(1)}50%{filter:blur(10px);opacity:0;transform:scale(1.1)}51%{opacity:0;transform:scale(.9)}to{filter:none;opacity:1;transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fade{0%{filter:blur(0px);opacity:1;transform:scale(1)}50%{filter:blur(4px);opacity:.1;transform:scale(.95)}to{filter:blur(0px);opacity:1;transform:scale(1)}}@keyframes swap{0%{opacity:1;transform:scaleX(1)}50%{opacity:.5;transform:scaleX(0%)}to{opacity:1;transform:scaleX(1)}}.mobileShow{display:none}@media(max-width:1100px){#header{width:80%}.grid{display:unset}.flex-columns{flex-direction:column}}@media(max-width:860px){.mobileHide{display:none}.mobileShow{display:unset}dialog{max-width:100%!important}#header{border-radius:0;margin:0;outline:none;width:100%;h1{font-size:3em;text-align:center}}.container{backdrop-filter:none!important;background-color:oklch(from var(--plastic-container-gradient) l c h / 1)!important;filter:none!important;padding:6px;width:100%!important;p{padding:6px 12px}}body,#layout-wrapper{display:flex;flex-direction:column}.left-column,.center-column,.right-column{margin:0;max-height:none;max-width:100%;overflow-y:visible;position:static;width:100%}player-container{border-radius:0!important;min-width:100%;padding:20px 50px}.control-btn{font-size:35px;height:50px;width:50px;&.play-pause{font-size:40px;height:70px;width:70px}}main{align-items:center;flex-direction:column}.card{border-radius:32px 32px 6px 6px;margin:3px 0;&:first-of-type,&:last-of-type{border-radius:32px}}.cardContent{max-height:unset}nav.shiny-thing{border-radius:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 20px;padding:10px;position:static;width:100%;h4,hr{display:none}button{background-size:100% 100%;font-size:24px;margin-bottom:0}}.side2{border-radius:0;display:flex;position:static;width:100%}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transform:none!important;transition:none!important}html{scroll-behavior:auto}canvas{display:none}.container{backdrop-filter:none}}@font-face{font-family:mutantemoji;src:url(/assets/fonts/mutant-standard-emoji.woff2);font-display:swap}@font-face{font-family:inkitype;src:url(/assets/fonts/inkitype.woff2);font-display:swap;line-height:.87;size-adjust:150%}@font-face{font-family:Rubik;font-weight:300 900;font-display:swap;src:url(/assets/fonts/rubik.woff2)}@font-face{font-family:Rubik;font-style:italic;font-weight:300 900;font-display:swap;src:url(/assets/fonts/rubik-italic.woff2)}@font-face{font-family:Google Sans Code;font-style:italic;font-weight:300 900;font-display:swap;src:url(/assets/fonts/google-sans-code.woff2)}@font-face{font-family:Shin Go Pro;src:url(/assets/fonts/shin-go-pro-elxtralight.woff2);font-weight:200;font-display:swap}@font-face{font-family:Shin Go Pro;src:url(/assets/fonts/shin-go-pro-light.woff2);font-weight:300;font-display:swap}@font-face{font-family:Shin Go Pro;src:url(/assets/fonts/ShinGoProRegular.woff2);font-weight:400;font-display:swap}@font-face{font-family:Shin Go Pro;src:url(/assets/fonts/ShinGoProMedium.woff2);font-weight:500;font-display:swap}@font-face{font-family:Shin Go Pro;src:url(/assets/fonts/ShinGoProDeBold.woff2);font-weight:600;font-display:swap}@font-face{font-family:Shin Go Pro;src:url(/assets/fonts/ShinGoProBold.woff2);font-weight:700;font-display:swap}@font-face{font-family:Shin Go Pro;src:url(/assets/fonts/ShinGoProHeavy.woff2);font-weight:800;font-display:swap}@font-face{font-family:fotrodin;src:url(/assets/fonts/FOT-RodinNTLG%20Pro%20EB.woff2);font-weight:800;font-display:swap;size-adjust:90%}@font-face{font-family:fotrodin;src:url(/assets/fonts/fot-rodinntlg-pro-medium.woff2);font-weight:300;font-display:swap;size-adjust:90%}@font-face{font-family:fotrodin;src:url(/assets/fonts/FOT-RodinNTLG%20Pro%20DB.woff2);font-weight:400;font-display:swap;size-adjust:90%}@font-face{font-family:fotrodin;src:url(/assets/fonts/fot-rodinntlg-pro-light.woff2);font-weight:300;font-display:swap;size-adjust:90%}@font-face{font-family:fotrodin;src:url(/assets/fonts/fot-rodinntlg-pro-ultrabold.woff2);font-weight:900;font-display:swap;size-adjust:90%}@font-face{font-family:blitzbold;src:url(/assets/fonts/BlitzBold.woff2);font-weight:400;font-display:swap}@font-face{font-family:blitzmain;src:url(/assets/fonts/BlitzMain.woff2);font-weight:400;font-display:swap}@font-face{font-family:galindo;src:url(/assets/fonts/galindo.woff2);font-weight:400;font-display:swap}@font-face{font-family:hyliaserif;src:url(/assets/fonts/hyliaserif.woff2);font-weight:400;font-display:swap}@font-face{font-family:popjoy;src:url(/assets/fonts/FOT-PopJoyStd-B.woff2);font-weight:400;font-display:swap}@font-face{font-family:pophappiness;src:url(/assets/fonts/FOT-PopHappinessStd-EB.woff2);font-weight:400;font-display:swap}@font-face{font-family:clock;src:url(/assets/fonts/alarmclock.woff2);font-weight:400;font-display:swap}@font-face{font-family:cont;src:url(/assets/fonts/contb.woff2);font-weight:700;font-display:swap}