:root {
    --yellow: #FFD44F;
    --blue: #081327;
    --blue_alt: #050D1B;
    --dark-blue: #020206;
    --black: #000;
    --white: #FFF;
}

@font-face {
    font-family: 'BebasNeueBold';
    src: url('../fonts/BebasNeueBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/BebasNeueRegular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.bold {
    font-family: 'BebasNeueBold';
    font-weight: bold;
}

.regular {
    font-family: 'BebasNeueRegular';
    font-weight: normal;
}

body {
    background: linear-gradient(to bottom, var(--blue) 90%, var(--dark-blue));
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.bg-yellow {
    background-color: var(--yellow);
}

.text-yellow {
    color: var(--yellow);
}

.text-black {
    color: var(--black);
}

.text-blue {
    color: var(--blue);
}

img.logo {
    max-width: 200px;
    height: auto;
}

nav {
    position: fixed;
    background-color: var(--blue_alt);
    width: 100%;
    z-index: 1050;
}

nav a {
    text-decoration: none;
}

nav img {
    max-width: 30px;
}

@media screen and (width <=500px) {
    img.logo {
        max-width: 40%;
        height: 50%;
    }

    nav img {
        max-width: 20px;
    }
}

.welcome {
    padding-top: .1em;
    padding-bottom: .0em;
}

.fundo {
    background-image: url('../images/fundo.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom center;
}

.fundo_full {
    background: linear-gradient(to bottom, var(--black), rgba(0, 0, 0, 0));
}


.fundo3 {
    background-image: url('../images/nuvem.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
}

#hero img {
    width: fit-content;
    height: auto;
}


.icons img {
    max-width: 40px;
}

.icons a {
    color: var(--white);
    text-decoration: none;
}

.yellow-bar {
    background-color: var(--yellow);
    width: 100%;
    height: 40px;
}

.text-justify {
    text-align: justify !important;
}

a {
    text-decoration: none;
}

button.pdf {
    padding: .3em 1em .2em 1em;
    border: none;
    border-radius: 20px;
    background-color: var(--yellow);
    color: var(--blue);
}

.pdf img {
    width: 30px;
    height: 30px;
}

#areas {
    margin-top: -16rem;
}

@media screen and (width <=1100px) {
    #areas {
        margin-top: -2rem;
    }

    #areas img.areas-badges {
        max-width: 200px;
    }
}

@media screen and (width <=800px) {
    #areas {
        margin-top: -6rem;
    }
}

@media screen and (width <=700px) {
    #areas {
        margin-top: -5rem;
    }
}

@media screen and (width <=500px) {
    #areas {
        margin-top: -3rem;
    }

    #areas img.areas-badges {
        max-width: 200px;
    }
}

@media screen and (width <=450px) {
    #areas {
        margin-top: -8rem;
    }
}

@media screen and (width <=350px) {
    #areas {
        margin-top: -7rem;
    }
}

.carousel-indicators {
    bottom: 4rem;
}

@media screen and (width <=1100px) {
    .carousel-indicators {
        bottom: 1em;
    }
}

@media screen and (width <=800px) {
    .carousel-indicators {
        bottom: 0;
    }
}

@media screen and (width <=700px) {
    .carousel-indicators {
        bottom: 0;
    }
}

.carousel-indicators [data-bs-target].active {
    background-color: var(--yellow);
    opacity: 1;
}

.h0 {
    font-size: calc(1.575rem + 1.5vw)
}

@media (min-width:1200px) {

    .h0 {
        font-size: 3.5rem
    }
}