body {
  background-color: rgba(0, 0, 0, 0.03);
  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: white;
}
.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: white;
  background-attachment: fixed;
}
.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;
}

.back {
  position: absolute;
}



.gif1 {
  position: absolute;
  width: 80%;
  left: 8%;
}

.gif2 {
  position: absolute;
  width: 80%;
  left: 6%;
}

.gif3 {
  position: absolute;
  width: 73%;
  left: 8%;
}

.gif4 {
  position: absolute;
  width: 48%;
  top: 16%;
  left: 3%;
}

.gif5 {
  position: absolute;
  width: 80%;
  left: 8%;
  
}

.gif6 {
  position: absolute;
  width:66%;
  left: 2%;
  top: 4%;

}

.gif7 {
  position: absolute;
  width: 65%;
  right: 12%;
}

.gif8 {
  position: absolute;
  width: 52%;
  top: 22.9%;
  left: 4%;
}

.gif9 {
  position: absolute;
  width: 57%;
  top: 12%;
  left: 2%;
}

.gif10 {
  position: absolute;
  width: 47%;
  top: 19.5%;
  left: 3%;
}

.gif11 {
  position: absolute;
  width: 39%;
  bottom: 4%;
  right: 25%;
 
}

.gif12 {
  position: absolute;
  width: 80%;
  right: 11%;

}

.gif13 {
  position: absolute;
  width: 61%;
  top: 13%;
  left: 14%;
}

.gif14 {
  position: absolute;
  width: 70%;
  left: 12%;
}

.gif15 {
  position: absolute;
  width: 43%;
  top: 1%;
}

.gif16 {
  position: absolute;
  width: 56%;
  left: 1%;
  top: 10%;
}

.gif17 {
  position: absolute;
  width: 50.9%;
  top: 20%;
  left: 2%;
}

.gif18 {
  position: absolute;
  width: 65%;
  left: 1%;
}

.gif19 {
  position: absolute;
  width: 80%;
  right: 14%;
 
}

.gif20 {
  position: absolute;
  width: 64%;
  top: 2%;
  right: 20%;

}

.gif21 {
  position: absolute;
  width: 55.5%;
  bottom: 4.5%;
  right: 2%;
}

.gif22 {
  position: absolute;
  width: 55%;
  left: 4%;
  top: 13%;
  

}