/* begin heading styling, setting up grid between header and gameboard */

header {
  grid-area: head;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header h1 {
  font-family: 'Amatic SC', cursive;
  border: 1px solid black;
  font-size: 2rem;
  padding: .75rem 0;
  letter-spacing: .25rem;
  margin: .5% 2% 0 2%;
  text-align: center;
  width: 96%;
}

header p {
  text-align: justify;
  margin: 1% 2%;
  font-family: "Work Sans", sans-serif;
  font-size: 1rem;
  letter-spacing: .08em;
}


/* begin gameboard styling, setting up grid between header and gameboard */

#gameboard {
  height: 45vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border: 1px solid black;
  margin: 0 2%;
  grid-area: play;

}

#container {
  height: 100vh;
  width: 85%;
  margin: 0 auto;
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
  display: grid;
  grid-template-areas:
  "head"
  "play"
  "track";
}

/* syling the tower column */

[data-stack] {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 90%;
  width: 101px;
  background-color: lightgrey;

}

/* styling the blocks */

[data-block] {
  height: 25px;
}

[data-block="25"] {
  width: 25px;
  background-color: #CCF1E2;
  border: .5px solid black;
}

[data-block="50"] {
  width: 50px;
  background-color: #96D7C0;
  border: .5px solid black;

}

[data-block="75"] {
  width: 75px;
  background-color: #73CAAB;
  border: .5px solid black;

}

[data-block="100"] {
  width: 100px;
  background-color: #46A88A;
  border: .5px solid black;
}


/* styling for all three towers, including their text */

.stacks {

  font-family: 'Amatic SC', cursive;
  font-size: 1em;
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: .08em;
  display: flex;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

#tracker3{
    cursor:pointer;
}
#tracker3:hover{
    background-color: black;
}

/* styling for the trackers section, which includes both tracker boxes and their text */

#trackers {
  grid-area: track;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  font-family: 'Amatic SC', cursive;
  font-size: 1em;
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: .08em;
  height: 100%;
}


/* styling for just the boxes containing the numbers to be tracked */

.trackerbox {
  height: 1.5em;
  width: 3.5em;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: salmon;
}

/* styling for the individual tracker boxes + their text */

.trackers {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*margin-bottom: 1rem;*/
}

#reset:hover {
  background-color: black;
  border: 1px solid black;
}


#announcewin {
  width: 960px; /* Full width */
  height:480px;
  max-height: 480px;
  background-image: url("https://media3.giphy.com/media/l0HlSDiA6WUytl9oA/giphy.gif");
  background-repeat: repeat;
  background-size: contain;
}

#playagain {
  background-color: black;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: .7em;
  width: 100%;
  max-width: 960px;
  font-family: 'Amatic SC', cursive;
  font-size: 1.8em;
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: .08em;
  border-radius: 0;
}

#playagain:hover {
  background-color: white;
  color: black;
  border: 1px solid black;
}

footer {
    margin: .5% 2%;
    font-family: "Work Sans", sans-serif;
    font-size: 1em;
    letter-spacing: .08em;
}
body{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (max-width: 959px){
  #announcewin {
    height: 45vh;
    width: 45vh;
    max-width: 480px; /* Full width*/
    background-size: cover;
    background-position: center;


  }
  #playagain{
    width: 45vh;
    max-width:480px;
  }
}

@media (max-width: 780px){
  #gameboard{
      height: 40vh;
  }
  #container {
    width: 100%;
    height:auto;
    display: grid;
    grid-template-areas:
    "head"
    "play"
    "track";
  }
  #trackers {
    margin: .5% 2%;
    justify-content: space-between;
  }
}


@media (max-width: 550px){
  #tracker3 p {
    font-size: 1.5rem;
  }
  header h1{
    font-size: 2.5em;
    margin: 0 2%;
    width: 96%;
  }

  header p {
    margin: 1% 2%
  }

  #gameboard {
    margin: 0 2%;
  }

  .stacks {
    /* border: 2px solid red; */
    padding: .25rem;

  }

  [data-stack] {
    height: 98%;
  }

  #trackers {
    margin: 1% 2%;
  }
}