html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}

body {
    display: grid;
    grid-template-rows: 1fr 4vh 20vh;
}

main {
    grid-row: 1 / 1;

    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;

    background-color: #b6cad8;
    background-image: linear-gradient(
        to bottom,
        #96aab8 0%,
        #a6bac8 5%,
        #b6cad8 50%,
        #a6bac8 95%,
        #96aab8 100%
    );
    border-bottom: 0.1vh solid rgba(0,0,0,0.3);

    scroll-behavior: smooth;
}

main > section {
    display: inline-flex;
    height: 100%;
    width: 70%;
    align-items: stretch;
    justify-content: center;
    position: relative;
    padding-top: 5vh;
    box-sizing: border-box;
}

main > section > div.spotlight {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    background-image: radial-gradient(
        transparent 0%,
        rgba(0,0,0,0.4) 100%
    );
}

main > section:first-of-type,
main > section:last-of-type {
    width: 100%;
}

main > section > figure {
    display: flex;
    z-index: 2;
    height: 70%;
    padding: 0;
    margin: 0;
    transform: translate(17vh, 0);
}

main > section > figure > a {
    height: 100%;
}

main > section > figure > a > img {
    height: 100%;
    box-shadow:
        -2px -2px 1px rgb(255, 255, 255, 0.8) inset,
        1vh 1vh 2vh rgb(0, 0, 0, 0.8),
        -2px -2px 1px white,
        1px 1px 0 1px black,
        2px 2px 0 1px black,
        3px 3px 0 1px black;
    box-sizing: border-box;
    background-color: #191919;
    border: 2vh solid #191919;
}

main > section > figure > figcaption {
    align-self: flex-end;

    background-color: #f6f6f6;
    margin: 0 0 2vh 2vh;
    box-shadow: #999 0.5vh 0.5vh 0.5vh;
    border-top: 0.5vh solid white;
    border-left: 0.5vh solid white;
    border-bottom: 0.5vh solid #f0f0f0;
    border-right: 0.5vh solid #f0f0f0;

    height: 13vh;
    width: 35vh;
    font-size: 1.8vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer.baseboard {
    grid-row: 2 / 2;

    background-color: #f4f4f4;
    background-image: linear-gradient(
        to bottom,
        #e0e0e0 0%,
        #f0f0f0 100%
    );
    border-top: 0.5vh solid white;
    border-bottom: 0.1vh solid rgba(0,0,0,0.5);
}

footer.floor {
    grid-row: 3 / 3;

    height: 20vh;
    background-color: #f5f5dc;
    background-image: linear-gradient(
        to bottom,
        #8e8977 0%,
        #c7b599 100%
    );
}