body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  background: #ccc;
}
.instrument-serif-regular {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.instrument-serif-regular-italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
}


h1{
  color: rgb(216, 212, 201);
  writing-mode:vertical-lr;
}
.profile-card-img {
  max-width: 40%;
      height: auto;
  display: flex;
  justify-content: left;
  align-items: left;
}
.book {
  transform-style: preserve-3d;
  position: relative;
  height: 300px;
  cursor: pointer;
  backface-visibility: visible;
}

.front, .back, .page1, .page2, .page3, .page4, .mainpage {
  transform-style: preserve-3d;
  position: absolute;
  width: 310px;
  height: 410px;
  top: 0; left: 0;
  transform-origin: left center;
  transition: transform .5s ease-in-out, box-shadow .35s ease-in-out;
  border-radius: 3px;
}

.front, .back {
  background: rgb(39, 88, 56);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 
}

.page1 { 
  background: #fafafa;
}

.page2 {
  background: #fafafa;
}

.page3 * {
  transform: scaleX(-1);
  background: #fafafa;
  border-right: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page4 {
  background: #fafafa;
  border-right: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book:hover .front {
  transform: rotateY(-160deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .page1 {
  transform: rotateY(-150deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .page2 {
  transform: rotateY(-30deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .page3 {
  transform: rotateY(-140deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .page4 {
  transform: rotateY(-40deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .back {
  transform: rotateY(-20deg) scale(1.1);
}