@layer base{:root{--black:#000;--white:#fff;--gray:#979797;--blue:#4f91f8;--yellow:#f9b31d;--pink:#fc6fd3;--purple:#9571f8;--green:#00ff5e;--background:#0c0c0f;--separator:#1d1d20;--user-card-primary:#000;--user-card-accent:#ff00f7;--user-card-username-stroke:#ff00fb;--user-card-card:linear-gradient(180deg, var(--user-card-primary) 30%, var(--user-card-accent) 96%);--user-card-inner-card:linear-gradient(color-mix(in srgb, var(--white) 60%, transparent), color-mix(in srgb, var(--white) 60%, transparent)), linear-gradient(180deg, var(--user-card-primary) 0%, var(--user-card-accent) 100%);--user-card-profile-picture-stroke:linear-gradient(180deg, color-mix(in srgb, var(--white) 60%, transparent) 0%, color-mix(in srgb, var(--white) 60%, transparent) 50%, color-mix(in srgb, var(--white) 0%, transparent) 50%, color-mix(in srgb, var(--white) 0%, transparent) 100%), linear-gradient(180deg, var(--user-card-primary) 0%, var(--user-card-primary) 50%, color-mix(in srgb, var(--white) 0%, transparent) 50%, color-mix(in srgb, var(--white) 0%, transparent) 100%);--text:#979797;--text-highlight:#f46fd6;--text-hyperlink:#9571f8;--text-heading:var(--white);--card-background:#141417;--card-stroke:#242427;--purple-card-background:#14121d;--purple-card-stroke:#2e2549;--blue-card-background:#2e4873;--blue-card-stroke:#1b202b;--yellow-card-background:#71561b;--yellow-card-stroke:#28231a;--pink-card-background:#733b65;--pink-card-stroke:#291e29}*,:before,:after{box-sizing:border-box}html,body,#root{background:var(--background);margin:0;padding:0}h1{font-family:sans-serif;font-size:3rem}h2{font-family:DM Sans,sans-serif;font-size:2rem;font-weight:600}h3{font-family:DM Sans,sans-serif;font-size:1.5rem;font-weight:600}h4{font-family:DM Sans,sans-serif;font-size:1.25rem;font-weight:600}h5{font-family:DM Sans,sans-serif;font-size:1rem;font-weight:600}p{font-family:DM Sans,sans-serif;font-size:1rem}a{-webkit-text-decoration:unset;text-decoration:unset;font-family:inherit;font-size:inherit;font-weight:inherit;color:var(--text-highlight)}.container{width:100%;max-width:1200px;margin:auto}nav{width:100%;font-size:2rem}nav .container{flex-flow:column wrap;justify-content:center;gap:1rem 2rem;padding:1rem;display:flex}nav a{font-family:Pixelify Sans,sans-serif;font-size:32px}nav .head{flex-direction:row;justify-content:space-between;width:100%;display:flex}nav .links{text-align:left;opacity:0;flex-flow:column;justify-content:center;align-items:flex-start;gap:1.25rem;width:fit-content;max-height:0;transition:max-height .5s ease-in-out,padding .5s ease-in-out,opacity .5s ease-in-out;display:flex;overflow:hidden}nav.active .links{opacity:1;max-height:320px;padding:1.5rem 0}nav .links a{text-wrap:nowrap;width:100%;color:var(--white);justify-content:flex-start;gap:.75rem;display:flex}.hamburger{all:unset;width:32px;height:32px;margin:0;padding:0;display:block;position:relative}.hamburger span{content:"";background:var(--white);border-radius:16px;width:80%;height:4px;transition:top .25s ease-in-out .25s,opacity 0s linear .25s,transform .25s ease-in-out;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}nav.active .hamburger span{transition:top .25s ease-in-out,opacity 0s linear .25s,transform .25s ease-in-out .25s}.hamburger span:first-child{top:25%}.hamburger span:nth-child(3){top:75%}nav.active .hamburger span:first-child{top:50%;transform:translate(-50%,-50%)rotate(45deg)}nav.active .hamburger span:nth-child(2){opacity:0}nav.active .hamburger span:nth-child(3){top:50%;transform:translate(-50%,-50%)rotate(-45deg)}@media screen and (width>=426px){nav .container{align-items:center;gap:1rem 2rem}nav .head{justify-content:center}nav .links{opacity:1;flex-flow:wrap;justify-content:center;align-items:center;width:100%;max-height:none;padding:0;overflow:visible}nav .links a{width:auto}.hamburger{display:none}}@media screen and (width>=1024px){nav .container{flex-direction:row;justify-content:space-between;align-items:center}nav .head{width:auto}nav .links{opacity:1;flex-flow:wrap;align-items:center;width:auto;max-height:none;padding:0;overflow:visible}}}@layer component,utility;
