* {
    margin: 0px;
    padding: 0px;
}

.section {
    background-color: blanchedalmond;
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.track {
    height: 100vh;
    padding-top: 25vh;
    padding-bottom: 25vh;
    box-sizing: border-box;
}

.text {
    font-size: 1.6em;
    font-weight: bold;
    font-family: "Baskervville SC", sans-serif;
    position: sticky;
    top: calc(50% - 0.5em);
    text-align: center;
    max-width: 30vw;
}

.section.dark {
    background-color: rgb(0, 20, 40);
    color: white;
}

.section.verylight {
    background-color: white;
}

.median {
    height: 400px;
    background-color: blanchedalmond;
}

.median.ltd {
    background-image: url(res/creepingdarkness-tile.svg);
}

.median.dtl {
    transform: scaleY(-1);
    background-image: url(res/creepingdarkness-tile.svg);
}

.median.dark {
    background-color: rgb(0, 20, 40);
}

.sideimage {
    opacity: 0;
    transition: opacity 0.5s;
}

.sideimage.visible {
    opacity: 1;
}

.light-track > .text {
    height: 100vh;
    transition: opacity 0.25s;
    max-width: 100vw;
}

#yippee {
    background-color: var(--track-color);
    transition: color 1s;
}

.light-track > div:last-of-type {
    height: 50vh !important;
}

img {
    vertical-align: top;
}