body{
    background: #333;
    text-align: center;
    margin: 5%;
    margin-top: 1%;
}
h1{
    margin: 20px;
    color: white;
    font-size: 50px;
    font-family: 'Bree Serif';
}
form{
    margin: 30px;
    display: block;
    color: white;
    font-size: 25px;
}
input{
    color: blueviolet;
    font-size: 25px;
}

input:invalid:required{
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 128, 0, 0.5));
}
input:invalid{
    border: 4px dashed red;
}
input:valid{
    border: 4px solid green;
}
textarea{
    color: blueviolet;
    font-size: 25px;
}
textarea:invalid:required{
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 128, 0, 0.5));
}
textarea:invalid{
    border: 4px dashed red;
}
textarea:valid{
    border: 4px solid green;
}
.box{
    margin: 20px;
    padding: 15px;
    border: 10px solid skyblue;
    border-radius: 20px;
}
#fsubmit{
    border: 4px ridge black;
}