:root {
    --primary: #0062ff;

    --background: #252525;
    --background-light: #282828;

    --text-color: #fff;
    --text-color-dark: #bbb;

    --redirect-color: #bdecff;

    --border-style: solid;
    --border-width: 1px;
    --border-radius: 16px;

    --underline-height: 2px;

    --font-size-base: 1rem;
    --font-size-large: 2.625rem;
    --font-size-h2: 2.5rem;
    --font-size-h3: 2.375rem;
    --font-size-h4: 2.25rem;
    --font-size-h5: 2.125rem;
    --font-size-h6: 2rem;
    --font-size-text: 1.4375rem;
}

* {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans Display";
}

body, .background-light {
    background-color: var(--background-light);
}

.background {
    background-color: var(--background-light);
}

h1 { font-size: var(--font-size-large); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

p, a, label, button, span {
    font-size: var(--font-size-text);
}

p, a, u, label, button, h1, h2, h3, h4, h5, h6, span {
    color: var(--text-color);
    text-align: center;
    text-decoration: none;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-size: unset;
}

li::marker {
    content: none;
    display: none;
}

.redirect {
    color: var(--redirect-color);
    text-decoration: none;
}

u,
.underline,
.redirect {
    position: relative;
    display: inline-block;
    width: fit-content;
    text-decoration: none;
}

u::after, .underline::after, .redirect::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--underline-height);
    border-radius: var(--underline-height);
    background-color: var(--text-color);
}

.redirect::after {
    background-color: var(--redirect-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.redirect:hover::after {
    transform: scaleX(1);
}

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.center-horizontal {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.center-vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}