main {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    pointer-events: none;
    z-index: 2;
    color: white;
}

main * {
    pointer-events: initial;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

::selection {
    color: black;
    background: white;
    text-shadow: none;
}

video {
    position: fixed;
    min-width: 100%;
    min-height: 100%;
}

#boven {
    letter-spacing: .5rem;
    background: rgba(0, 0, 0, 0.55);
    padding: 0.6rem 1rem;
}

#onder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#onder>div {
    margin: 0.6em 0;
}

#onder>div>a {
    color: white;
    padding: 0.6em 1em;
    background: rgba(0, 0, 0, 0.55);
}

#onder>div>a:hover::before {
    position: absolute;
    translate: -.75em .05em;
    content: ">";
}




#marquee {
    color: white;
    width: 100%;
}

#marquee>div {
    position: fixed;
    z-index: 3;
    bottom: 0;
    width: 100%;
    translate: 100%;
    pointer-events: none;
}

#marquee>div>small>a {
    color: inherit;
    padding: 2px;
    background: rgba(0, 0, 0, 0.55);
}

#marquee>div>small {
    pointer-events: initial;
}

#marquee a::after {
    display: none;
}

#marquee>div:nth-child(1) {
    animation: var(--marquee-speed) linear infinite scroll, 1s steps(1) infinite blink;
}

#marquee>div:nth-child(2) {
    animation: var(--marquee-speed) linear calc(var(--marquee-speed) / 2) infinite scroll, 1s steps(1) infinite blink;
}

@keyframes scroll {
    0% {
        translate: 100%
    }

    100% {
        translate: -100%;
    }
}

@keyframes blink {
    0% {
        color: rgba(255, 255, 255, .25);
    }

    50% {
        color: rgba(255, 255, 255, 1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #marquee>div {
        animation: none !important;
    }

    #marquee>div:nth-child(1) {
        left: 1px;
        translate: 0%;
    }
}





details {
    font-size: small;
    position: fixed;
    z-index: 4;
    left: 0;
    bottom: 0;
    padding: 2px;
    pointer-events: all;
    color: white;
    background: rgba(0, 0, 0, 0.55)
}

details>summary {
    list-style-type: none;
}


details>summary>#text {
    margin-left: .3em;
    cursor: pointer;
}

details>summary>#text:hover {
    text-decoration: underline;
}

details>summary>#icon {
    cursor: default;
}

details[open]>summary>#icon {
    display: inline-block;
    transform: rotate(90deg);
    transition: transform 125ms ease;
}

details>form {
    margin-top: -100px;
    /* 20 per optie */
}

details[open]>summary {
    margin-bottom: 100px;
}

details>summary {
    transition: margin 125ms ease;
}