* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    width: 100%;
    height: 100vh;
    font-family: sans-serif;
}


#app {
    height: 100%;
    position: relative;
}


#app-container {
    margin-top: 40px;
}

.container {
    width: 80%;
}

main {
    transition: opacity .3s ease-out;
    min-height: 100vh;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-fill-mode: forwards;
    animation-duration: .5s;
    /* animation-name: fade-out; */
}


@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    .container {
        width: 90%;
    }
}

@media (min-width: 1025px) {
    #scroll-top-btn {
        display: none;
    }
}




:root {
    --primaria: #257271;
    --secundaria: #93bf00;
    --link-label: #c3ff00;
    --label-ativo: #3cb6b4;
}