.preload * {
    transition: none !important;
}

body {
    background-color: #ffffff
}

main a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: all var(--duration-short);
    padding: var(--silence);
    text-align: center;
    font-family: "Work Sans", sans-serif;
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: 0.015rem;
    color: white;
    text-decoration: none;
    animation: appear var(--duration-medium);
}

@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(+50%)
    }
    to {
        opacity: 1;
        transform: translateY(0%)
    }
}

main a:hover {
    background-color: black;
}

main .on-light {
    color: black;
}

main .on-light:hover {
    background-color: var(--on-white-subtle);
}

.description {
    position: relative;
    height: fit-content;
    margin: auto;
    width: var(--readable-length);
    /*top: -30vh;
    left: 50%;
    left: 50%;
    transform: translate(-50%, var(--overlap);*/
    /*transform: translate(0, var(--overlap));*/
    margin-top: var(--overlap);
    background-color: rgba(238, 238, 238, 0.6);
    border-radius: var(--border-radius-L);
    padding: var(--stillness);
    backdrop-filter: blur(64px);
    margin-bottom: var(--silence);
}

.description h6 {
    font-size: var(--scream);
    font-weight: 300;
}

.hero video {
    height: 100vh;
    object-fit: cover;
    max-width: 1920px;
}

.hero img, .hero video {
    width: 100%;
}

main {
    position: relative;
}

h2 {
    color: black;
}

section p {
    color: black;
}

.highlight-1 {
    background-color: chartreuse;
}

.highlight-2 {
    background-color: pink;
}

.highlight-3 {
    background-color: yellow;
}