*{
    @import url("https://fonts.cdnfonts.com/css/smooth-gracier-personal-use");
font-family: 'Smooth Gracier Personal Use', sans-serif;                                                           
}
body{
 background: #833AB4;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
 background: bisque;

}
#head:hover {
    background: #833AB4;
background: radial-gradient(circle, rgba(131, 58, 180, 1) 20%, rgba(252, 70, 107, 1) 100%);
}
form{
    width: 600px;
}
fieldset{
    border: 3px solid gray;
    border-radius: 20px;
}
legend{
    border: solid rgb(0, 0, 0);
}
input:required{
    border:2px #c92463;

}
input:optional{
    boarder: 2px rgb(129, 173, 187);

}
input:read-only{
    background-color: rgb(155, 40, 59);
}
input[type="radio"]:checked {
    height: 20px;
    width: 20px;
}
input[type="radio"]:checked +label{
    color: rgb(255, 255, 0);
}
input[type="submit"] {
    boarder: 3px solid rgb(226, 17, 122);
    border-radius: 15px;
}
select{
    background-color: rgb(109, 91, 70);
    border-radius: 15px;
    cursor: pointer;
}
input:read-only{
    background-color: #7a255f;
    border-radius: 15px;
    cursor: pointer;
}
input:hover{
    background-color: #571241;

}
input:focus{
    background-color: rgb(206, 12, 21);
}
input[type="text"]+p{
    display: none;
}
input[type="text"]:hover+p{
    display: inline;
    background-color: yellow;
    color: #7a255f;
    font-family: monospace;
}
input[type="tel"]+p{
    display: none;
}
input[type="tel"]:hover+p{
    display: inline;
    background-color: yellow;
    color: #7a255f;
    font-family: monospace;
}
input[type="email"]+p{
    display: none;
}
input[type="email"]:hover+p{
    display: inline;
    background-color: yellow;
    color: #7a255f;
    font-family: monospace;
}
input[type="password"]+p{
    display: none;
}
input[type="password"]:hover+p{
    display: inline;
    background-color: yellow;
    color: #7a255f;
    font-family: monospace;
}
input[type="date"]+p{
    display: none;
}
input[type="date"]:hover+p{
    display: inline;
    background-color: yellow;
    color: #7a255f;
    font-family: monospace;
}
img{
    display: none;
}
input[type="email"]:focus:valid~img#valid{
    display: inline;
    width: 20px;
    height: 20px;
}

input[type="email"]:focus:invalid~img#invalid{
    display: inline;
    width: 20px;
    height: 20px;
}

#head:hover{
    background-color: #c92463;
    color: aqua;
    
}