/*font-family: 'Luckiest Guy', cursive;
font-family: 'Raleway', sans-serif;*/



/*----- STYLES FOR START SCREEN -----*/

* {
  font-family: 'Raleway', sans-serif;
}

#start_screen h1 {
  font-family: 'Luckiest Guy', cursive;
  color: white;
  font-size: 5em;
  text-shadow: 2px 3px 6px rgba(0,0,0,0.5);
  margin-bottom: 10px;
}

#start_screen h2 {
  color: gray;
}

#start_screen img {
  width: 80%;
}

#start_screen, #win_screen, #lose_screen {
  width: 100%;
  height: 100%;
  top: 0px;
  background-color: #ADCFCF;
  position: fixed;
  z-index: 100;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#win_screen, #lose_screen {
  background-color: rgba(255, 255, 255, 0.8); /* 0.5 - semi-transparent */
  visibility: hidden;
}

#win_box, #lose_box {
  background-color: #ADCFCF;
  border-radius: 5px;
  padding: 0 15px 30px 15px;
  width: 60%;
  min-width: 200px;
  box-shadow: 2px 3px 6px rgba(0,0,0,0.5)
}

#win_screen p, #lose_screen p {
  font-size: 1em;
  margin-bottom: 30px;
}

button, a {
  font-size: 1.2em;
  color: gray;
  background-color: #FFFA8E;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
}

a {
  text-decoration: none;
  border: 2px solid #B3B3B3;
  box-shadow: 2px 3px 6px rgba(0,0,0,0.5)
}

#easy_button:hover, a:hover {
  padding: 10px 15px;
  background-color: gray;
  color: white;
}


/*------ STYLES FOR GAME BOARD ------*/
body {
  background:#ADCFCF;
  margin: 0px;
}

header {
  text-align: center;
}

/*#game_easy {
  /*visibility: hidden;*/
/*}*/

#game_easy h1, #win_screen h1, #lose_screen h1 {
  text-align: center;
  font-family: 'Luckiest Guy', cursive;
  font-size: 3.5em;
  color: white;
  text-shadow: 2px 3px 6px rgba(0,0,0,0.5);
  margin-bottom: 0;
}

#win_message, #lose_message, #game_easy h2 {
  font-size: 1.2em;
}

#game_easy h2 {
  background-color: #FFFA8E;
  padding: 5px;
}

#gamestats {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  max-width: 550px;
}

#hearts {
  padding-left: 5%;
}

#timer {
  padding-right: 5%;
}

#memory_board {
 max-width: 550px;
 margin: 0px auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

#memory_board > div {
 background: #03487B;
 background-image: url("https://durhamdill.files.wordpress.com/2017/08/swirl_pattern.png");
 background-repeat: no-repeat;
 margin: 1%;
 cursor: pointer;
 flex: 0 20%;
 border: 3px solid gray;
 border-radius: 10px;
 overflow: hidden;
}

#memory_board > div > img {
  width: 100%;
  height: 100%;
}

.hideImage img{
  visibility: hidden;
}

.showImage img {
  visibility: visible;
}

  @media screen and (max-width: 525px){
    #win_screen h1 {
      font-size: 2.5em;
    }
  }