* {
  @import url("https://fonts.cdnfonts.com/css/cormorant-garamond");
  font-family: "Cormorant Garamond", sans-serif;
}

body {
  color: darkviolet;
  background: #00c9ff; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #92fe9d,
    #00c9ff
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #92fe9d,
    #00c9ff
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#head {
  background: #2a4652;
  background: linear-gradient(
    90deg,
    rgba(42, 70, 82, 1) 3%,
    rgba(10, 168, 116, 1) 27%,
    rgba(95, 121, 156, 1) 56%,
    rgba(87, 199, 133, 1) 88%,
    rgba(237, 221, 83, 1) 100%
  );
  background-clip: text;
  color: transparent;
}
form {
  width: 550px;
}
fieldset {
  border: 5px solid rgb(117, 117, 189);
  border-radius: 10px;
}
legend {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  color: brown;
}
input:required {
  border: 2px solid;
  border-radius: 4px;
  background-color: rgb(234, 210, 180);
}
input:optional {
  border: 2px dashed rgb(117, 2, 2);
  border-radius: 4px;
  background-color: rgb(234, 210, 180);
}
input[type="radio"]:checked {
  width: 15px;
  height: 15px;
}
input[type="radio"]:checked + label {
  color: rgb(75, 9, 9);
}
input[type="checkbox"]:checked {
  width: 15px;
  height: 15px;
}
input[type="checkbox"]:checked + label {
  color: rgb(75, 9, 9);
}
button {
  background-color: cadetblue;
  border-radius: 5px;
}
select {
  background-color: rgb(193, 193, 229);
  color: rgb(54, 54, 142);
  cursor: pointer;
}
input:focus {
  background-color: rgb(137, 245, 245);
}
input[type="text"] + p {
  display: none;
}
input[type="text"]:hover + p {
  display: inline;
}
input[type="email"] + p {
  display: none;
}
input[type="email"]:hover + p {
  display: inline;
}
input[type="tel"] + p {
  display: none;
}
input[type="tel"]:hover + p {
  display: inline;
}
input[type="password"] + p {
  display: none;
}
input[type="password"]:hover + p {
  display: inline;
}
img {
  display: none;
}
input[type="email"]:focus:valid ~ img#valid {
  display: inline;
  height: 15px;
  width: 15px;
}
input[type="email"]:focus:invalid ~ img#invalid {
  display: inline;
  height: 15px;
  width: 15px;
}