@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

main {
    max-width: 1280px;
    overflow: hidden;


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

    flex-direction: column;
}

#primeira-tela {
    background-image: url(../assets/background_1280.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    height: 720px;
    width: 1280px;

    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: center;
}

.container-slogan-candidato {
    height: 583px;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#hashtag-camacari-de-cara-nova {
    align-self: flex-end;
}

@media (max-width: 700px) {
    main {
        max-width: 100%;
    }

    #primeira-tela {
        background-image: url(../assets/backgournd_medio.png);

        width: 700px;
        height: 920px;

        flex-direction: column-reverse;
        align-items: center;

        justify-content: space-between;
    }

    .container-slogan-candidato {
        height: 383px;

        width: 300px;

        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    #hashtag-camacari-de-cara-nova {
        width: 150px;
    }

    #foto-principal-candidato {
        align-self: flex-end;
        width: 650px;

        margin-left: 50px;
    }
}

@media (max-width: 450px) {
    #primeira-tela {
        background-image: url(../assets/backgournd_mobile.png);

        width: 450px;
        height: 700px;
    }

    #foto-principal-candidato {
        align-self: flex-start;
    }

    .container-slogan-candidato {
        height: 300px;

        width: 250px;

        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    #hashtag-camacari-de-cara-nova {
        width: 100px;
    }
}


#segunda-tela {
    background-image: url(../assets/background_segunda_tela_1280.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    height: 780px;
    width: 1280px;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.up-side-segunda-tela {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

    width: 100%;
}

.container-quem-sou-eu {
    width: 480px;

    gap: 10px;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#quem-sou-eu-title {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;

    font-size: 24pt;

    color: white;
}

#quem-sou-eu-texto {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;

    font-size: 12pt;
    text-align: justify;

    line-height: 1.2;

    color: white;
}

.down-side-segunda-tela {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#quem-sou-eu-texto-down {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;

    width: 730px;


    font-size: 12pt;
    text-align: justify;

    line-height: 1.2;

    color: white;
    margin-right: 130px;
}


@media (max-width: 700px) {
    #segunda-tela {
        background-image: url(../assets/background_segunda_tela_700.png);

        height: 1280px;
        width: 700px;

        justify-content: center;

        gap: 50px;
    }

    .up-side-segunda-tela {
        flex-direction: column;
        justify-content: space-around;
    }

    #foto-candidato-emoji {
        width: 350px;
    }

    .down-side-segunda-tela {
        align-items: center;
        justify-content: center;
    }

    #quem-sou-eu-texto-down {
        width: 480px;
        margin-right: 0px;
    }
}

@media (max-width: 450px) {
    #segunda-tela {
        background-image: url(../assets/background_segunda_tela_mobile.png);

        height: 1400px;
        width: 450px;
    }

    .container-quem-sou-eu {
        width: 300px;

        gap: 10px;
    }

    #foto-candidato-emoji {
        width: 200px;
    }

    #quem-sou-eu-texto {
        width: 300px;
    }

    #quem-sou-eu-texto-down {
        width: 300px;
    }
}


#terceira-tela {
    background-image: url(../assets/background_terceira_tela_1280.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    height: 800px;
    width: 1280px;

    gap: 50px;
}

#terceira-tela-texto {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;

    font-size: 12pt;
    text-align: center;


    line-height: 1.2;

    color: white;
    width: 700px;
}

.container-instagram {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 100%;

    gap: 50px;
}

.instagram-media::after {
    -webkit-box-shadow: 6px 6px 18px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 6px 6px 18px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 6px 6px 18px 0px rgba(0, 0, 0, 0.75);
    border-radius: 15px;
}

@media (max-width: 700px) {
    #terceira-tela {
        background-image: url(../assets/background_terceira_tela_700.png);

        width: 700px;
        height: 1400px;

        gap: 40px;
    }

    .container-instagram {
        flex-direction: column;

        gap: 10px;
    }

    #terceira-tela-texto {
        width: 450px;
    }
}

@media (max-width: 450px) {
    #terceira-tela {
        background-image: url(../assets/background_terceira_tela_mobile.png);
        width: 450px;

        gap: 50px;
    }

    #terceira-tela-texto {
        width: 300px;
    }
}

#container-footer {
    background-image: url(../assets/background_footer_1280.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    height: 473px;
    width: 1280px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.order_footer {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.slogan-footer {
    align-self: center;
}

.button-container {
    margin-bottom: 150px;
}

@media (max-width: 700px) {
    #container-footer {
        flex-direction: column;

        background-image: url(../assets/background_footer_700.png);
        background-size: cover;

        width: 700px;
        height: 900px;

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

        padding-top: 50px;
    }

    .order_footer {
        flex-direction: column-reverse;
        height: 550px;
        justify-content: space-between;
        width: 100%;
    }

    .social_button {
        width: 320px;
    }

    .button-container {
        margin-bottom: 0px;
    }

    .slogan-footer {
        width: 260px;

    }

    .foto_candidato_footer {
        align-self: flex-end;
        margin-right: 50px;
    }

}

@media (max-width: 450px) {
    #container-footer {
        width: 450px;
        height: 800px;
    }

    .social_button {
        width: 300px;
    }


    .slogan-footer {
        width: 240px;
    }

    .order_footer {
        height: 450px;

        justify-content: space-between;
    }

    .foto_candidato_footer {
        width: 350px;
        margin-right: 20px;
    }
}


#footer_cnpj {
    background-color: #002246;

    height: 35px;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

#cnpj {
    color: white;
    font-size: 10pt;

    letter-spacing: 3px;
}