html, body, main, section, video {
    height: 100vh;
    width: 100%;
    margin: 0;
}

main {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;

    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
main::-webkit-scrollbar {
    display: none;
}

section, nav, nav a {
    display: flex;
    justify-content: center;
    align-items: center;
}

section {
    scroll-snap-align: start;
    position: relative;
    z-index: 1;

    color: white;
    font: 600 30px sans-serif;
}

section:nth-of-type(even) {
    background-color: green;
}

nav {
    position: absolute;
    width: 90vw;
    height: 40px;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #19205c;
    gap: 1vw;
    padding: 0 5vw;
    font-family: sans-serif;
    transition: .2s;
    opacity: 1;
}

html[data-scroll="false"] nav:not(:hover) {
    opacity: 0;
}

nav a {
    text-decoration: none;
    color: white;
    width: 10vw;
    min-width: 100px;
    height: 40px;
}

nav a:hover {
    background-color: rgba(0, 128, 0, 0.5);
}

.body-text {
    font-size: calc(1vh + 2vw);
    font-weight: 300;
}

.vertical {
    flex-direction: column;
    gap: 10vh
}

#background-reel[poster] {
    object-fit: cover;
    z-index: 0;
    position: absolute;
}

#band-name {
    width: 60vw;
}

/* This should just be an SVG */
#arrow {
    height: 5vw;
    width: 5vw;
    border-bottom: solid white 1px;
    border-left: solid white 1px;
    transform: rotate(-45deg);
    opacity: 40%;
}

#arrow:hover {
    border-width: 4px;
}

#story {
    padding: 2vw;
    text-align: justify;
    gap: 2vw;
    height: calc(100vh - 4vw);
    width: 96vw;
}

#story img {
    width: 40vw;
    transform: scaleX(-1);
}

#gigs table, caption {
    text-align: left;
    width: 100%;
    margin: 5em;
}

#gigs caption {
    margin-bottom: .5em
}

#gigs td, #gigs th {
    border-bottom: 1px solid #ffffff90
}

#gigs td {
    font-weight: 300;
}

#gigs td.mobile-date {
    display: none;
}

#socials img {
    width: 30vw;
    margin: calc((1vw + 1vh)/2);
}

#contact td {
    text-align: right;
}

#contact-payoff {
    filter: drop-shadow(4000px 0px 0 white);
    transform: translateX(-4000px);
    width: 40vw;
}

@media (max-aspect-ratio: 4/5) {
    #story {
        flex-direction: column-reverse;
        width: auto;
    }

    #story img {
        width: 90vw;
        transform: none;
    }

    #gigs {
        font-size: 4vw;
    }

    #gigs td.long-date {
        display: none !important;
    }

    #gigs td.mobile-date {
        display: table-cell !important;
    }

    #socials {
        flex-direction: column;
    }

    #socials img {
        width: auto;
        max-width: 80vw;
        max-height: 30vh;
    }
}