* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Times New Roman", Times, serif;
}
body {
  background-color: black;
  color: white;
}
h1 {
  background-color: rgb(32, 32, 66);
  padding: 25px;
  width: 450px;
  text-align: center;
  border-radius: 15px;
  border: 2px solid white;
  margin: 15px auto;
  box-shadow: 5px 5px 25px rgb(101, 101, 204);
}
form {
  width: 500px;
  margin: 0px auto;
}
fieldset {
  background-color: rgb(27, 13, 50);
  width: 100%;
  margin: 0px auto;
  padding: 30px;
  border-radius: 15px;
  margin-bottom: 20px;
}

legend {
  background-color: aqua;
  color: black;
  padding: 15px;
  border-radius: 20px;
}
input,
select {
  padding: 15px;
  background-color: aquamarine;
  width: 100%;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 6px;
  border-radius: 15px;
  color: rgb(30, 2, 2);
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
}
input:required {
  /*:required =mandatory*/
  border: 2px solid red;
}
input:optional {
  border: 2px solid blue;
}
.tooltip {
  background-color: aqua;
  color: black;
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 5px;
  margin-top: 0px;
  display: none; /* not displayed*/
}
input:focus {
  background-color: rgb(85, 220, 220);
}
input:focus + p {
  /* +p means: adjacent sibling of input ie.,<p> tag also visible with <input> tag*/
  display: block; /* display in block*/
}
.wrong,
.correct {
  height: 25px;
  width: 25px;
  margin-right: 10px;
  display: none;
}

input[type="email"]:valid ~ .correct {
  display: inline;
}
input[type="email"]:invalid ~ .wrong {
  display: inline;
}
input[type="number"]:in-range ~ .correct {
  display: inline;
}
input[type="number"]:out-of-range ~ .wrong {
  display: inline;
}

label {
  color: yellow;
  margin-right: 1px;
}

input[type="radio"]:checked + label {
  color: white;
  font-size: 20px;
  font-style: bold;
  text-decoration: none;
}
input[type="checkbox"]:checked + label {
  color: white;
  font-size: 20px;
  font-style: bold;
  text-decoration: underline;
}

input[type="submit"] {
  width: 100%;
  text-align: center;
}
input[type="clear"] {
  width: 30%;
  text-align: left;
}
td {
  width: 500px;
  text-align: left;
  letter-spacing: 1px;
}