*{
  box-sizing: border-box
}
#game-container {
  width: 300px;
  height: 400px;
  border: 1px solid black;
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
}
#high-scores-container{
  width: 300px;
  height: 400px;
  border: 1px solid rgb(53, 53, 53);
  border-radius: 2px;

  margin: 0 auto;
  display: none;

}
#about-container{
  display: none;
  overflow-wrap: normal;
  overflow: hidden;
   width: 300px;
  height: 400px;
  border: 1px solid rgb(53, 53, 53);
  border-radius: 2px; 
  padding: 10px;
  font-family: 'lato';
   margin: auto; 

}
#shop-container{
  display: none;
  flex-wrap: wrap;

  width: 300px;
  height: 400px;
  border: 1px solid rgb(53, 53, 53);
  border-radius: 2px;

  margin: 0 auto;
  padding-top: 5px

}
#shop-container>h1{
width: 100%;
}
.button-container{
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  
}
button{
  border: none;
  text-align: center;
  padding: 3px 15px;
  margin-right: 3px;
  width: auto;
}
#high-scores-button{
display: block;
}
#return-button{
  display: none;
  width: 100px;
  text-align: center;
  justify-content: center;
  margin: auto;


}

#character {
  width: 40px;
  height: 25px;
  position: absolute;
  bottom: 200px;
  left: 130px;
  background-image: url("images/birdRight.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;

}

#score {
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: auto;
  font-size: 55px;
  position: absolute;
  left: 130px;
  top: 150px;
  font-family: 'Lato', sans-serif;
}
#upper-spikes {
  position: absolute;
  top: 0;
  left: 20px;
  background-image: url("images/upper-spike.png");
  height: 15px;
  width: 273px;
  background-repeat: repeat;
  background-size: contain;
  left: 12px;


}

#lower-spikes {
  width: 273px;
  height: 15px;
  background-image: url("images/bottom-spike.png");
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 12px;



}
#left-barrier {
  height: 380px;
  width: 20px;
  margin: auto;
}
#right-barrier {
  height: 380px;
  width: 20px;
  margin: auto;
}


.left-barrier-container-1,
.left-barrier-container-2,
.left-barrier-container-3,
.left-barrier-container-4,
.left-barrier-container-5,
.left-barrier-container-6,
.left-barrier-container-7,
.left-barrier-container-8,
.left-barrier-container-9,
.left-barrier-container-10 {
  height: 40px;
  width: 100%;
}
.right-barrier-container-1,
.right-barrier-container-2,
.right-barrier-container-3,
.right-barrier-container-4,
.right-barrier-container-5,
.right-barrier-container-6,
.right-barrier-container-7,
.right-barrier-container-8,
.right-barrier-container-9,
.right-barrier-container-10 {
  height: 10%;
  width: 100%;
  color: black;
}
.left-barrier {
  height: 100%;
  width: 100%;
  background-image: url("images/spike-left.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.right-barrier {
  height: 100%;
  width: 100%;
  background-image: url("images/spike-right.png");
  background-size: contain;
  background-repeat: no-repeat;
}
h1{
  text-align: center;
  font-family: 'Lato', sans-serif;

  font-size: 22px;
}
#best-score{
  position: absolute;
  width: 150px;
  font-size: 22px;
  margin: 0 auto;

  top: 50px;
  left: 50%;
  margin-left: -62px;
  font-family: 'lato'
}
#controls-tip{
  position: absolute;
  width: 200px;
  font-size: 22px;
  margin: 0 auto;
  top: 77px;
  left: 50%;
  margin-left: -90px;
  font-family: 'lato';
  color: grey;

}
.seed{
  width: 20px;
  height: 20px;
  background-image: url("images/seed.png");
  background-size: contain;

  position: absolute;
  left: 20px;
  bottom: 100px;
}
#games-played{
  position: absolute;
  bottom: 55px;
  left: 50%;
  margin-left: -75px;
  font-size: 22px;
  font-family: 'lato'

}
#seeds-collected{
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -42px;
  font-size: 22px;
  font-family: 'lato'


}
.bird-row{
  width: 100%;
  height: 30px;
  display: flex;
}
#buy-bird-icon{
  background-image: url("images/birdAltRight.png");
  background-size: contain;
  background-repeat: no-repeat;

  width: 100px;
  height: 100%;
}