#splash {
    padding: var(--section-spacing);
    
    display: flex;
    gap: var(--section-spacing);

    flex-direction: column;
}

#title {
    font-family: var(--title-font);
    font-size: var(--title-size);
    line-height: calc(var(--title-size) + var(--inner-spacing));

    text-align: center;

    background-image: linear-gradient(to right, #c11a2b, #f15729, #a621e3, #21ade3, #0278bd, #21ade3, #a621e3, #f15729, #c11a2b);
    background-position-x: 20vw;
    background-clip: text;
    color: transparent;

    animation: horizontal-background-scroll-animation 500s linear infinite;
}

@keyframes horizontal-background-scroll-animation {
    to {
        background-position-x: 4500vh;
    }
}

@keyframes vertical-background-scroll-animation {
    to {
        background-position-y: -4500vh;
    }
}

.content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--section-spacing);
    align-content: flex-start;
}

.content > div {
    padding: var(--inner-spacing);
    line-height: 1.5rem;

    height: fit-content;
    width: 100%;

    border-width: 2px;
}

.content > div:nth-child(even) {
    border-style: solid;
}

.content > div:nth-child(odd) {
    border-style: dashed;
}

@media screen and (min-width: 580px) and (min-height: 700px) {
    #title {
        writing-mode: sideways-lr;
        text-orientation: sideways;

        background-image: linear-gradient(#c11a2b, #f15729, #a621e3, #21ade3, #0278bd, #21ade3, #a621e3, #f15729, #c11a2b);
        animation: vertical-background-scroll-animation 800s linear infinite;
    }

    #splash {
        flex-direction: row;
    }
}

.center {
    display: flex;
    justify-content: center;
    text-align: center;
}

.header {
    text-decoration: underline;
    text-align: center;

    margin-bottom: 5px;
}

@media screen and (min-width: 580px) {
    .content > div {
        width: fit-content;
    }
}