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: 55.5%;
  left: 2%;
  top: 2%;
}


.gif2 {
  position: absolute;
  width: 62.2%;
  left: 5%;
  top: 10%;
}

.gif3 {
  position: absolute;
  width: 62.5%;
  right: 5.4%;
  top: 10%;
}

.gif4 {
  position: absolute;
  width: 50%;
  right: 2.3%;
  top: 0.4%;
}

.gif5 {
  position: absolute;
  width: 62%;
  left: 4%;
  top: 10.8%;
}

.gif6 {
  position: absolute;
  width: 62%;
  right: 2%;
  top: 10.8%;
}

.gif7 {
  position: absolute;
  width: 80.5%;
}

.gif8 {
  position: absolute;
  width: 57.5%;
  left: 1.8%;
}

.gif9 {
  position: absolute;
  width: 57.5%;
  right: 2%;
}