html{
  font-family: 'Comfortaa', sans-serif; 
  font-size: 18px;
  text-align: center;
  background-color: #FAF7F4;
  color: #1B1F3B;
  margin: 0 auto;
  min-width: 250px;
  max-width: 600px;
}

body{
  border-radius: 10%;
  padding: 0.5em;
}

h1, h2{
  background-color: #C3A273;
  margin: 0em;
  color: #FAF7F4;
}

h1{
  padding: .5em 0 0 0;

}

h2{
  padding: 0 0 .5em 0;
}

.myForm{
  background-color: #DCC9B6;
  padding: 0.5em;
  margin: 0;
}



.moodIcon{
  width: 70px;
}

.drop{
  font-family: 'Comfortaa', sans-serif; 
  margin: 1em auto;
  padding: 0.5em;
  border: 0;
  background-color: #FAF7F4;
  color: #1B1F3B;
}



.drop:active{
  outline: none;
  background-color: #FAF7F4;
  border: 0;

}

.drop:focus{
  outline:none;
  border: 0;
}

.drop option{
  outline:none;
  border: 0;
}

.drop:hover option{
  outline:none;
  border: 0;
}



.face{
  margin: 0.5em auto;
}

.myButton{
  background-color: #FAF7F4;
  text-decoration: none;
  color:#C3A273;
  border: 0;
  font-family: 'Comfortaa', sans-serif; 
  font-size: 18px;

}

.myButton:hover{
  color: #FAF7F4;
  background-color:#C3A273;
}

.myButton:focus{
  outline: none;
}

.myButton:hover{
  cursor: pointer;
  transition: background-color 0.25s linear;

}

#songLink{
  background-color: #FAF7F4;
  text-decoration: none;
  color:#C3A273;
}

#songLink:hover{
  color: #FAF7F4;
  background-color:#DCC9B6;
  transition: background-color 0.25s linear;
}

.result{
  background-color: #C3A273;
  color: #FAF7F4;
  padding: 1em;
}

#songIcon{
  width: 80%;
  border-radius: 10%;
}

#goodFlavor{
  display: none;
}

#vagueFlavor{
  display: none;
}

#badFlavor{
  display: none;
}




/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  filter: brightness(1.35);
}