@charset "UTF-8";
@import url("style-menu.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

/* Colors variáveis */
:root{
    --color-box: #f4f4f4a2;

    --color-button1: #3c9bdc;
    --color-button2: #2ab89f;
    --color-button3: #f2c41e;
}

.main__principal{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Box Principal dos Elementos */
.container__box{
    width: 85%;
    height: 80%;
    margin-top: 7%;
    z-index: 2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-box);
}


/* Lado Esquerdo: Buttons, Lado Direito: Imagem */
.conteiner__buttons, .conteiner__img{
    flex: 1;
    padding: 20px 20px;
}


/* Lado Esquerdo: Botões */
.conteiner__buttons{
    height: 100%;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.conteiner__buttons h1{
    font-size: 30px;
    font-weight: 600;
}

/* Div dos Buttons */
.button_group{
    width: 70%;
    height: 50%;
    gap: 30px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/* Botões: */
.button{
    width: 100%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: white;
    font-size: 18px;
    border-radius: 12px;
    text-decoration: none;
    background-color: white;
    transition: all .2s ease-in-out;
    box-shadow: 0px 4px 5px rgba(54, 54, 54, 0.404);
}
.button:hover{
    transform: scale(1.1);
}
.button i{
    font-size: 25px;
}

/* Cores de Cada Botão */
#button1{
    background-color: var(--color-button1);
}
#button2{
    background-color: var(--color-button2);
}
#button3{
    background-color: var(--color-button3);
}

/* Seta Voltar */
.div__seta_voltar {
    position: relative;
    top: 15%;
    right: 47%;
    cursor: pointer;
}


/* Lado Direito: Imagem */
.conteiner__img{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conteiner__img img{
    width: 80%;
    height: auto;
}

/* Imagens Decorativas: */
.imgs__decorative1{
    position: fixed;
    top: 15vh;
    left: 0;
    width: 20vw;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.imgs__decorative2{
    position: fixed;
    top: 20vh;
    right: -15vw;
    width: 20vw;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.imgs__decorative3{
    position: fixed;
    bottom: -1vh;
    right: -10vw;
    width: 20vw;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}
.imgs__decorative3 img{
    width: 60%;
    height: auto;
}


/* Responsividades: */
/* Celulares pequenos (smartphones compactos) */
@media (max-width: 575.98px){
    /* Box Principal dos Elementos */
    .container__box{
        margin-top: 30%;
    }

    /* Lado Esquerdo: Botões: */
    .conteiner__buttons h1{
        font-size: 20px;
        font-weight: 600;
    }
    .button_group{
        width: 100%;
    }
    .button{
        height: 22%;
        font-size: 14px;
    }
    .button i{
        font-size: 18px;
    }

    /* Lado Direito: Imagem: */
    .conteiner__img{
        display: none;
    }

    /* Imagens Decorativas: */
    .imgs__decorative1 img{
        width: 50%;
        height: auto;
    }
    .imgs__decorative2 img{
        width: 50%;
        height: auto;
    }
}


/* Celulares médios e grandes (smartphones modernos) */
@media (min-width: 576px) and (max-width: 767.98px){
    /* Box Principal dos Elementos */
    .container__box{
        margin-top: 20%;
    }

    /* Lado Esquerdo: Botões: */
    .button_group{
        width: 90%;
    }
    .button{
        height: 22%;
    }

    /* Lado Direito: Imagem: */
    .conteiner__img{
        display: none;
    }

    /* Imagens Decorativas: */
    .imgs__decorative1 img{
        width: 50%;
        height: auto;
    }
    .imgs__decorative2 img{
        width: 50%;
        height: auto;
    }
}


/* Tablets e celulares em paisagem */
@media (min-width: 768px) and (max-width: 991.98px){
    /* Box Principal dos Elementos */
    .container__box{
        margin-top: 15%;
    }

    /* Lado Esquerdo: Botões: */
    .conteiner__buttons h1{
        font-size: 30px;
    }
    .button_group{
        width: 90%;
    }
    .button{
        font-size: 22px;
    }
    .button i{
        font-size: 30px;
    }

    /* Lado Direito: Imagem: */
    .conteiner__img{
        display: none;
    }
}


/* Notebooks e desktops padrão */
@media (min-width: 992px) and (max-width: 1199.98px){
    /* Box Principal dos Elementos */
    .container__box{
        margin-top: 12%;
    }

    /* Lado Esquerdo: Botões: */
    .button_group{
        width: 90%;
    }

    /* Imagens Decorativas: */
    .imgs__decorative2 img{
        width: 50%;
        height: auto;
    }

    .conteiner__img {
        display: none;
    }
}


/* Desktops grandes e telas Full HD */
@media (min-width: 1200px) and (max-width: 1399.98px){
    /* Box Principal dos Elementos */
    .container__box{
        margin-top: 10%;
    }

    /* Lado Direito: Imagem: */
    .button_group{
        width: 90%;
    }

    /* Imagens Decorativas: */
    .imgs__decorative2 img{
        width: 50%;
        height: auto;
    }
}


/* Nest Hub */
@media (min-width: 1024px) and (max-height: 600px){
    /* Lado Direito: Imagem: */
    .conteiner__buttons h1{
        font-size: 25px;
    }
    .button{
        font-size: 16px;
    }
    .button i{
        font-size: 20px;
    }

    /* Imagens Decorativas: */
    .imgs__decorative1 img{
        width: 40%;
        height: auto;
    }
    .imgs__decorative2 img{
        width: 40%;
        height: auto;
    }
    .imgs__decorative3{
        bottom: -2vh;
    }
}

/* Matheus Manja */