body {
  font-family: "Roboto", "Raleway", sans-serif;
  font: "Roboto Medium";
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  top: 15%;
  background: linear-gradient(to right, #b4333e, #3e90c7); /* Standard syntax */
}

h1 {
  font: 600 3.5em "Raleway", sans-serif;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  width: 100%;
}

h3 {
  font: 900 1em "Roboto", sans-serif;
  color: rgb(2, 2, 2);
  text-align: center;
  text-transform: none;
  letter-spacing: 0.01em;
}

button {
  border: 2px solid;
  margin: 1em;
  width: 10em;
  height: 2em;
  background: none;
  color: black;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  transition: 0.75s;
}

#rnd {
  /* border-radius: 20px; */
  border-color: black;
  color: black;
  box-shadow: inset 0px 0px 0px #2f3b47;
}

#rnd:hover {
  box-shadow: inset 0 0 0 2em black;
  color: white;
}

#colorbtn {
  border: 2px solid;
  margin: 1em;
  width: 5em;
  height: 1.7em;
  background: none;
  color: black;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  transition: 0.75s;
}

#colorbtn:hover {
  box-shadow: inset 0 0 0 2em black;
  /* color: white; */
}
.colorVal {
  border: 2px solid black;
  padding: 1rem;
  width: 10rem;
  height: 7rem;
}

.test {
  display: flex;
  justify-content: space-evenly;
  /* align-items: center; */
  /* font: roboto; */
  flex-direction: row;
}