canvas {
  position: absolute;

  top: 0;
  left: 0;

  z-index: -1; 
}
.header{
  position: absolute;    
  margin: 0;
  padding: 10px;
  text-align: center;

  top: 5%;
  left: 15%;

  width: 69%;
  height: 12%;

  background:#506C64;

  z-index: 10;
}
.box{
  position: absolute;    
  margin: 0;
  padding: 10px;
  text-align: center;

  width: 24%;
  height: 24%;

  background:#506C64;

  z-index: 10;
}
#backButton{
  position: absolute;    
  margin: 0;
  padding: 10px;
  text-align: center;

  width: 8%;
  height: 8%;

  left: 3%;
  top: 3%;

  background:#506C64;
  visibility: visible;

  z-index: 10;
}
#moreButton{
  position: absolute;    
  margin: 0;
  padding: 10px;
  text-align: center;

  width: 11%;
  height: 8%;

  left: 80%;
  top: 85%;

  background:#506C64;
  visibility: hidden;

  z-index: 10;
}
#lessButton{
  position: absolute;    
  margin: 0;
  padding: 10px;
  text-align: center;

  width: 11%;
  height: 8%;

  left: 60%;
  top: 85%;

  background:#506C64;
  visibility: hidden;

  z-index: 10;
}
#topLeft{
  top: 33%;
  left: 7.5%;
}
#topMiddle{
  top: 33%;
  left: 37.5%;
}
#topRight{
  top: 33%;
  left: 67.5%;
}
#bottomLeft{
  top: 68%;
  left: 7.5%;
}
#bottomMiddle{
  top: 68%;
  left: 37.5%;
}
#bottomRight{
  top: 68%;
  left: 67.5%;
}
.whiteWordsHeader{
position: relative;
color:aliceblue;
font-size: 50px;
top: -20px;
}
.whiteWords{
position: relative;
color:aliceblue;
font-size: 50px;
top: -30px;
}
.whiteWordsSmall{
position: relative;
color:aliceblue;
font-size: 25px;
top: -20px;
}
.picture{
  width: 98%;
  height: 98%;
}