:root {
    font-size: min(1vmin, 5px);

    --fade-color: #000000;
    --back-color-0: #101010;
    --back-color-1: #151515;
    --text-color-0: #ffffff;
    --text-color-1: #e0e0e0;
}

body {
    margin: 0;
    background: var(--back-color-0);
    color: var(--text-color-0);
    font-size: 6rem;
}

/* -------------------- WELCOME -------------------- */
#welcome {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;

    --scroll: 0s;
    animation: welcome-scroll 2s linear forwards paused;
    animation-delay: var(--scroll);
}
@keyframes welcome-scroll {
    100% { top: -100%; opacity: 0; }
}
#welcome-back {
    position: absolute;
    bottom: 0; left: 50%;
    width: calc(var(--width) * 1rem);
    height: calc(var(--height) * 1rem);
    transform: translateX(-50%);
    image-rendering: pixelated;
}
#welcome-name {
    position: absolute;
    top: calc(35% - 12.5vmin);
    left: calc(50% - 45vmin);
    width: 90vmin;
    height: 25vmin;
    image-rendering: pixelated;
}
#welcome-alias-bar {
    position: absolute;
    top: calc(35% + 13.5vmin);
    left: 0;
    width: 100%; height: 9rem;
    overflow: hidden;
}
.welcome-alias {
    position: absolute;
    top: 0; left: 50%;
    width: fit-content;
    padding-left: 11rem;
    transform: translateX(-50%);
    line-height: 9rem;
    font-size: 8rem;
    color: var(--text-color-1);

    animation: welcome-alias-in .2s ease-in-out forwards;
}
@keyframes welcome-alias-in {
    0% { top: -10rem; }
}
.welcome-alias[out] {
    animation: welcome-alias-out .2s ease-in-out forwards;
}
@keyframes welcome-alias-out {
    100% { top: 10rem; }
}
.welcome-alias-icon {
    position: absolute;
    top: 0; left: 0;
    width: 9rem; height: 9rem;
    background: var(--text-color-1);
}

/* -------------------- CONTENT -------------------- */
#content {
    position: absolute;
    top: 100%; left: 0;
    width: 100%; height: fit-content;
    background: var(--back-color-0);
    display: flex;
    flex-direction: column;
}
#content-spacer {
    position: absolute;
    top: -100vh; left: 0;
    width: 100%; height: 100vh;
    background: transparent;
    pointer-events: none;

    --scroll: 0s;
    animation: content-spacer-scroll 2s linear forwards paused;
    animation-delay: var(--scroll);
}
@keyframes content-spacer-scroll {
    100% { background: var(--fade-color); }
}
#content-hint {
    position: absolute;
    top: -18rem; left: 0;
    width: 100%;
    line-height: 6rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
    animation: content-hint-dip 1s ease-in-out infinite;
    opacity: .5;
}
@keyframes content-hint-dip {
    20%, 40% { top: -18rem; }
    10%, 30% { top: -16rem; }
}
.content-hint-symbol {
    width: 6rem; height: 6rem;
    background: var(--text-color-0);
}

/* -------------------- HEADING -------------------- */
.heading {
    position: relative;
    height: 25rem;
}
.heading-back {
    position: absolute;
    left: 0;
    width: 100%; height: 12rem;
    background: var(--back-color-1);
    mask: url("back.svg") 0 0/64rem 12rem;
    animation: heading-back-scroll 10s linear infinite;
}
@keyframes heading-back-scroll {
    100% { mask-position: 64rem 0; }
}
.heading-back-0 {
    top: .5rem;
}
.heading-back-1 {
    top: 12.5rem;
    animation-direction: reverse;
}
.heading-text {
    position: absolute;
    top: 6rem; left: 6rem;
    line-height: 12rem;
    font-size: 12rem;
}

/* -------------------- LINKS -------------------- */
#links {
    position: relative;
    height: 100rem;
    overflow: hidden;
}
#links-back {
    position: absolute;
    bottom: -5rem; right: -5rem;
    width: 100rem; height: 100rem;
    mask: url("logo.svg");
    background: var(--back-color-1);
}
#links-picture {
    position: absolute;
    top: 7.5rem;
    left: calc(50% - 20rem);
    width: 40rem; height: 40rem;
    border-radius: 50%;

    background: red;
}
#links-list {
    position: absolute;
    top: 55rem; left: calc(40% - 25rem);
    width: calc(20% + 50rem);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: visible;
}
#links-list :nth-child(odd) {
    transform: translateY(17rem);
}
.links-link {
    width: 15rem;
    height: 15rem;
    margin: 0 -7.5rem 0 -7.5rem;

    background: red;
}

/* -------------------- PROJECTS -------------------- */
#projects {
    position: relative;
    height: 300vh;
}
#projects-view {
    position: sticky;
    top: 0; left: 0;
    width: 100%; height: 100vh;

    background:
        linear-gradient(to right, var(--back-color-1) 1rem, transparent 1rem) 0 0 / 20rem 20rem,
        linear-gradient(to bottom, var(--back-color-1) 1rem, transparent 1rem) 0 0 / 20rem 20rem;
    animation: projects-view-back 5s linear infinite;
}
@keyframes projects-view-back {
    100% { background-position: -20rem -20rem; }
}

/* -------------------- ABOUT -------------------- */
#about {
    height: 100rem;
}

/* -------------------- RANKINGS -------------------- */
#rankings {
    height: 100vh;
}