* {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  box-sizing: border-box;
}
.card-container {
  transform-style: preserve-3d;
  perspective: 800px;
  perspective-origin: center center;
}

.card {
  margin: 20px auto 0;
  height: 200px;
  width: 300px;
  background-color: crimson;
  border-radius: 10px;
  border: 3px solid lightcoral;
  transition: all 1s ease-in-out;
  box-shadow: 7px 10px 5px 0px rgba(209, 209, 209, 0.75);
  -webkit-box-shadow: 7px 10px 5px 0px rgba(209, 209, 209, 0.75);
  -moz-box-shadow: 7px 10px 5px 0px rgba(209, 209, 209, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  color: white;
}

.card:hover {
  transform: rotateY(180deg) rotateZ(10deg);
}

.card-2 {
  margin: 20px auto 0;
  height: 200px;
  width: 300px;
  background-color: crimson;
  border-radius: 10px;
  border: 3px solid lightcoral;
  transition: all 1s ease-in-out;
  box-shadow: 7px 10px 5px 0px rgba(209, 209, 209, 0.75);
  -webkit-box-shadow: 7px 10px 5px 0px rgba(209, 209, 209, 0.75);
  -moz-box-shadow: 7px 10px 5px 0px rgba(209, 209, 209, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  color: white;
  position: relative;
  transform-style: preserve-3d;
}
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hide the backface when not facing the user */
  text-align: center;
}

.front {
  background-color: lightblue;
}
.back {
  background-color: lightcoral;
  transform: rotateY(180deg); /* Position the back face correctly */
}
.card-2:hover {
  transform: rotateY(180deg);
}

/* cube styling */
.cube-container {
  transform-style: preserve-3d;
  perspective: 800px;
  display: flex;
  margin-top: 100px;
  justify-content: center;
  align-items: center;
}
.cube {
  height: 300px;
  width: 300px;
  /* display: flex;
  justify-content: center;
  flex-wrap: wrap; */
  /* align-items: center; */
  font-size: 60px;
  color: white;
  animation: 5s linear 1s infinite forwards rotate;
  position: relative;
  transform: rotateX(-45deg) rotateY(45deg);
  transform-style: preserve-3d;
  perspective-origin: top;
}
.face {
  height: 100%;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
.front-face {
  background-color: black;
  transform: rotateY(0) translateZ(150px);
}
.back-face {
  transform: rotateY(180deg) translateZ(150px);
  background-color: chocolate;
}
.top-face {
  background-color: rgb(48, 20, 211);
  transform: rotateX(90deg) translateZ(150px);
}
.bottom-face {
  background-color: darkorange;
  transform: rotateX(-90deg) translateZ(150px);
}
.left-face {
  background-color: darkturquoise;
  transform: rotateY(-90deg) translateZ(150px);
}
.right-face {
  background-color: darkred;
  transform: rotateY(90deg) translateZ(150px);
}
@keyframes rotate {
  0% {
    transform: rotateX(0) rotateZ(0) rotateY(0);
  }
  100% {
    transform: rotateX(360deg) rotateZ(360deg) rotateY(360deg);
  }
}

/* 3d Image Carousel */
.carousel-container {
  display: flex;
  transform-style: preserve-3d;
  justify-content: center;
  align-items: center;
  perspective: 1600px;
  perspective-origin: center;
}
.carousel {
  position: relative;
  height: 603.6px;
  width: 603.6px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  animation: 10s linear infinite forwards rotate-carousel;
}
.carousel-item {
  height: 200px;
  width: 250px;
  position: absolute;
}
.carousel img {
  object-position: center;
}
.carousel-item:nth-of-type(1) {
  transform: rotateY(0deg) translateZ(301.8px);
}
.carousel-item:nth-of-type(2) {
  transform: rotateY(45deg) translateZ(301.8px);
}
.carousel-item:nth-of-type(3) {
  transform: rotateY(90deg) translateZ(301.8px);
}
.carousel-item:nth-of-type(4) {
  transform: rotateY(135deg) translateZ(301.8px);
}
.carousel-item:nth-of-type(5) {
  transform: rotateY(180deg) translateZ(301.8px);
}
.carousel-item:nth-of-type(6) {
  transform: rotateY(225deg) translateZ(301.8px);
}
.carousel-item:nth-of-type(7) {
  transform: rotateY(270deg) translateZ(301.8px);
}
.carousel-item:nth-of-type(8) {
  transform: rotateY(315deg) translateZ(301.8px);
}
@keyframes rotate-carousel {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* Task 6 - Perspective and Depth Scene */
.scene-container {
  margin-top: 50px;
  perspective: 1000px; /* MOVE IT HERE */
  perspective-origin: center center;
}
.scene {
  height: 400px;
  width: 400px;
  margin: 0 auto;
  position: relative;
  transform-style: preserve-3d;
  animation: 10s linear infinite forwards rotate-carousel;
}
.depth-item {
  position: absolute;
  display: flex;
  justify-content: center;
  color: white;
  align-items: center;
  font-size: 80px;
  border-radius: 100%;
  height: 200px;
  width: 200px;
}
.item-1 {
  transform: translateZ(200px) translateX(400px) translateY(50%);
  background-color: blue;
}

.item-2 {
  transform: translateZ(100px) translateX(200px) translateY(50%);
  background-color: red;
}
.item-3 {
  background-color: darkmagenta;
  transform: translateZ(0) translateX(0) translateY(50%);
}
.item-4 {
  background-color: black;
  transform: translateZ(-100px) translateX(-200px) translateY(50%);
}
.item-5 {
  background-color: lime;
  transform: translateZ(-200px) translateX(-400px) translateY(50%);
}

/* TASK 7: Book */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.book-container {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}

.book {
  height: 600px;
  width: 800px;
  position: relative;
  transform-style: preserve-3d;
  perspective: 2000px;
  transform: rotateY(20deg) rotateX(20deg);
}

.page {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  left: 50%;
  transform-origin: left center;
  transition: transform 1.5s ease-in-out;
  transform-style: preserve-3d; /* Needed for children to be 3D */
}

/* Base styles for the visible sides of the pages */
.page-front,
.page-back {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  color: white;
  backface-visibility: hidden; /* Hide the back when it's not facing the camera */
}

.page-front {
  background-color: lightblue;
  border: 1px solid #0077aa;
}

.page-back {
  background-color: lightcoral;
  border: 1px solid #aa3300;
  transform: rotateY(180deg); /* Flip the back page initially */
}

/* Cover specific styles */
.cover-front .page-front,
.cover-back .page-back {
  background-color: #2c3e50;
  border: 1px solid #1a2531;
}

/* Stacking the pages to give the book thickness */
.cover-front {
  z-index: 4;
  transform: rotateY(
    -7deg
  ); /* Add this to make this look like proper stacking  */
}
.page[data-page-number='2'] {
  transform: rotateY(-5deg);
  z-index: 3;
}
.page[data-page-number='3'] {
  transform: rotateY(-3deg);
  z-index: 2;
}
.cover-back {
  z-index: 1;
}

/* Page Controls */
.page-controls button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 5px;
}

.page-controls button:hover {
  background-color: #e9e9e9;
}