h1 {
  display: flex;

  justify-content: center;

  font-weight: bolder;

  font-size: 60px;

  text-shadow: 2px 2px;

  font-family: "Raleway", sans-serif;
}

.color_gen {
  display: flex;

  justify-content: center;
}

body {
  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;
}

html {
  height: 100%;
}

#random,
.brndm,
#gradc {
  font-size: 20px;

  border-radius: 12px;

  padding: 16px 32px;

  text-align: center;

  font-size: 20px;

  margin: 4px 2px;

  opacity: 0.6;

  transition: 0.3s;

  font-weight: bolder;

  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.color_gen:active {
  transform: translateY(4px);
}

#random:hover {
  opacity: 1;
}

#gradc:hover {
  opacity: 1;
}

.brndm:hover {
  opacity: 1;
}