*,
::before,
::after {
  box-sizing: border-box;
}


body {
    background-color: #5D7362;
    font-family: 'Roboto', sans-serif;
}



h1{
    font-family: 'Finger Paint', cursive;
    font-size : 2.5rem;
    margin-left : 2%;
    color : #ffffff;
    margin-left : 15%;
    margin-top : 0;
}

form {
    text-align: center
}

.form-content {
    display : flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.form-info {
    margin: 2% 0;
    position: relative;
    display : flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form-info>input {
    padding: 1.5%;
    width: 20%;
    font-size: 1rem;
    background-color : #79897c;
    border : none;
    color : #ffffff;
    border-radius : 4px;
}


.form-info>input {
    padding: 1.5%;
    width: 90%;
    font-size: 1rem;
    background-color : #79897c;
    border : none;
    color : #ffffff;
    border-radius : 4px;
}

.personal-info>div {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.name{
    display : flex;
    width : 100%;
    padding : 0 2.5%;
}

.name .form-info {
    width : 50%;
}
.name input {
    width : 90%;
    padding : 3% 5%;
}



.form-info > label{
    align-self: flex-start;
    margin-bottom : 2%;
    margin-left : 5%;
    color : #d1ddd3;
}

.name .form-info>label{
    margin-left : 5%;
}

fieldset {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius : 10px;
    border : solid 2px #a9b4ab;
}



legend{
    padding : 2%;
    font-size : 1.2rem;
    color : #ffffff;
}

textarea{
    background-color: #79897c;
    color : #ffffff;
    border : none;
    font-family : 'Roboto', sans-serif;
    padding : 2%;
    font-size : 1rem;
    border-radius : 5px;
    width : 90%;
}


button {
    padding: 2% 2%;
    font-size: 1rem;
    border-radius : 5px;
    border :none;
    background-color: #a9b4ab;
    color : #ffffff;
    margin-top : 2%;
    margin-left : 5%;
    margin-bottom : 5%;
    float : right;
    width : 90%;
    transition : all 0.25s ease;
    cursor: pointer;
    display : flex;
    align-items: center;
    justify-content: center;
    
}


button:hover{
    color : #5D7362;
    background-color: #90ee90;
}

button:hover > svg {
    animation : svg-arrow 1s infinite;
    fill : #5D7362
}


svg{
    margin-left : 1%;
    width : 3%;
    fill : white;
}

@keyframes svg-arrow {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(8px);
    }

    100% {
        transform: translateX(0);
    }
}

@media (max-width: 992px){
    h1{
        font-size: 2rem;
    }
    .form{
        margin-top: 10%;
    }
}

@media (max-width: 768px){
    h1{
        font-size: 1.9rem;
        margin-left: 20%;
    }
    .form{
        margin-top: 10%;
    }
    .name{
        flex-direction: column;
    }
    .name{
        display : flex;
        width : 120%;
        padding : 0 2.5%;
    }
}

@media (max-width: 578px){
    h1{
        font-size: 1.7rem;
        margin-left: 22%;
    }
    .form{
        margin-top: 15%;
    }
    .name{
        flex-direction: column;
    }
    .name{
        display : flex;
        width : 130%;
        padding : 0 2.5%;
    }
    legend{
        font-size: 1rem;
    }
    label{
        font-size: 0.9rem;
    }
    button{
        font-size: 0.9rem
    }
    .form-info>input {
        padding: 6%;
        
    } 
}