:root{
  --accent-0: #444444; /*dark gray*/
  --accent-1: #FFC300; /*yellow*/
  --accent-2: #CC6C00; /*brown*/
  --accent-3: #EEEEEE; /*light gray*/
}

body{
  text-align: center;
  font: 16px 'Quicksand', serif;
  color: var(--accent-0);
  background-color: black;
}
h1{font: 24px 'Bungee', sans-serif;}
h2{font: 14px 'Quicksand', serif;}
mark{
  background-color: var(--accent-3);
  padding: 1% 3%;
  border-radius: 20px;
}
.generatorContainer {
  background-color: white;
  margin: 20px auto;
  border-radius: 20px;
  padding: 20px;
}

.button {
  font: 24px 'bungee', sans-serif;
  background-color: var(--accent-2);
  color: white;
  margin: 0px 10px;
  padding: 2% 4%;
  border-radius: 30px;
  border-color: transparent;
}

button:hover{
  background-color: var(--accent-1);
  color: var(--accent-2);
  cursor: pointer;
}

#random-output {
  background-color: var(--accent-3);
  margin: 20px;
  font-weight: bold;
  height: 120px;
  padding: 10px 30px 50px;
}
.generatorContainer{
  width: 50%;
  min-width: 300px;
}
@media screen and (max-width: 600px) {
  .generatorContainer{width: 80%;}
}