* {
  @import url("https://fonts.cdnfonts.com/css/google-sans");
  font-family: "Product Sans Light", sans-serif;
}

body {
  background: #22c1c3;
  background: linear-gradient(
    0deg,
    rgba(34, 193, 195, 1) 0%,
    rgba(253, 187, 45, 1) 100%
  );
  @import url("https://fonts.cdnfonts.com/css/google-sans");
  font-family: "Product Sans Light", sans-serif;
}
#head:hover {
  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-clip: text;
  color: transparent;
}
form {
  width: 500px;
}
fieldset {
  border: 3px solid green;
  border-radius: 20px;
}
legend {
  color: crimson;
}
input:required {
  border: 3px solid red;
}
input:optional {
  border: 3px dashed blue;
}
input:read-only {
  background-color: aqua;
  color: palevioletred;
}
input[type="radio"]:checked {
  height: 20px;
  width: 20px;
}
input[type="radio"]:checked + label {
  color: palevioletred;
}
input[type="submit"] {
  border: 3px solid rebeccapurple;
  border-radius: 15px;
}
select {
  background-color: rgb(190, 113, 36);
  border-radius: 15px;
  cursor: pointer;
}
input:focus {
  background-color: rgb(180, 34, 149);
}
input[type="text"] + span {
  display: none;
}
input[type="text"]:hover + span {
  display: inline;
}
img {
  display: none;
}
input[type="email"]:focus:valid ~ img#valid {
  display: inline;
  height: 20px;
  width: 20px;
}
input[type="email"]:focus:invalid ~ img#invalid {
  display: inline;
  height: 20px;
  width: 20px;
}
input[type="password"] + span {
  display: none;
}
input[type="password"]:hover + span {
  display: inline;
}
input[type="tel"] + span {
  display: none;
}
input[type="tel"]:hover + span {
  display: inline;
}
input[type="email"] + span {
  display: none;
}
input[type="email"]:hover + span {
  display: inline;
}