@charset "utf-8";
/* CSS Document */

.menuButton {
  text-transform: uppercase;
  font-size: 20px;
  border-radius: 10px;
  border-bottom: 2px solid orange;
  box-shadow: 0 0 1px 1px gray;
  padding-top: 5px;
  margin-right: 10px;
}

.menuButtonDefault {
  background-color: #FFFF94;
}

.menuButtonSelected {
  background-color: #5B5C38;
  box-shadow: 0 0 1px 1px gray;
  color: lawngreen;
  border-bottom: none;
}

.smol {
  width: 80%;
}

.gameDescription {
  border: 2px solid white;
  background-color: darkblue;
  color: antiquewhite;
  margin: 10px 20px;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 1px 1px black;
  display: none;
}

.highlightWord {
  color: yellow;
}

.gameMessage {
  background-color: beige;
  height: 50px;
  border-radius: 10px;
  margin: 10px 20px;
  padding-top: 10px;
  border: 1px solid tan;
  border-top: 2px solid tan;
  border-bottom: 2px solid tan;
  color: palevioletred;
  
}

.gameScore {
  font-weight: 700;
  font-size: 20px;
  color: black;
}

.colorSquare {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  margin: 10px;
  border-bottom: 2px solid black;
}

.hard {
  display: none;
}

#Green:hover {
  border: 2px solid #66FF75;
}

.greenDefault {
  background-color: #008000;
}

.GreenHighlight {
  background-color: #00FF00;
}


#Blue:hover {
  border: 2px solid #00A9FF;
}

.blueDefault {
  background-color: #002080;
}

.BlueHighlight {
  background-color: #0040ff;
}

#Red:hover {
  border: 2px solid #FF5A5C;
}

.redDefault {
  background-color: #800000;
}

.RedHighlight {
  background-color: #ff0000;
}

#Yellow:hover {
  border: 2px solid #FFFB78;
}

.yellowDefault {
  background-color: #cccc00;
}

.YellowHighlight {
  background-color: #ffff00;
}

#Orange:hover {
  border: 2px solid #FFBE00;
}

.orangeDefault {
  background-color: #cc8400;
}

.OrangeHighlight {
  background-color: #ffae19;
}

#Purple:hover {
  border: 2px solid #b266b2;
}

.purpleDefault {
  background-color: #4c004c;
}

.PurpleHighlight {
  background-color: #8c198c;
}