body {
  background-color: black;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shadow {
  z-index: -1;
  position: absolute;
  content: "";
  right: 0;
  width: 50%;
  height: 100%;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
}

#flipbook {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.hard {
  color: black;
  font-weight: bolder;
  background-color: rgb(0, 0, 0);
}
.hard.p2 {
  background: linear-gradient(to right, white 0%, white 55%, #ebebeb 100%);
}
.hard.p7 {
  background: linear-gradient(to left, white 0%, white 55%, #ebebeb 100%);
}

.page {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pages {
  position: relative;
  background-color: black;
}
.pages.even {
  background: linear-gradient(to right, white 0%, white 55%, #ebebeb 100%);
}
.pages.even::after {
  content: "";
  position: absolute;
  cursor: pointer;
  width: 500px;
  top: 0;
  left: 0;
  height: 500px;
}
.pages.even::before {
  content: "";
  position: absolute;
  cursor: pointer;
  width: 500px;
  bottom: 0;
  left: 0;
  height: 500px;
}
.pages.odd {
  background: linear-gradient(to left, white 0%, white 55%, #ebebeb 100%);
}
.pages.odd::after {
  content: "";
  position: absolute;
  cursor: pointer;
  width: 500px;
  top: 0;
  right: 0;
  height: 500px;
}
.pages.odd::before {
  content: "";
  position: absolute;
  cursor: pointer;
  width: 500px;
  bottom: 0;
  right: 0;
  height: 60px;
}

.button {
  border-radius: 50%;
  height: 70px;
  width: 70px;
  font-size: 50px;
  margin: 10px;
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button:hover {
  background-color: #e7e7e7;
}

.info {
  text-align: center;
  padding-top: 5px;
}


.background {
  position: absolute;
}

.trans {
  position: absolute
}


.gif1 {
  position: absolute;
  width: 47.7%;
  left: 0.6%;
  top: 0%;
}

.gif2 {
  position: absolute;
  width: 46%;
  right: 2.7%;
  bottom: 0%;
}

.gif3 {
  position: absolute;
  width: 48%;
  right: 1%;
  top: 0%;

}

.gif4 {
  position: absolute;
  width: 46%;
  left: 2%;
  bottom: 0%;
}

.gif5 {
  position: absolute;
  width: 60%;
  left: 5.5%;
  
}

.gif6 {
  position: absolute;
  width: 60%;
  right: 3%;
 
}

.gif7 {
  position: absolute;
  width: 45%;
  left: 2%;
  bottom: 0.2%;
}

.gif8 {
  position: absolute;
  width: 45%;
  top: 0%;
  right: 2.5%;
}

.gif9 {
  position: absolute;
  width: 56%;
  top: 8%;
  left: 11%;
}

.gif10 {
  position: absolute;
  width: 56%;
  right: 11%;
  top: 8%;
}

.gif11 {
  position: absolute;
  width: 38.5%;
  left: 2%;
  top: 0%;
}

.gif12 {
  position: absolute;
  width: 38.5%;
  left: 2%;
  bottom: 0.5%;
}

.gif13 {
  position: absolute;
  width: 52%;
  left: 11%;
  top: 15%;
}

.gif14 {
  position: absolute;
  width: 52%;
  right: 14%;
  top: 15%;
}

.gif15 {
  position: absolute;
  width: 38.7%;
  right: 2%;
  bottom: 0.2%;
  
}

.gif16 {
  position: absolute;
  width: 58%;
  left: 3.2%;
  top: 13%;
}

.gif17 {
  position: absolute;
  width: 58%;
  right: 3%;
  top: 13%;
}

.gif18 {
  position: absolute;
  left: 13%;
  width: 47%;
  top: 19%;

}

.gif19 {
  position: absolute;
  width: 46.8%;
  right: 1.5%;
  top: 20.1%;
  
}

.gif20 {
  position: absolute;
  width: 47%;
  right: 9%;
  top: 19%;
}

.gif21 {
  position: absolute;
  width: 46.8%;
  right: 2.2%;
  top: 20.1%;
}

.gif22 {
  position: absolute;
  width: 75%;
  left: 11%;
  top: 1%;
}

.gif23 {
  position: absolute;
  width: 51%;
  right: 1.5%;
  bottom: 0.1%;
}

.gif24 {
  position: absolute;
  width: 45%;
  left: 1%;
  top: 1.2%;
}

.gif25 {
  position: absolute;
  width: 51%;
  right: 1%;
  bottom: 0.1%;
}

.gif26 {
  position: absolute;
  width: 48%;
  left: 1%;
}

.gif27 {
  position: absolute;
  width: 48%;
  right: 0%;

}

.gif28 {
  position: absolute;
  width: 80%;
  right: 4%;

}

.gif29 {
  position: absolute;
  width: 61%;
 left: 5.5%;
  top: 12%;
}

.gif30 {
  position: absolute;
  width: 61%;
  right: 6%;
  top: 12%;
}

.gif31 {
  position: absolute;
  width: 45.5%;
  left: 3.5%;
 
}

.gif32 {
  position: absolute;
  width: 45.5%;
  right: 1.5%;
 
}

.gif33 {
  position: absolute;
  width: 45.5%;
  right: 3%;
 
}

.gif34 {
  position: absolute;
  width: 54.7%;
  left: 5%;

}

.gif35 {
  position: absolute;
  width: 54.7%;
  right: 6.3%;

}

.gif36 {
  position: absolute;
  width: 80%;
  left: 1%;
 
}

.gif37 {
  position: absolute;
  width: 46%;
  right: 3.5%;
  top: 20.7%;
}

.gif38 {
  position: absolute;
  width: 46%;
  left: 2%;
  top: 20.7%;
}

.gif39 {
  position: absolute;
  width: 47.5%;
  left: 0.4%;
  top: 21%;
}

.gif40 {
  position: absolute;
  width: 47.5%;
  right: 1%;
  top: 21%;
}

.gif41 {
  position: absolute;
  width: 80%;
  right: 0%;
}