:root{--bg-transition-speed: .15s;--cursor-x: -100px;--cursor-y: -100px;--bg: #1e1e2e;--bg1: #313244;--bg2: #45475a;--bg3: #585b70;--bg-dark: #181825;--bg-shadow: #11111b;--fg: #cdd6f4;--glow: #7f849c55;--border: #7f849c88;--red: #f38ba8;--orange: #fab387;--green: #a6e3a1;--yellow: #f9e2af;--blue: #89b4fa;--purple: #cba6f7;--aqua: #94e2d5}.theme-catppuccin{--bg: #1e1e2e;--bg1: #313244;--bg2: #45475a;--bg3: #585b70;--bg-dark: #181825;--bg-shadow: #11111b;--fg: #cdd6f4;--glow: #7f849c55;--border: #7f849c88;--red: #f38ba8;--orange: #fab387;--green: #a6e3a1;--yellow: #f9e2af;--blue: #89b4fa;--purple: #cba6f7;--aqua: #94e2d5}.theme-gruvbox{--bg: #282828;--bg1: #3c3836;--bg2: #504945;--bg3: #665c54;--bg-dark: #1d2021;--bg-shadow: #161819;--fg: #ebdbb2;--glow: #92837455;--border: #92837488;--red: #fb4934;--orange: #fe8019;--green: #b8bb26;--yellow: #fabd2f;--blue: #83a598;--purple: #d3869b;--aqua: #83c07c}.increased-contrast{filter:contrast(1.2) saturate(1.5)}html{font-size:clamp(14px,.9vw,2vh);scroll-behavior:smooth}::placeholder{color:var(--fg);opacity:.5}body{font-family:Fira Code;color:var(--fg);margin:auto;width:auto;background-color:var(--bg-dark);transition:background-color var(--bg-transition-speed) ease}h1,h2,h3,h4,h5,h6{font-family:Inconsolata}button,input,select{text-align:center;font-size:inherit;font-family:Fira Code;color:var(--fg);border-radius:.5em;border:none}button,input{padding:.75em 1.5em}select{padding:.5em 1em;appearance:none}select:focus{outline:none}button:hover{cursor:pointer}.red-text{color:var(--red)}.orange-text{color:var(--orange)}.yellow-text{color:var(--yellow)}.green-text{color:var(--green)}.aqua-text{color:var(--aqua)}.blue-text{color:var(--blue)}.purple-text{color:var(--purple)}.weight-450{font-weight:450}.weight-600{font-weight:600}.glow-text{text-shadow:0 0 .1em var(--glow)}.glow-color{color:var(--text-color);text-shadow:0 0 .1em var(--text-color)}.glow-pulse{animation:glow-pulse 1s infinite alternate}@keyframes glow-pulse{0%{text-shadow:0 0 .15em var(--glow),0 0 .075em var(--glow)}to{text-shadow:0 0 .5em var(--glow),0 0 .25em var(--glow),0 0 .15em var(--glow)}}.depth-1{box-shadow:inset 0 1px 1px var(--bg3),0 1px 2px var(--bg-dark),0 0 5px var(--bg-dark);border-radius:.5em;background-color:var(--bg1);transition-duration:var(--bg-transition-speed)}.depth-2{box-shadow:inset 0 1.25px 2px var(--bg2),0 5px 4px var(--bg-shadow),0 0 5px var(--bg-shadow);border-radius:.5em;background-color:var(--bg);transition-duration:var(--bg-transition-speed)}.depth-interactive{transition-duration:var(--bg-transition-speed)}.depth-interactive:hover{box-shadow:inset 0 1px 1px var(--bg3),0 1px 2px var(--bg-shadow),0 0 3px 1px var(--bg-dark);background-color:var(--bg2);transition-duration:50ms}input.depth-interactive:hover{transition-duration:.2s}button.depth-interactive:active{background-color:var(--bg1);box-shadow:inset 0 1px 1px var(--bg-shadow),inset 0 -1px 1px var(--bg3),inset 0 0 3px 1px var(--bg-dark);transform:scale(.99)}input.depth-interactive:focus{outline:none;background-color:var(--bg2);box-shadow:inset 0 1.5px 1px var(--bg3),0 5px 5px var(--bg-shadow),0 0 4px 2px var(--bg-shadow);transform:scaleY(1.02) scaleX(1.01)}.fade-in{opacity:0;transform:translateY(2vh);animation:fadeIn 1s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(2vh)}to{opacity:100%;transform:translateY(0)}}.switch{position:relative;display:inline-block;width:5em;height:2.5em}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;border-radius:.5em;box-shadow:inset 0 1px 1px var(--bg3),0 2px 1px var(--bg-dark),0 0 2px 1px var(--bg-dark);background-color:var(--bg1);transition-duration:var(--bg-transition-speed)}.slider:before{content:"";position:absolute;height:2em;width:2em;left:.25em;top:.25em;border-radius:.3em;background-color:var(--bg3);box-shadow:0 0 1px var(--bg);transition-duration:var(--bg-transition-speed)}input:checked+.slider{background-color:var(--bg3)}input:checked+.slider:before{transform:translate(2.5em);background-color:var(--fg)}#hamburger{position:fixed;top:1.5rem;left:1.5rem;z-index:11;background:none;display:flex;flex-direction:column;gap:.75em;padding:0}#hamburger span{width:2.5em;height:.25em;background-color:var(--fg)}#nav-menu{position:fixed;display:flex;flex-direction:column;justify-content:space-between;z-index:5;left:0;transform:translate(-100%);width:15em;height:100vh;background-color:color-mix(in srgb,var(--bg),transparent 5%);backdrop-filter:blur(10px);box-shadow:inset -5px 0 15px color-mix(in srgb,var(--bg3),transparent 90%);transition-duration:var(--bg-transition-speed)}#nav-menu nav{display:flex;flex-direction:column;font-size:1.2em;margin-top:6rem;gap:1em}#nav-menu nav a{margin:auto 2em;text-decoration:none;color:var(--fg);box-sizing:border-box;position:relative}#nav-menu nav a:after{content:"";position:absolute;left:50%;bottom:0;width:100%;height:1px;background-color:var(--fg);transform:translate(-50%) scaleX(0);transform-origin:center;transition:transform .15s ease}#nav-menu nav a:hover:after{transform:translate(-50%) scaleX(1)}#nav-menu.active{transform:translate(0)}#high-contrast-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1em;margin-bottom:2em}#high-contrast-container .switch{font-size:.9em}.theme-select{font-size:1em;margin:1.5rem;display:flex;flex-direction:column;justify-content:center;gap:.75em;text-align:center}#hero-section{position:relative;top:0;left:0;height:100vh}#hero-section:after{content:"";position:absolute;z-index:1;inset:0;box-shadow:0 2px 8px var(--bg1);background:linear-gradient(to bottom,transparent 85%,var(--bg));pointer-events:none}.hero{display:flex;flex-direction:column;padding:clamp(1em,5vw,5em) 0 0 clamp(1em,5vw,5em);font-size:clamp(20px,1.1vw,24px);width:32em}.hero h1{font-size:6em;margin:0;text-align:left}.hero p{font-size:1em;margin-top:1em}.hero h2{font-family:Fira Code;font-weight:300;font-size:1.3em;margin:2em 0 1em;position:relative;width:max-content}.user-form-container{display:flex;width:fit-content;flex-direction:column;align-items:center}#user-form{display:flex;flex-direction:row;font-size:1em;gap:.5em}.grid-bg{--grid-grap: 60px;--dot-size: 2px;--line-thickness: 1px;position:absolute;inset:0;background-size:var(--grid-grap) var(--grid-grap);background-image:radial-gradient(circle,var(--bg3) var(--dot-size),transparent var(--dot-size));background-attachment:fixed;background-position:0 0;mask-image:radial-gradient(circle 200px at var(--cursor-x) var(--cursor-y),rgba(255,255,255,1) 0%,rgba(255,255,255,.2) 100%);will-change:mask-image;z-index:-1}.grid-bg:before{content:"";position:absolute;inset:0;background-size:var(--grid-grap) var(--grid-grap);background-image:linear-gradient(to right,var(--bg3) var(--line-thickness),transparent var(--line-thickness)),linear-gradient(to bottom,var(--bg3) var(--line-thickness),transparent var(--line-thickness));background-attachment:fixed;--background-offset: calc(var(--grid-grap) / 2 - var(--line-thickness) / 2);background-position:var(--background-offset) var(--background-offset);mask-image:radial-gradient(circle 150px at var(--cursor-x) var(--cursor-y),rgba(255,255,255,.3) 0%,transparent 100%);will-change:mask-image}.hero-graph-container{--graph-anim-delay: .25s;position:fixed;pointer-events:none;z-index:-1;right:0;bottom:0;width:65vw;min-width:1000px}.hero-graph-container svg{width:100%;height:100%;max-width:100%;max-height:100%}.hero-graph-container svg circle{fill:var(--bg3);opacity:0;animation:show-circle .2s ease-out forwards}.hero-graph-container svg circle[data-index="0"]{animation-delay:calc(var(--graph-anim-delay) + .3s)}.hero-graph-container svg circle[data-index="1"]{animation-delay:calc(var(--graph-anim-delay) + .4s)}.hero-graph-container svg circle[data-index="2"]{animation-delay:calc(var(--graph-anim-delay) + .75s)}.hero-graph-container svg circle[data-index="3"]{animation-delay:calc(var(--graph-anim-delay) + .85s)}.hero-graph-container svg circle[data-index="4"]{animation-delay:calc(var(--graph-anim-delay) + 1.25s)}@keyframes show-circle{to{opacity:1}}.animated-line{stroke-dasharray:600;stroke-dashoffset:600;stroke:var(--bg3);stroke-width:2.5;animation:draw-line 1.4s var(--graph-anim-delay) linear forwards}@keyframes draw-line{to{stroke-dashoffset:0}}main{width:100%;background-color:var(--bg-dark);position:relative;z-index:0;transition-duration:var(--bg-transition-speed)}.main-section{margin:0 auto;padding:3rem 0;width:85%}.main-section h1{text-align:center;font-size:3.5rem;margin-top:0}.analytics-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(400px,32.5vw,48.5vh);grid-template-areas:"user-info solved-ratings solved-ratings" "rating-history rating-history solved-tags";margin-bottom:3rem}@media (max-aspect-ratio: 6/5){html{font-size:16px}.main-section{width:90%}.analytics-grid{grid-template-columns:1fr 1fr;grid-auto-rows:55vh;grid-template-areas:"user-info solved-tags" "solved-ratings solved-ratings" "rating-history rating-history"}}@media (max-aspect-ratio: 4/5){html{font-size:26px}header.hero{flex-direction:column;align-items:center;justify-content:start;width:100vw;height:100vh}div.hero{align-items:center;margin:5em 0 0;width:90vw;font-size:clamp(24px,1.5vh,32px)}div.hero h1{font-size:5em;text-align:center}div.hero p{font-size:1em;text-align:center}div.hero h2{font-size:1.25em;text-align:center;margin:2em 0 1.5em}#user-form{font-size:1.25em}#user-form button,.hero-graph-container{display:none}.analytics-grid{grid-template-columns:1fr;grid-auto-rows:55vh;grid-template-areas:"user-info" "solved-tags" "solved-ratings" "rating-history"}#user-details .analytics-content{font-size:1.25rem}#nav-menu{font-size:2rem}#nav-menu nav{margin-top:10rem}#hamburger{font-size:2rem}}.analytics-container{--card-border-radius: .8rem;display:flex;flex-direction:column;border-radius:var(--card-border-radius);background-color:var(--bg);opacity:0;animation-delay:.1s;animation-duration:.5s}.chart-container{position:relative;flex:1;min-height:0;max-width:100%;max-height:100%}.chart-container canvas{max-width:100%;max-height:100%;display:block}.analytics-header{display:flex;justify-content:space-between;margin:1.25em 1.25em 0}.analytics-header h2{margin:0}.analytics-content{position:relative;display:flex;min-height:0;flex:1;flex-direction:column;padding:1em 1.5em 1.5em;margin-top:.25em}#user-details .analytics-content{flex-direction:row;justify-content:space-between}#user-stats{width:15em}#user-stats h3{font-size:1.3em;margin-top:0}#user-stats ul{margin:0;padding-left:0;list-style:disc inside}#user-stats li{margin-bottom:.25em}#user-title-photo{border-radius:3.5%;width:100%;height:auto;display:block}div:has(>#user-title-photo){width:fit-content;min-width:0;height:fit-content;flex:1 1 0;padding:2%;border-radius:5%}.loader,.loader-small{position:absolute;bottom:1%;left:1%;width:98%;height:98%;background-color:var(--bg);border-radius:var(--card-border-radius);transition-duration:var(--bg-transition-speed);display:flex;align-items:center;justify-content:center}.loader:after,.loader-small:after{content:"";border-radius:50%;animation:spin 1s ease infinite}.loader:after{width:5rem;height:5rem;border:5px solid var(--bg2);border-top-color:var(--fg)}.loader-small:after{width:1.5rem;height:1.5rem;border:3px solid var(--bg2);border-top-color:var(--fg)}@keyframes spin{to{transform:rotate(360deg)}}#performance-loader{flex-direction:row;align-items:center;gap:10px}#performance-loader p{margin:0;font-size:14px}#performance-loader div{position:relative}footer{position:relative;background-color:var(--bg-dark);text-align:center;padding:2em 0;display:flex;justify-content:center;align-items:center;gap:1em;border-top:2px solid var(--bg1);transition:background-color var(--bg-transition-speed)}footer p{margin:0}footer p a{text-decoration:none;color:var(--fg)}footer p a:hover{text-decoration:underline}.gh-button{text-decoration:none;color:var(--fg);width:2.5em}.gh-button svg{display:block}
