:root{
    --primary: #144C4B;
    --links: #FFA214;
}


body{
    margin: 0;
}

a{
    color: var(--links);
}

.nav{
    width: 100%;
    position: fixed;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0.25em 0 0 0;

    z-index: 2;
    background: rgb(20,76,75);
    background: -moz-linear-gradient(180deg, rgba(20,76,75,1) 0%, rgba(20,76,75,0.5) 75%, rgba(20,76,75,0.25) 90%, rgba(20,76,75,0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(20,76,75,1) 0%, rgba(20,76,75,0.5) 75%, rgba(20,76,75,0.25) 90%, rgba(20,76,75,0) 100%);
    background: linear-gradient(180deg, rgba(20,76,75,1) 0%, rgba(20,76,75,0.5) 75%, rgba(20,76,75,0.25) 90%, rgba(20,76,75,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#144c4b",endColorstr="#144c4b",GradientType=1);
}

.nav-item-list{
    display: flex;
    justify-content: right;
    align-items: flex-start;
}

.nav-item{
    padding: 0 0.7em;
}

.nav img{
    max-height: 3em;
}

.nav-item h3{
    margin: 0;
}

.nav-spacer{
    padding: 40vh 0;

    display: flex;
    justify-content: center;
}

.play{
    position: fixed;
    padding: 0 2em;

    color: var(--links);
    background-color: var(--primary);
    text-decoration: none;

    border-radius: 50em;

    z-index: 0;
}

.background{
    width: 100%;
    position: fixed;

    left: 50%;
    transform: translate(-50%, 0%);

    z-index: -1;
}

section{
    margin: auto;
    padding: 1em 25%;

    position: relative;

    color: white;
    background-color: var(--primary);

    z-index: 1;
}

section img{
    max-width: 50vw;
    max-height: 60vh;
}

section video{
    max-width: 50vw;
    max-height: 60vh;
}

#play{
    display: flex;
    flex-direction: row;

    gap: 2em;
}

.contacts{
    display: flex;
    flex-direction: row;
    gap: 3em;

    text-align: center;
}

.contacts a{
    color: var(--links);

    text-decoration: none;
}

.team-grid{
    padding: 0.25em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.grid-item{
    width: 10em;
    height: 11em;
    margin: 1em 0em;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.grid-item img{
    max-width: 100%;
    width: 75%;
    height: 75%;

    border-radius: 100em;
}

.grid-item h4{
    margin: 0.5em;
}

/* For Tablets */
@media screen and (max-width: 1024px) {
    .background{
        width: auto;
        height: 100%;
    }

    section{
        margin: auto;
        padding: 1em 10%;
    
        position: relative;
    
        color: white;
        background-color: var(--primary);
    
        z-index: 1;
    }
}