@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

* {
  margin: 0;
  padding: 0;
  display: inline-block;
}

body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: black;
  overflow: hidden;
}
p{
  text-align: center;
  font-family: 'Indie Flower', cursive;
  font-size: 1.3rem;
  margin-top: -18vh;
  color: rgb(250, 230, 201);
  z-index: 20;
}
  .background {
      position: relative;
      width: auto;
      height: 100vh;
  }
  .music img{
    position: absolute;
    top: 3%;
    right: 3%;
    width: 50px;
    height: 50px;
    
  }
  img{
    width: auto;
     height: 80%;
  }
  .start{
    position: absolute;
    z-index: 10;
    top: 25%;
    left: 35%;
    width: 50%;
    height: auto;
    transition: ease-in-out 2s;
  }
  .start a img {
    width: 100%;
      height: auto;
      cursor: pointer;
   }
  .start:hover{
      transform: rotate(10deg);
  }
  .hole{
    position: absolute;
    z-index: 10;
    top: 0%;
    right: 0%;
    width: 32%;
    height: auto;
    transition: ease-in-out 2s;
  }
  .hole a img {
    width: 100%;
      height: auto;
      cursor: pointer;
   }
  .hole:hover{
      transform: rotate(10deg);
      
  }
  .ladder{
    position: absolute;
    z-index: 10;
    top: 0%;
    left: 2%;
    width: 27%;
    height: auto;
    transition: ease-in-out 2s;
  }
  .ladder a img {
    width: 100%;
      height: auto;
      cursor: pointer;
   }
.ladder:hover{
      transform: rotate(10deg);
  }
  .arrowtobottom{
    position: absolute;
    z-index: 10;
    top: 60%;
    left: 45%;
    width: 27%;
    height: auto;
    transition: ease-in-out 1s;
  }
  .arrowtobottom a img {
    width: 50%;
      height: auto;
        transform: rotate(90deg);
      cursor: pointer;
   }
   .arrowtobottom:hover{
      width: 30%;
  }
  .arrowtotop{
    position: absolute;
    z-index: 10;
    top: 0%;
    left: 45%;
    width: 27%;
    height: auto;
    transition: ease-in-out 1s;
  }
  .arrowtotop a img {
    transform: rotate(-90deg);
    width: 50%;
      height: auto;
      cursor: pointer;
   }
   .arrowtotop:hover{
      width: 30%;
  }
  .restart{
    position: absolute;
    z-index: 10;
    bottom: 22%;
    right: -10%;
    width: 27%;
    height: auto;
    transition: ease-in-out 1s;
  }
  .restart a img {
    width: 50%;
      height: auto;
      cursor: pointer;
   }
   .restart:hover{
      width: 30%;
  }
  .rhole{
    position: absolute;
    z-index: 10;
    top: 2%;
    right: 0%;
    width: 44%;
    height: auto;
    transition: ease-in-out 1s;
  }
  .rhole a img {
    width: 100%;
      height: auto;
      cursor: pointer;
   }
  .rhole:hover{
    width: 46%    
  }
  .lhole{
    position: absolute;
    z-index: 10;
    top: 0%;
    left: 0%;
    width: 40%;
    height: auto;
    transition: ease-in-out 1s;
  }
  .lhole a img {
    width: 100%;
      height: auto;
      cursor: pointer;
   }
  .lhole:hover{
    width: 42%    
  }
  .worm{
    position: absolute;
    z-index: 10;
    top: 43%;
    left: 43%;
    width: 27%;
    height: auto;
    transition: ease-in-out 1s;
  }
  .worm a img {
    width: 50%;
      height: auto;
      cursor: pointer;
   }
   .worm:hover{
      width: 40%;
  }
  .worms{
    position: absolute;
    z-index: 10;
    top: 16%;
    left: 52%;
    width: 27%;
    height: auto;
    transition: ease-in-out 1s;
  }
  .worms a img {
    width: 30%;
      height: auto;
      cursor: pointer;
   }
   .worms:hover{
      width: 40%;
      left: 50%;
  }
  .dig{
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 30%;
    height: auto;
    transition: ease-in-out 1s;
  }
  .dig a img {
    transform: rotate(90deg);
    width:30%;
      height: auto;
      cursor: pointer;
   }
   .dig:hover{
      width: 40%;
  }
  .wormss{
    position: absolute;
    z-index: 10;
    top: 30%;
    left: 52%;
    width: 100%;
    height: auto;
    transition: ease-in-out 1s;
  }
  .wormss a img {
    width: 30%;
      height: auto;
      cursor: pointer;
   }
   .wormss:hover{
      width: 150%;
      left: 35%;
  }
  .arrowtoleft{
    position: absolute;
    z-index: 10;
    top: 26%;
    left: 0%;
    width: 27%;
    height: auto;
  } 
  .arrowtoleft a img {
    width: 50%;
      height: auto;
        transform: rotate(180deg);
      cursor: pointer;
   }
   .arrowtoleft:hover{
      width: 30%;
  }
  .arrowtoright{
    position: absolute;
    z-index: 10;
    top: 26%;
    right: -12%;
    width: 27%;
    height: auto;
  } 
  .arrowtoright a img {
    width: 50%;
      height: auto;
      cursor: pointer;
   }
   .arrowtoright:hover{
      width: 30%;
  }
  .rlasthole{
    position: absolute;
    z-index: 10;
    top: 20%;
    right: 0%;
    width: 44%;
    height: auto;
    transition: ease-in-out 1s;
  }
  .rlasthole a img {
    width: 100%;
      height: auto;
      cursor: pointer;
   }
  .rlasthole:hover{
    top: 10%;
    width: 55%    
  }
  .fatworm{
    position: absolute;
    z-index: 10;
    top: 45%;
    left: 20%;
    width: 27%;
    height: auto;
  } 
  .fatworm a img {
    width: 50%;
      height: auto;
        transform: rotate(180deg);
      cursor: pointer;
   }
   .fatworm:hover{
      width: 30%;
  }
  .fattestworm{
    position: absolute;
    z-index: 10;
    top: 50%;
    right: -5%;
    width: 27%;
    height: auto;
  } 
  .fattestworm a img {
    width: 50%;
      height: auto;
      cursor: pointer;
   }
   .fattestworm:hover{
      width: 28%;
  }
  .ending{
    position: absolute;
    z-index: 10;
    top: 20%;
    left:40%;
    width: 50%;
    height: auto;
    transition: ease-in-out 2s;
  }
  .ending a img {
    width: 90%;
      height: auto;
      cursor: pointer;
   }
  .ending:hover{
      transform: rotate(20deg);
  }