body{margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;}

html{
overflow-y:hidden;
overflow-x:hidden;
}

h3 {
        color: #2957a4;
        text-align: center;
}

.content{
        width: 100%;
        height: 700px;
        display: flex; 
        justify-content: center;
        background-image: url(bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
}

.contato {
        width: 100%; 
        max-width: 500px;
        border-radius: 50px;
}

.form {
        display: flex; 
        flex-direction: column;
        border-radius: 50px;
}

.field {
        padding: 10px; 
        margin-bottom:  15px; 
        border: 1px solid #DDD; 
        font-family: Arial, Helvetica, 
        sans-serif; font-size: 16px;
        border-radius: 10px;
        box-shadow: inset 0 0 0em black, 0 0 1em black;
}

.assunto {
        padding: 10px; 
        margin-bottom:  15px; 
        border: 1px solid #DDD; 
        font-family: Arial, Helvetica, 
        sans-serif; font-size: 16px;
        border-radius: 10px;
        box-shadow: inset 0 0 0em black, 0 0 1em black;
}

textarea {
        height: 150px;
}





.contato {
    animation-name: animacao;
    animation-duration: 1s;
    position: relative;
    animation-fill-mode: forwards; /*PARA A ANIMAÇÃO*/
}

@keyframes animacao {

    0% {
        top: -100px;
        left: 0px;
        opacity: 0%;
    }

    100% {
        top: 20px;
        left: 0px;
        animation-duration: var(800px);
    }