@charset "UTF-8";

body {
    background-color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: rgb(26, 26, 26);
}

main {
    flex: 1;
}


#logo-header {
    opacity: 100%;
}


    #section-contato {
        margin-top: 100px;
        margin-bottom: 0px;
    }


    #section-contato * {
        font-family: "Cal Sans", sans-serif;
    }

    .box-contato {
        display: inline-block;
        width: 49%;
        height: 550px;
    }

    #box-desc-contato {
        margin-left: 20%;
        margin-top: 90px;
    }

        #box-desc-contato h1 {
            font-size: 70px;
            font-weight: lighter;
            color: black;
        }

        #box-desc-contato p {
            width: 470px;
            letter-spacing: 1px;
            margin-top: 15px;
            color: black;
        }


    #container-inputs-contato {
        margin-left: 50px;
        margin-top: 90px;
    }

        .box-inputs-contato {
            margin: 20px;
        }
        
            .label-contato {
                display: inline;
                color: black;
                font-family: "Inclusive Sans", sans-serif;
            }

            .desc-label {
                display: inline;
                margin-left: 4px;
                font-size: 12px;
                color: rgb(190, 190, 190);
            }

            .campo-dados {
                height: 40px;
                width: 80%;
                border-radius: 20px;
                display: block;
                margin-top: 5px;
                padding-left: 20px;
                font-size: 15px;
                color: rgb(255, 255, 255);
                font-weight: initial;
                border-style: none;
                border: 1.5px solid rgb(0, 0, 0);
            }

            .campo-dados:hover {
                color: black;
            }

            #text-area-mensagem {
                height: 80px;
                padding-left: 10px;
                padding-top: 10px;
                background-color: rgb(255, 255, 255);
            }
        
    #btn-submit-form {
        margin-left: 25px;
        margin-top: 10px;
        margin-bottom: 20px;
        width: 100px;
        height: 45px;
        border-radius: 25px;
        cursor: pointer;
        color: rgb(0, 0, 0);
        background-color: rgba(63, 40, 4, 0);
        border: 1px solid black;
        letter-spacing: 1.5px;
        transition: 0.3s;
    }

    #btn-submit-form:hover {
        color: white;
        border: 2px solid black;
        background-color: black;
    }


@media (max-width: 768px) {

    .box-contato {
        display: inline;
        width: 100%;
    }

    #box-desc-contato {
        margin-left: 10px;
    }

        #box-desc-contato p {
            max-width: 90vw;
        }

    #container-inputs-contato {
        margin-left: 0px;
    }

}

footer {
    bottom: 0;
}