body {
  font-size: 16px;
  max-width: 100vw;
  display: grid;
  grid-template: 10% 80% 10% / 100vw;
  grid-template-areas:
  "header header header"
  "main main main"
  "footer footer footer";
}

header {
  grid-area: header;
  margin: 0;
  padding: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 125, 0, 1);
}

footer {
  grid-area: footer;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: rgba(255, 125, 0, 1);
}

#heading {
  font-size: 269%;
  font-family: 'Delius Unicase', cursive;
  margin: 0 0 8px 0;
  text-shadow: 1px 1px 1px #FFF;
}

#sub-heading {
  font-size: 93%;
  font-family: 'Roboto', sans-serif;
}

main {
  grid-area: main;
  display: grid;
  grid-template: 8% 9% 70% 7% / repeat(6, 1fr);
  grid-template-areas:
  "menu menu menu menu menu menu"
  "playReset playReset playReset playReset playReset playReset"
  "board board board board board board"
  "timeStrScr timeStrScr timeStrScr timeStrScr timeStrScr timeStrScr";
  width: 100vw;
  /* min-height: calc(100vw - 70px); */
}

#gameboard {
  grid-area: board;
  width: 100%;
  /* margin: 0 0 40px 0; */
  padding: 3% 0;
  min-height: 59vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* background-color: #ddd; */
}

.square {
  border: 1px solid #FF7D00;
  margin: 5px;
  width: 20%;
  height: 100px;
  padding: 0 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.card-cover {
  position: absolute;
  background:  #FF9A39;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  opacity: 1;
  /* transition: opacity .1s; */
}

.card-show {
  opacity: 0;
  /* animation-name: card-show;
  animation-duration: .3s;
  animation-timing-function: linear; */
}

/* @keyframes card-show {
  0% { height: 100px;}
  25% { height: 75px;}
  50% { height: 50px;}
  75% { height: 25px;}
  100% { height: 0;}
} */



p, .span-for-content {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
}

img {
  width: 100%;
}


/*=======================
      Control Panel
=========================*/
#time-strikes-score {
  grid-area: timeStrScr;
  display: grid;
  grid-template-columns: 30% 40% 30%;
  grid-template-areas:
  "score time strikes";
  width: 100%;
  margin: 10px 0 5px 0;
}

.ctrl-headers {
  font-size: 1.5rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: rgba(179, 30, 201, 1);
  margin-bottom: 5px;
}

#score, #strikes, #time {
  font-size: 2rem;
  font-family: 'Delius Unicase', cursive;
}

.time-container {
  grid-area: time;
}
.score-container {
  grid-area: score;
}
.strikes-container {
    grid-area: strikes;
}

.time-container,
.score-container,
.strikes-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1% 5%;
}

#menu-container {
  grid-area: menu;
  margin: 12px 0 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#menu {
  text-align: center;
  text-align-last: center;
  padding-left: 8px;
  width: 180px;
  height: 30px;
  font-size: 1.1rem;
  background: #fa7c02;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  text-transform: uppercase;
  outline-color: black;
  outline-width: thin;
  appearance: none;
  border-bottom: 1px solid #757575;
}

/* Start Playing Game Button */
#play-reset-container {
  grid-area: playReset;
}

#play-again-container {
  grid-area: playAgain;
}

.btn {
  margin: 5px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  padding: 5px 40px;
  font-size: 1.3rem;
  font-family: 'Delius Unicase', cursive;
  background-color: rgba(179, 30, 201, 1);
  color: #fff;
  border: 2px solid rgba(0, 0, 0, .5);
  border-radius: 25px;
  transition: all .2s;
  outline: none;
}

button:hover {
    background-color: rgba(179, 30, 201, .9);
}

button:active {
  background-color: rgba(180, 255, 54, 1);
  color: #000;
  border: 2px solid black;
}

.hide {
  display: none;
}


/* Timer */
.time-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#time span {
  width: 100px;
  letter-spacing: 2px;
}


/*=======================
    Winner Modal Window
=========================*/
.results {
  position: absolute;
  z-index: 1;
  top: 25%;
  left: -62vw;
  width: 80%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 20px 0;
  background-color: #ffd26b;
  border-radius: 25px;
  box-shadow: 2px 1px 15px black;
  opacity: 0;
  transition: all .5s;
}

#loser-x {
  display: none;
  position: absolute;
  z-index: 1;
  top: 5%;
  text-shadow: 1px 1px 2px black;
}

#loser-symbol {
  font-size: 50rem;
  color: rgb(198, 64, 56);
}


.show-results {
  opacity: 1;
  left: 9vw;
}

#top-five-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  border: 1px solid black;
  padding: 10px 3px;
  font-family: 'Roboto', sans-serif;
}

#you-won-msg {
  font-size: 2.2rem;
  font-weight: bold;
  font-family: 'Delius Unicase', cursive;
}

#top-five-heading {
  font-size: 1.5rem;
  color: #ff6402;
  font-weight: bold;
  font-family: 'Delius Unicase', cursive;
}

#winners-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 63%;
  padding: 10px 0 10px;
}

#win-time span {
  font-size: 1.3rem;
  font-weight: bold;
  font-family: 'Delius Unicase', cursive;
  color: #ff6402;
}

.placing {
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  width: 100%;
  line-height: 1.5;
  font-weight: bold;
}

.placing span {
  color: #b31fc9;
  margin: 0 8px;
}


/*========================
--------------------------
      MEDIA QUERIES
--------------------------
=========================*/

/* Tablets - target is Portrait mode */
@media screen and (min-width: 47.9375rem) {
  main {
    grid-template-areas:
    ". . menu menu . ."
    ". timeStrScr timeStrScr timeStrScr timeStrScr ."
    ". . playReset playReset . ."
    "board board board board board board";
  }

  #gameboard {
    min-height: 80vw;
  }

  .square {
    width: 21%;
    height: 150px;
  }

  .card-cover {
    height: 150px;
  }

  .span-for-content {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  img {
    width: 88%;
  }

  .sign-lang-img {
    width: 60%;
    border: 2.5px solid black;
  }

  #menu-container {
    margin: 20px 0 15px 0;
  }

  .results {
    top: 33%;
    height: 37%;
  }
}

@media screen and (min-width: 63.9375rem) {
  #gameboard {
    min-height: 91vw;
  }

  .square {
    width: 22%;
    height: 200px;
  }

  .card-cover {
    height: 200px;
  }

  .span-for-content {
    font-size: 2.4rem;
  }

  img {
    width: 95%;
  }

  .results {
    width: 50%;
    height: 30%;
  }

  .show-results {
    left: 25vw;
  }
}



/* iPad Pro Landscape orientation */
/* @media only screen and (min-width: 63rem) and (orientation: landscape){
  header {
    padding: 1%;
    margin-bottom: 10px;
  }

  footer {
    padding: 1%;
    margin-top: 10px;
  }

  main {
    grid-template: 5% 5% 5% 85% / repeat(2, 11%) 78% 1%;
    grid-template-areas:
    "timeStrScr timeStrScr board board board ."
    "menu menu board board board ."
    "playReset playReset board board board ."
    ". . board board board .";
  }

  #gameboard {
    min-height: 56.5vw;
  }

  #time-strikes-score {
    margin: 10px 0 0 6px;
  }

  #score, #strikes, #time {
    font-size: 1.2rem;
  }

  #play-reset-container {
    align-self: center;
  }

  .square {
    width: 22%;
    height: 150px;
  }

  .card-cover {
    height: 150px;
  }

  .span-for-content {
    font-size: 2rem;
  }

  img {
    width: 80%;
  }

  .results {
    height: 48%;
  }

  #loser-x {
    top: 0;
    left: 24%;
  }
} */


/* iPad Pro Landscape orientation */
/* @media only screen and (min-width: 81.25rem) and (orientation: landscape) {
  #gameboard {
    min-height: 64vw;
  }

  .square {
    height: 200px;
  }

  .card-cover {
    height: 200px;
  }

  #score, #strikes, #time {
    font-size: 2rem;
  }

  img {
    width: 100%;
  }
} */

/* Desktops */
@media screen and (min-width: 75rem) {
  header {
    padding: 1%;
    margin-bottom: 10px;
  }

  footer {
    padding: 1%;
    margin-top: 10px;
  }

  main {
    grid-template: 5% 5% 5% 85% / repeat(2, 10%) 78% 2%;
    grid-template-areas:
    "timeStrScr timeStrScr board board board ."
    "menu menu board board board ."
    "playReset playReset board board board ."
    ". . board board board .";
  }

  #gameboard {
    min-height: 43vw;
    padding: 0;
  }

  #time-strikes-score {
    margin: 10px 0 0 6px;
  }

  #play-reset-container {
    align-self: center;
  }

  .square {
    width: 22%;
    height: 150px;
  }

  .card-cover {
    height: 150px;
  }

  .span-for-content {
    font-size: 2rem;
  }

  img {
    max-width: 80%;
    max-height: 80%;
  }

  .results {
    height: 48%;
  }

  #loser-x {
    top: 0;
    left: 24%;
  }
}