@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400&display=swap');

:root{
    --azulDnc: #0C70F2;
    --pretoDnc: #303030;
    --cinzaHover: #C9C9C9;
    --fontePadrao: 'inter';
}

    body{
        margin: 0px;
        padding: 0px;

        background: linear-gradient(180deg, rgba(12, 112, 242, 0.5) 19.91%, rgba(12, 112, 242, 0) 24.84%), var(--pretoDnc);
        background-repeat: no-repeat;
    }

    /*menu de navegação superior*/

    #principal{
        width: 100%;
        height: 100px;
        border: 1px solid #000000;
        background-color: var(--pretoDnc);
        font-size: 25px;
        font-weight: 600;
        color: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #BABABA;
    }

        #menu{
            display: flex;
            width: 45%;
            justify-content: space-around;
            align-items: center;
            margin-left: 5%;
        }

        #principal div a{
            font-family: var(--fontePadrao);
            font-size: 25px;
            font-weight: 600;
            color: #FFFFFF;
            text-decoration: none;
        }

            #principal div a:hover{
                color: var(--cinzaHover);
            }

        #principal button{
            margin-right: 5%;
            background-color: var(--azulDnc);
            border: 0px;
            height: 40px;
            width: 80px;
            font-family: var(--fontePadrao);
            font-size: 20px;
            font-weight: 600;
            color: #FFFFFF;
            box-shadow: 3px 2px 4px rgba(12, 112, 242, 0.25);
            cursor: pointer;
        }

    /*Sessão principal do site*/

    section{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 100px;
        margin-bottom: 100px;
    }

        header{
            color: white;
            font-family: var(--fontePadrao);
        }

            header h1{
                text-transform: uppercase;
                font-size: 80px;
                font-weight: 800;
                margin-bottom: 20px;
                text-align: center;
            }

            header h2{
                text-align: center;
                font-size: 40px;
                font-weight: 700;
                margin-bottom: 100px;
            }

            header .invertColor{
                background-color: #000000;
                font-weight: bold;
                padding: 5px;

            }

        /*Formulario*/

        form{
            color: white;
            font-family: var(--fontePadrao);
            font-size: 30px;
            font-weight: 600;
            width: 600px;
        }

            .formGroup{
                display: flex;
                flex-direction: column;
                margin: 10px 0px 10px 0px;
            }

            form input{
                border-radius: 10px;
                height: 30px;
                border: 0px;
                font-size: 20px;
                padding: 10px;
                background-color: rgba(255, 255, 255, 0.9);
            }

                form input::placeholder{
                    color: rgba(57, 57, 57, 0.5);
                }

            form label{
                margin: 10px 0px 10px 0px;
            }

            .checkboxItens{
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

                .checkboxItens label{
                    font-size: 25px;
                }

                input[type="checkbox"]{
                    transform: scale(1.7);
                }
                
            input[type="submit"]{
                background-color: rgba(12, 112, 242, 0.9);
                width: 100%;
                height: 56px;
                font-size: 32px;
                color: white;
                margin-top: 100px;
                box-shadow: 0px 6px 4px rgba(12, 112, 242, 0.25);
                cursor: pointer;
            }

            /*Footer*/

            footer {
                width: 100%;
                background-color: var(--azulDnc);
            }

            footer .linha1{
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            footer ul{
                list-style: none;
                margin: 0px;
                padding: 0px;
            }

            footer nav{
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 330px;
            }

            footer h5{
                font-weight: 800;
                text-align: center;
                color: white;
                font-size: 20px;
                font-family: var(--fontePadrao);
                background-color: var(--pretoDnc);
                border-radius: 10px;
                padding: 10px;
                margin-bottom: 15px;
            }

            footer ul li{
                text-align: center;
                color: white;
                font-weight: 600;
                font-size: 18px;
                font-family: var(--fontePadrao);
                margin: 20px 0px 20px 0px;
            }

            footer ul li a{
                color: white;
                text-decoration: none;
            }

                footer ul li a:hover{
                    color: var(--cinzaHover);
                }

            footer .endereco{
                font-weight: 600;
                font-size: 18px;
                font-family: var(--fontePadrao);
                color: white;
                text-align: center;
                width: 20%;
            }

            footer .linha2{
                display: flex;
                justify-content: center;
                padding: 10px;
                height: 35px;
            }

            footer .linha2 a{
                font-family: var(--fontePadrao);
                font-size: 15px;
                font-weight: 600;
                color: white;
                text-decoration: none;
                padding: 5px;       
            }

                footer .linha2 a:first-child{
                    border-right: 2px solid white;  
                }

                footer .linha2 a:hover{
                    color: var(--cinzaHover);
                }

@media only screen and (max-width: 600px){

    /*Menu superior*/

    #principal{
        flex-direction: column;
        height: auto;
    }

    #menu{
        flex-direction: column;
        width: 100%;
        margin: 0px;
    }

    #menu a{
        display: flex;
        align-items: center;
        height: 50px;
    }

    #principal button{
        width: 100%;
        margin-right: 0px;
    }

    /*section*/

    section h1{
        font-size: 38px;
    }

    section h2{
        font-size: 28px;
        padding-right: 15px;
        padding-left: 15px;
    }

    form{
        width: 80%;
        font-size: 20px;
    }

    .checkboxItens label{
        font-size: 17px;
    }

    /*footer*/

    footer .linha1{
        flex-direction: column;
    }

    footer .endereco{
        width: 85%;
        margin-bottom: 30px;
    }
}