html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8cbb1;
}

.cube {
  perspective: 1200px;
  transform-style: preserve-3d;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 180px;
  height: 280px;
  transition: all 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
  top: 10px;
  transform: rotateY(0deg) rotateX(40deg) rotateZ(-20deg) scale(1);
}

.cube_inner {
  width: 210px;
  height: 280px;
  transform-style: preserve-3d;
}

.cube_inner div {
  position: absolute;
  width: 210px;
  height: 280px;
  background: #ff2ba2;
  transform-origin: 50% 50%;
}

.cube_inner div.cube_front {
  transform-origin: 1px 0;
  backface-visibility: hidden;
  transform: translateZ(6px);
  transition: transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
  background: url("./images/magazine_cover2.webp");
  background-size: cover !important;
}

.cube_inner div.page_left {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.24);
  transform-origin: 1px 0;
  transition: transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
  transform: translateZ(5px -1);
  background: url("./images/magazine_left2.webp");
  background-size: cover !important;
}

.cube_inner div.page_right {
  transform: translateZ(4px);
  background: url("./images/magazine_right2.webp");
  background-size: cover !important;
}

.cube_inner div.cube_back {
  transform: translateZ(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.cube_inner div.cube_left {
  width: 10px;
  transform: rotateY(90deg) translateZ(-5px);
  background-color: #062738;
}

.cube_inner div.cube_right {
  width: 10px;
  transform: rotateY(90deg) translateZ(205px);
  background-color: #d80079;
}

.cube_inner div.cube_top {
  height: 10px;
  transform: rotateX(90deg) translateZ(5px);
  background-color: #b00063;
}

.cube_inner div.cube_bottom {
  height: 10px;
  transform: rotateX(90deg) translateZ(-275px);
  background-color: #fff;
}

hr {
  background: #09d4fb;
  width: 16px;
  float: left;
  height: 2px;
  border: none;
}

.box {
  background-image: url("./images/wood_panels.webp");
  background-size: cover;
  width: 500px;
  max-width: 100%;
  background-color: #e8cbb1;
  background-blend-mode: difference;
  height: 400px;
  position: relative;
  transition: width 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), background-color 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), background-position 0.6s 0.51s ease;
}

.box:hover {
  width: 660px;
  background-position: -300px 0;
}

.box:hover .cube {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1) translateY(50px) translateX(-220px);
}

.box:hover .cube .cube_front {
  transform: translateZ(5px) rotatey(-179deg);
}

.box:hover .cube .page_left {
  transform: translateZ(5px) rotatey(-180deg);
}

.box:hover .description {
  left: 426px;
  top: -10px;
  height: 160px;
  width: 200px;
}

.box:hover .pink {
  transform: scale(1) rotate(-10deg);
  transition: all 0.7s 0.3s cubic-bezier(0.815, 0.005, 0.18, 1.005);
}

.box:hover .holder {
  width: 700px;
}

.box:hover .big {
  opacity: 1;
  top: 180px;
  left: 180px;
}

.box:hover .button {
  z-index: 3;
  bottom: 82px;
  left: 510px;
  background: #298aaf;
}

.box .pink {
  position: absolute;
  transition: all 0.7s 0s cubic-bezier(0.815, 0.005, 0.18, 1.005);
  width: 80px;
  border-radius: 100px;
  height: 62px;
  z-index: 2;
  background: black;
  color: white;
  left: 160px;
  top: 22px;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
  line-height: 20px;
  padding: 18px 0 0;
  box-shadow: 0 0 0 black;
  transform: scale(0) rotate(-80deg);
}

.box .holder {
  transition: all 1s 0.2s;
  overflow: hidden;
  width: 500px;
  height: 400px;
  background: transparent;
  position: absolute;
}

.box .big {
  background: #47e1ff;
  padding: 20px;
  transition: all 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
  position: absolute;
  opacity: 1;
  z-index: 2;
  top: -136px;
  left: 90px;
  width: 370px;
}

.box .big hr {
  background: white;
}

.box .big h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  margin: 0;
  font-weight: normal;
  color: #583447;
}

.box .big p {
  clear: left;
  margin: 0;
  font-size: 12px;
  font-family: Georgia, "Times New Roman", serif;
  opacity: 0.8;
  color: #583447;
}

.box .button {
  background: #09d4fb;
  position: absolute;
  bottom: 14px;
  cursor: pointer;
  transition: bottom 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), left 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), box-shadow 1s, background-color 1s;
  z-index: 4;
  left: 360px;
  padding: 10px 24px;
  color: white;
  box-shadow: 0 0 0 #f31893;
  border-radius: 100px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
}

.box .description {
  transition: all 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
  background: black;
  position: absolute;
  height: 86px;
  z-index: 1;
  top: 240px;
  width: 400px;
  color: white;
  left: 0;
  padding: 22px;
}

.box .description h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  margin: 0;
  font-size: 18px;
}

.box .description p {
  clear: left;
  font-family: Georgia, "Times New Roman", serif;
  margin: 0;
  font-weight: normal;
  font-size: 12px;
  opacity: 0.8;
}