:root {
    --padding: .5rem;
    --border-radius: .5rem;
}

nav {
    opacity: 1;
}

body {}

main {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

main>section {
    background-color: #fffffff3;
}

main>section>div {
    width: min(90%, 40rem);
    margin: auto;
    padding: 1rem 0rem;
}

h1 {
    text-transform: uppercase;
    font-family: 'Optima Bold';
    font-size: 1.8rem;
}



nav a {
    &:hover {
        color: black !important;
    }

    &.active {
        color: black;
    }
}


section#side-video {
    /* border: 1px solid green; */
    width: 100%;
    margin-top: 1rem;

    &>div {
        /* border: 1px solid red; */
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

section#side-video video {
    width: min(100%, 760px);
    aspect-ratio: 1.8 / 1;
    border: 1px solid rgba(89, 90, 89, 0.149);
}

section#side-video button {
    position: absolute;
    background-color: red;
    max-width: 6rem;
    top: -2.5rem;
    left: 0px;

    &:hover {
        background-color: rgb(112, 6, 6);
    }
}

section#email-form input {
    width: min(80%, 760px);
    padding: var(--padding);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    border: 1px solid #00000057;

}

button#showFullscreenBtn {
    position: absolute;
    border-radius: .5rem;
    background-color: red;
    padding: .5rem 1rem;
    color: white;
    display: none;
    top: 0px;
    right: 0px;

    &:hover {
        background-color: #860d0d;
        color: #fff;
    }
}

section#custom-video {
    border: 1px solid #ff000057;
    display: flex;
    justify-content: center;
}

.fullscreen {
    position: absolute;
    top: 0px;
    height: 100vh;
    background-color: #120f01;

    &>video {
        /* min-width: 82%; */
    }
}

.menu {
    top: 4rem;
}