/*  Root  */

:root {
    --dark-05: #0005;
    --dark-03: #0003;
    --dark-01: #0001;
    --light-00: #fff5;
}

/* Styles  */

html, body {
    width: 100%;
    height: 100%;
    font-size: 16px;
    color: #fff;
}

.video {
    position: fixed;
    width: 100%;
    height: 100%;
}

#myVideo {
    min-width: 100vw;
    min-height: 100vh;
    min-width: 100dvw;
    min-height: 100dvh;
}

.direitos {
    color: #fff4;
    font-size: 0.5rem;
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
    z-index: 999;
}

.direitos a {
    cursor: pointer;
    text-shadow: 0 0 5px #fff6;
}

.container {
    height: 100%;
    position: relative;
    background-color: var(--dark-05);
}

.content__container {
    height: 100%;
    display: grid;
    align-content:space-between;
}

.cabecalho {
    padding: 1em 0;
    display: flex;
    justify-content: center;
}

.logo{
    width: 120px;
}

.header__head{
    display: none;
}

.principal {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    align-content: center;
    text-shadow: 0 0 5px #fff5;
}

.rodape {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 2rem 2rem 3rem;
    display: flex;
    justify-content: center;
    gap: 5rem;
}

.rodape i {
    font-size: 2rem;
}

.rodape h3,
.rodape address {
    display: none;
}

.midias {
    color: #fff;
    display: grid;
    gap: 10px;
}

.local {
    display: flex;
    gap: 10px;
}

.endereco {
    display: grid;
    gap: 10px;
}


@media screen and (min-width: 769px){
    .logo {
        width: 220px;
    }

    .principal,
    .rodape i {
        font-size: 3rem;
    }
}