body {
  background-color: rgb(255, 255, 255);
  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: rgb(255, 255, 255);
  font-weight: bolder;
  background-color: rgb(255, 255, 255);
}
.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;
}
.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: 70%;
  left: 16%;
  top: 2%;
}


.gif3 {
  position: absolute;
  width: 42.3%;
  top: 0.6%;
  right: 2%;
}

.gif4 {
  position: absolute;
  width: 42.3%;
  right: 2%;
  top: 1%;
}

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


.gif7 {
  position: absolute;
  width: 61%;
  top: 11.2%;
  left: 3%;
}

.gif8 {
  position: absolute;
  width: 61.5%;
  right: 8.5%;
  top: 9%;
}


.gif14 {
  position: absolute;
  width: 69%;
  right: 16%;
  top: 3.5%;
}

.gif17 {
  position: absolute;
  width: 70.6%;
  left: 14.5%;
  top: 2.8%;
}

.gif18 {
  position: absolute;
  left: 3%;
  bottom: 6.5%;
  width: 62%;

}

.gif19 {
  position: absolute;
  width: 70%;
  right: 16%;
  top: 2.6%;
}

.gif20 {
  position: absolute;
  width: 70%;
  left: 19%;
  top: 2.6%;
}

.gif21 {
  position: absolute;
  width: 77%;
  left: 2%;
}

.gif22 {
  position: absolute;
  width: 76%;
  left: 11%;
}

.gif23 {
  position: absolute;
  width: 75%;
  left: 5%;
}


.gif24 {
  position: absolute;
  width: 70%;
  left: 15.2%;
  top: 3%;
}

.gif25 {
  position: absolute;
  width: 70%;
  left: 14.2%;
  top: 3%;
}