* {
    margin: 0;
    padding: 0;
    font-family: 'League Gothic';
}

.main_img {
    background: url("assets/coffeImg.png") no-repeat;
    background-size: cover;
    height: 100vh;
    display: grid;
    grid-template-rows: 10vh 80vh 10vh;
    grid-template-areas: 'header'
                         'title_contains'
                         'informations'
}


/* Cabeçalho */

header{
    grid-area: header;
    background-color: #09090966;
    color: white;
    padding: 4vh;

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

header a {
    padding: 1vw;
    font-size: 25px; 
    color: white;
    text-decoration: none;
}

.logo_title {
    color: white;
    font-size: 35px;
}


/* Título */

.title_contains {
    grid-area: title_contains;
    padding-left: 35vw;

    display: flex;
        flex-direction: row;
        justify-content: center; 
        align-content: center; 
        flex-wrap: wrap;  
        text-align: center;
}

.title {
    font-family: 'League Gothic';
    font-size: 22vh;
    color: #fff;
}

.coffe_icon {
    height: 25vh;
    width: 25vh;
    padding-top: 5vh;
}


/* Informações - Senac */

.informations {
    grid-area: informations;
    padding: 0vw 5vw 0vw 5vw;
    display: flex;
        justify-content: end;
}

.SenacText {
    color: #fff;
    font-size: 24px; 
    text-decoration: none;
}


/* Informações sobre os Palestrantes */

.informacoesPalestrantes {
    width: 100%;
    margin-top: 5vh;
    display: flex;
        flex-direction: row;
}

.palestrantesSection{
    width: 70%;
}

.palestrantesSection div{
    display: flex;
        flex-direction: row;
        justify-content: center; 
        align-content: center; 
        flex-wrap: wrap;  
}

.person {
    width: 15%;
    padding: 2vw;
    display: flex;
        align-items: center;  
        flex-direction: column;
}

.person img {
    width: 10vw;
    height: 10vw;
    border-radius: 100px;
}

.person label {
    font-family: 'arial';
    font-size: 15px;
    padding-top: 1vh;
    text-align: center;
}


/* Informções sobre a oficina */

.informacoesEmSenac {
    width: 20%;
    padding-top: 4vh;
}

h2 {
    color: #7C5039;
    font-size: 40px;
}

.text {
    padding-top: 3vh;
    font-family: 'arial';
}

.saibaMais {
    float: right;

    letter-spacing: .1em;
    font-size: 16px;

    margin-top: 8vh;
    padding: .5vw;
    padding-left: 1vw;
    padding-right: 1vw;

    border: 0px;
    background-color: #8c6a5a;
    color: white;
    border-radius: 10px;
}


/* Container - Mais informações */

.container {
    display: none;
    padding: 6vh;
    padding-left: 8vw;
    padding-right: 10vw;
    margin-top: 6vh;

    text-align: justify;
    text-indent: 3vw;
    border-top: 1px solid #8c6a5a;
    border-bottom: 1px solid #8c6a5a;
}

.text2 {
    font-family: 'arial';
}


/* Inscrição */

.subscribe_text {
    padding-top: 10vh;
    color: #7C5039;
    font-size: 16px;
    font-family: 'arial';
    font-weight: 600;
    text-align: center;
}

.subscribe {
    padding-top: 4vh;
    display: flex;
        align-items: center;
        justify-content: center;
}


/* Botão inscreva-se*/

.subscribe_button {
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;

    padding: 0.7em 8em;
    font-size: 20px;

    color: #7c5039d8;
    background: #e8e8e8;
  
    border-radius: 0.5em;
    border: 1px solid #7c5039d8;
    box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

.subscribe_button:active {
    color: #7C5039;
    box-shadow: inset 4px 4px 12px #c5c5c5,
             inset -4px -4px 12px #ffffff;
}

.subscribe_button:before {
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    z-index: -1;
    content: "";
    position: absolute;
    display: block;

    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

.subscribe_button:after {
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    z-index: -1;
    content: "";
    position: absolute;
    display: block;
  
    width: 160%;
    height: 190%;
    left: 55%;
    top: 180%;
    
    background-color: #7c5039d8;
    border-radius: 50%; 
}

.subscribe_button:hover {
    color: #ffffff;
    border: 1px solid #7c5039d8;
}

.subscribe_button:hover:before {
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
    top: -35%;
    background-color: #7c5039d8;
}

.subscribe_button:hover:after {
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
    top: -45%;
    background-color: #7c5039d8;
}


/* Footer */

footer {
    margin-top: 10vh;
    padding: 3vh;
    background-color: #8c6a5a;

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

footer img {
    width: 15vw;
}

footer p {
    color: #ffffff;
    font-size: 16px;
    font-family: 'arial';
    padding: 0.5vh;
}


/* ScrollBar */

::-webkit-scrollbar {
    width: .5vw;
    height: 2vh;
}
  
::-webkit-scrollbar-thumb {
    background: #8c6a5a;
}
  
::-webkit-scrollbar-track {
    background: rgba(248, 246, 246, 0.2);
}


/* Nome do Usuário - Modal */

.modal {
    display: none; /* Esconde a caixa de diálogo */
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.4);
}
  
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    border-radius: 20px;
    width: 40%; 
    height: 25vh;
}
  
.welcomeTitle {
    color: #7C5039;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}
  
.input {
    width: 34vw;
    margin-top: 5vh;
    padding: 10px;
    margin-left: 2vw;
    background: transparent;
    font-size: 16px;
    font-family: 'arial';
    border: none;
    border-bottom: 1px solid #7C5039;
    transition: all .25s ease;
}

::placeholder {
    color: #6b6b6bd3;
}
  
.input:focus {
    outline: none;
}

.okButton {
    float: right;
    
    letter-spacing: .1em;
    font-size: 18px;
    
    margin-top: 3vh;
    margin-right: 2.5vw;
    padding: .5vw;
    padding-left: 1vw;
    padding-right: 1vw;
    
    border: 0px;
    background-color: #8c6a5a;
    color: white;
    border-radius: 10px;
}
 
@media only screen and (max-width: 700px){
    .coffe_icon{
        display: none;
    }

    .title_contains{
        /* padding-left: 20vw; */
        padding: 0vw 5vw 0vw 5vw;
    }
}

@media only screen and (max-width: 800px){
    .informacoesPalestrantes{
        display: block;
        flex-direction: column;
        margin-bottom: 15vh;
    }

    .informacoesEmSenac{
        width: 90vw;
        margin-left: 5vw;
        margin-left: 5vw;
    } 

    .modal-content{
        width: 60%;
    }

    footer img{
        width: 25%;
    }

    .title {
        font-family: 'League Gothic';
        font-size: 16vh;
        color: #fff;
    }

    header a {
        padding: 1vw;
        font-size: 22px; 
        color: white;
        text-decoration: none;
    }

    
    .informacoesPalestrantes {
        width: 100%;
        margin-top: 5vh;
        display: flex;
            flex-direction: column;
    }

    .palestrantesSection{
        width: 100%;
    }

    .palestrantesSection div{
        display: flex;
            flex-direction: row;
            justify-content: center; 
            align-content: center; 
            flex-wrap: wrap;  
    }

    .person {
        width: 15%;
        padding: 2vw;
        display: flex;
            align-items: center;  
            flex-direction: column;
    }

    .person img {
        width: 15vw;
        height: 15vw;
        border-radius: 100px;
    }

    .person label {
        font-family: 'arial';
        font-size: 15px;
        padding-top: 1vh;
        text-align: center;
    }

    .saibaMais {
        float: right;
    
        letter-spacing: .1em;
        font-size: 16px;
    
        margin-top: 6vh;
        padding: 1vw;
        padding-left: 3vw;
        padding-right: 3vw;
    
        border: 0px;
        background-color: #8c6a5a;
        color: white;
        border-radius: 10px;
    }

    .container {
    display: none;
    padding: 6vh;
    padding-left: 8vw;
    padding-right: 10vw;
    margin-top: 0vh;

    text-align: justify;
    text-indent: 3vw;
    border-top: 1px solid #8c6a5a;
    border-bottom: 1px solid #8c6a5a;
}

.text2 {
    font-family: 'arial';
}


/* Inscrição */

.subscribe_text {

    padding-top: 2vh;
    color: #7C5039;
    font-size: 16px;
    font-family: 'arial';
    font-weight: 600;
    text-align: center;
}

.subscribe {
    padding-top: 4vh;
    display: flex;
        align-items: center;
        justify-content: center;
}


/* Botão inscreva-se*/

.subscribe_button {
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;

    padding: 0.7em 8em;
    font-size: 20px;

    color: #7c5039d8;
    background: #e8e8e8;
  
    border-radius: 0.5em;
    border: 1px solid #7c5039d8;
    box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

.subscribe_button:active {
    color: #7C5039;
    box-shadow: inset 4px 4px 12px #c5c5c5,
             inset -4px -4px 12px #ffffff;
}

.subscribe_button:before {
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    z-index: -1;
    content: "";
    position: absolute;
    display: block;

    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

.subscribe_button:after {
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    z-index: -1;
    content: "";
    position: absolute;
    display: block;
  
    width: 160%;
    height: 190%;
    left: 55%;
    top: 180%;
    
    background-color: #7c5039d8;
    border-radius: 50%; 
}


/* Nome do Usuário - Modal */

.modal {
    display: none; /* Esconde a caixa de diálogo */
    position: fixed; 
    margin-top: 10vh;
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.4);
}
  
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    border-radius: 20px;
    width: 60%; 
    height: 25vh;
}
  
.welcomeTitle {
    color: #7C5039;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}
  

}