:root {
    /* ctp-base */
    --bg: #1e1e2e;
    --bg-rgb: 30, 30, 46;
    /* ctp-mantle */
    --bg-accent: #11111b;
    --bg-accent-rgb: 17, 17, 27;
    /* ctp-text */
    --fg: #cdd6f4;
    --fg-rgb: 205, 214, 244;
    /* ctp-blue */
    --accent: #89b4fa;
    --accent-rgb: 137, 180, 250;
    /* ctp-overlay-0 */
    --blank: #313244;
    --blank-rgb: 49, 50, 68;

    --ctp-red: #f38ba8;
    --ctp-red-rgb: 243, 139, 168;
    --ctp-green: #a6e3a1;
    --ctp-green-rgb: 166, 227, 161;
    --ctp-blue: #89b4fa;
    --ctp-blue-rgb: 137, 180, 250;
    --ctp-teal: #94e2d5;
    --ctp-teal-rgb: 148, 226, 213;

    /* red-500 */
    --rank-1: #ef4444;
    /* green-500 */
    --rank-2: #22c55e;
    /* blue-500 */
    --rank-3: #3b82f6;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #eff1f5;
        --bg-rgb: 239, 241, 245;
        --bg-accent: #dce0e8;
        --bg-accent-rgb: 220, 224, 232;
        --fg: #4c4f69;
        --fg-rgb: 76, 79, 105;
        --accent: #1e66f5;
        --accent-rgb: 30, 102, 245;
        --blank: #9ca0b0;
        --blank-rgb: 156, 160, 176;
        --ctp-red: #d20f39;
        --ctp-red-rgb: 210, 15, 57;
        --ctp-green: #40a02b;
        --ctp-green-rgb: 64, 160, 43;
        --ctp-blue: #1e66f5;
        --ctp-blue-rgb: 30, 102, 245;
        --ctp-teal: #179299;
        --ctp-teal-rgb: 23, 146, 153;
    }
}

:root:has(#theme-selector [data-theme="LIGHT"]) {
    color-scheme: light;
    --bg: #eff1f5;
    --bg-rgb: 239, 241, 245;
    --bg-accent: #dce0e8;
    --bg-accent-rgb: 220, 224, 232;
    --fg: #4c4f69;
    --fg-rgb: 76, 79, 105;
    --accent: #1e66f5;
    --accent-rgb: 30, 102, 245;
    --blank: #9ca0b0;
    --blank-rgb: 156, 160, 176;
    --ctp-red: #d20f39;
    --ctp-red-rgb: 210, 15, 57;
    --ctp-green: #40a02b;
    --ctp-green-rgb: 64, 160, 43;
    --ctp-blue: #1e66f5;
    --ctp-blue-rgb: 30, 102, 245;
    --ctp-teal: #179299;
    --ctp-teal-rgb: 23, 146, 153;
}

html {
    color-scheme: dark light;
}

:root:has(#theme-selector [data-theme="DARK"]) {
    color-scheme: dark;
}

@font-face {
    font-family: Virgil;
    src: url(../fonts/Virgil.woff2);
}


html,
body {
    background: var(--bg);
    color: var(--fg);
    font-family: Virgil, monospace;
}

h1 {
    font-size: 5rem;
    padding: 2rem;
}

p {
    font-size: 1.5rem;
    padding: 0.25rem;
}

button {
    border-radius: 1rem;
    font: inherit;
    color: inherit;
}

button:hover,
button:focus,
input[type="submit"]:hover,
a:focus {
    filter: contrast(150%) brightness(125%);
    background-color: rgb(var(--accent-rgb), 0.25);
    transform: scale(1.025);
}

button:focus,
input[type="submit"]:focus,
a:focus {
    outline: 2px solid var(--fg);
    outline-offset: 4px;
}

button:active,
input[type="submit"]:active {
    transform: scale(0.95);
}


a {
    border-radius: 1rem;
    font: inherit;
    color: inherit;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    filter: contrast(150%);
    background-color: rgb(var(--accent-rgb), 0.25);
}

a:active {
    text-decoration: underline;
    transform: scale(0.95);
}


.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.bg-stripes {
    background-image: repeating-linear-gradient(135deg,
    transparent 0 var(--bg-gap),
    rgb(var(--color-rgb), 0.25) var(--bg-gap) calc(var(--bg-gap) + var(--bg-thickness)))
}

.bg-stripes-cross {
    background-image: repeating-linear-gradient(45deg,
    transparent 0 var(--bg-gap),
    rgb(var(--color-rgb), 0.2) var(--gap) calc(var(--bg-gap) + var(--bg-thickness))),
    repeating-linear-gradient(135deg,
            transparent 0 var(--bg-gap),
            rgb(var(--color-rgb), 0.2) var(--gap) calc(var(--bg-gap) + var(--bg-thickness)))
}


#account {
    width: fit-content;
    height: 3rem;

    color: var(--fg);
    box-shadow: 0 0 0 0.1rem var(--fg);
    border-radius: 1rem;

    display: grid;
    place-items: center;
    font-size: 1.5rem;
    padding: 0 1rem;
}

#account > div {
    display: flex;
    gap: 1rem;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#account > a {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}


#home {
    width: fit-content;
    height: fit-content;
    padding: 1rem;
    font-size: 2rem;
    text-shadow: rgb(var(--fg-rgb), 0.5) .1rem .1rem;
}

header {
    width: 100%;
    max-width: 60rem;
    height: 100%;

    display: flex;
    align-items: center;
}

#theme-selector {
    width: 3rem;
    height: 3rem;
    background: transparent;
}

#theme-selector-btn {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    transition: filter 100ms;

    border-radius: 100vw;
    box-shadow: 0 0 0 0.1rem var(--fg);
}

#theme-selector-btn svg {
    fill: var(--fg);
    position: absolute;
    inset: 50%;
    translate: -50% -50%;
    transform-origin: center;
    width: 75%;
    height: 75%;

    transition-property: filter, rotate, scale, opacity, visibility;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}

#theme-selector-btn[data-theme="DARK"] #moon,
#theme-selector-btn[data-theme="LIGHT"] #sun {
    opacity: 0;
    visibility: hidden;
    rotate: 180deg;
    scale: 0;
}