@charset "UTF-8";

@font-face {
    font-family: 'speed';
    src: url(../fonte/High\ Speed.ttf) format('truetype'), url(../fonte/High\ Speed.otf) format('opentype');
}
*{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
.grid{
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-areas: 
        "header header header"
        "conteudo conteudo conteudo"
        "footer footer Footer"
    ;
}
header{
    grid-area: header;
    padding: 10px;
    font-size: 18pt;
    
    text-align: center;
}
#lateral{
    grid-area: lateral;
    margin: 100px auto 80px auto;
    text-align: center;
}
#lateral img{
    width: 300px;
}
#lateral h1{
    color: #fff01b;
    font-family: 'speed', Arial;
    font-size: 30pt;
    font-style: normal;
    width: 100%;
}
#lateral h2{
    color: white;
}
#lateral p{
    color: white;
    margin: 30px auto 10px auto;
    width: 90%;
}
#conteudo{
    grid-area: conteudo;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
        "lateral section"
    ;
    background-color: #204488;
}
section{
    grid-area: section;
    width: 410px;
    padding: 30px;
    border-radius: 10px;
    margin: 10px auto 10px auto;
    box-shadow: 5px 5px 10px rgba(0,0,0,.3);
    background-color: rgb(238, 238, 238);
    
}
#formulario{
    text-align: left;
    width: 300px;
    margin: 40px auto 0 auto;
}
#formulario h3{
    margin-bottom: 20px;
    font-size: 16pt;
}
#formulario p{
    margin-bottom: 40px;
}
section input{
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    width: 300px;
    margin: 7px;
    height: 40px;
    border-radius: 10px;
    border: solid 1px rgb(170, 170, 170);
}
#telefone{
    width: 200px;
}
#notificacoes{
    width: auto;
    margin: 10px;
    height: auto;
}
#botao{
    margin: 40px auto 40px auto;
    height: auto;
    background-color: rgb(13, 167, 13);
    color: white;
    font-size: 18pt;
    padding: 30px;
    cursor: pointer;
}
footer{
    grid-area: footer;
    padding: 40px;
    text-align: center;
}


/*mobile*/

@media(max-width: 1000px){
    .grid{
        grid-template-columns: 100%;
        grid-template-areas:
        "header"
        "conteudo"
        "footer"
        ;
        text-align: center;
    }
    #conteudo{
        grid-area: conteudo;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "lateral"
            "section"
        ;
    }
}
@media (max-width: 670px){
    #lateral h1{
         font-size: 30pt;
    }
    #formulario{
        width: 350px;
    }
    
}
@media (max-width: 500px){
    #formulario{
        text-align: left;
        width: 300px;
        margin: 0 auto;
    }
    section input{
        width: 260px;
        margin: 7px;
        height: 30px;
        border-radius: 10px;
        border: solid 1px rgb(170, 170, 170);
    }
    #telefone{
        width: 150px;
    }
    #notificacoes{
        width: auto;
        margin: 10px;
        height: auto;
    }
    #botao{
        margin: 40px auto 40px auto;
        width: 260px;
        background-color: rgb(13, 167, 13);
        color: white;
        font-weight: 700;
        font-size: larger;
        cursor: pointer;
    }
    section{
        width: 80%;
    }
}