body {
    background-color: var(--pale);
    background-image: url(/images/assets/backgrounds/vintage%20floral2.jpeg);
    color: var(--darker);
}

main {
    display: flex;
    justify-content: space-around;
}

section {
    width: calc(50% - 1.5em);
    padding: 0 1em;
}

.splash img {
    width: 70%;
    display: block;
    margin: 1em auto;
    padding: 1.3em 0;
    transition: 0.3s;
    filter: drop-shadow(0.13vw 0.13vw rgba(106, 68, 74, 0.6));
    &:hover {
        transform: scale(1.1);
    }
}

#playpause {
    width: 50%;
    margin: 0 auto;
    padding: 5px 10px;
    background-color: var(--deadwhite);
    border-radius: 15px;
    text-align: center;
    box-shadow: rgba(106, 68, 74, 0.5) 3px 3px;
}

#playpause button {
    border: none;
    background-color: none;
    border-radius: 5px;
    transition: 0.2s;
    &:hover {
        transform: translateY(-1px);
        filter: brightness(1.1);
        cursor: pointer;
    }
}

.filmreel {
    margin: 1em 0;
    width: 100%;
    background-color: var(--deadwhite);
    background: url(/images/assets/backgrounds/creampaper.png);
    display: flex;
    justify-content: space-evenly;
    padding: 1.25em 0;
    box-shadow: rgba(106, 68, 74, 0.5) 3px 3px;
}

.right {
    rotate: 2deg;
}

.left {
    rotate: -2deg;
}

.filmreel img {
    max-height: 120px;
    display: inline-block;
    transition: 0.3s;
    &:hover {
        transform: scale(1.05);
    }
}

.writeup {
    max-width: 95%;
    padding: 1em 2em;
    background-color: var(--deadwhite);
    margin: 2em auto;
    box-shadow: rgba(106, 68, 74, 0.5) 3px 3px;
}

.scrollable {
    max-height: 270px;
    overflow: auto;
}

em {
    color: var(--deadrose);
}

nav {
    text-align: center;
    line-height: 180%;
}

nav a {
    margin: 0 1px;
    padding: 2px 5px;
    border-radius: 5px;
    text-decoration: none;
    background-color: var(--deadrose);
    color: var(--deadwhite);
    &:hover {
        color: var(--dark);
        background-color: var(--yellow-trans);
    }
}

@media screen and (max-width: 800px) {
    main {
        flex-wrap: wrap;
    }

    section {
        width: 100%;
        margin-bottom: 1em;
    }

    .filmreel {
        margin: 1em 0;
    }

    .filmreel img {
        max-height: 80px;
    }

    .scrollable {
        max-height: none;
    }
}