*{
  margin:0;
  padding:0;
}
.background{
  width:100%;
  height:100vh;
  background-image: url(./images/light-brick-wall.webp);
  filter:brightness(50%);
}
.gate-container{
  position:absolute;
  bottom:0;
  left: 50%;
  transform: translate(-50%); /*centers horizontally*/
}
.gate{
  width:40vmin;
  height:40vmin;
  z-index: 1;
  position: relative;
  left:-3%;
}
.gate:hover{
  cursor:pointer;
}
.black-facade{
  width:15vmin;
  height:32vmin;
  background-color: black;
  position: absolute;
  top:7vmin;
  left: 50%;
  transform: translate(-50%); /*centers horizontally*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.troll-main-page{
  width:90%;
  height:90%;
  z-index: 4;
}
.left-wall{
  left:0;
}
.right-wall{
  right:0;
}
.left-wall, .right-wall{
  position:absolute;
  top:0;
  width:30%;
  height:100vh;
  z-index: 1;
  background-image: url("./images/dark-brick-wall.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-title{
  position:absolute;
  top:10%;
  left:50%;
  transform: translate(-50%); /*centers horizontally*/
  z-index: 1;
}
.window{
  width:25vmin;
  height:25vmin;
  filter: brightness(60%);
}
.window:hover{
  filter:brightness(90%);
  cursor:pointer;
}
.flame, .fire{
  visibility: hidden;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%); /*centers */
  width:9vmin;
  height:9vmin;
}
.trollhole, .whack-a-troll{
  text-align: center;
  position:absolute;
  top:25%;
}
.troll-scroll{
  position: absolute;;
  top:50%;
  left:50%;
  transform: translate(-50%);
  z-index: 1;
  text-align: center;
}