* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    font-family: "Poppins", sans-serif;
  }
  
:root {
    --bg-color: #081b29;
    --main-color: #00abf0;
    --text-color: #333;
    --second-text-color: #555;
    --white-color: #fff;
    --cover-color: linear-gradient(45deg, #00abf0, #006e9a);
    --pages-color: linear-gradient(90deg, #fff, #ddd);
    --border: .125rem solid #00abf0;
    --box-shadow: 0 0 .6rem rgba(0, 0, 0, .2);
}
  
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
  }

.wrapper {
    position: relative;
    width: 66rem;
    height: 45rem;
    padding: 2rem;
    perspective: 250rem;
    animation: show-animate 2s forwards;
  }

.cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-size: cover;
    background: var(--cover-color);
    box-shadow: var(--box-shadow);
    border-top-left-radius: .6rem;
    border-bottom-left-radius: .6rem;
    transform-origin: right;
}

.cover.cover-right {
    background-image: url('images/GDD_Cover_2.png');
    background-size: cover;
    z-index: 100;
    transition: transform 1s cubic-bezier(.645, .045, .355, 1);
}

.cover.cover-right.turn {
transform: rotateY(180deg);
}

.cover.cover-left {
    background-image: url('images/GDD_Cover_2.png');
    background-size: cover;
    z-index: -1;
    transition: transform 1s cubic-bezier(.645, .045, .355, 1);
}

.cover.cover-left.turn {
    transform: rotateY(180deg); /* Rotate in the opposite direction */
}



.book {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    perspective: 250rem;
}

.book .book-page {
    position: absolute;
    width: 50%;
    height: 100%;
    background: var(--pages-color);
    box-shadow: 0 0 .6rem rgba(0, 0, 0, .1);
    display: flex;
    padding: 2rem;
}

.book-page.page-left {
    box-shadow: -.6rem .6rem .6rem rgba(0, 0, 0, .1);
}

.book-page .page-front,
.book-page .page-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--pages-color);
  padding: 1.5rem 2rem;
  display: flex; /* Make it a flex container */
  flex-direction: column; /* Stack children vertically */
}

.book-page.page-right {
    position: absolute;

    right: 0;
    transform-style: preserve-3d;
    transform-origin: left;
    
    transition: transform 1s cubic-bezier(.645, .045, .355, 1);
}

.book-page.page-right.turn {
transform: rotateY(-180deg);
}


/* does nothing */
.book-page .page-front {   
    transform: rotateY(0deg) translateZ(1px);
}

.book-page .page-back {
  transform: rotateY(180deg) translateZ(1px);
}
  
.number-page {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
}
  
.nextprev-btn {
    position: absolute;
    bottom: .9rem;
    right: 1.5rem;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    font-size: 2rem;
    color: var(--second-text-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
}
  
.nextprev-btn:hover {
    color: var(--main-color);
}
  
.nextprev-btn.back {
    left: 1.5rem;
}


.container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    /* grid-auto-rows: minmax(auto, max-content); Rows grow with content */
    max-width: 100%; /* Prevent grid from expanding */
    flex-grow: 1; /* Takes up all available space */
    overflow-y: scroll;
    overflow-x: hidden; /* Hide horizontal scrollbar */
  }

/* ----------------Page1------------------------------ */
  #turn-0 .page-front .item-1{
    grid-area: 1/1/1/7;
}

#turn-0 .page-front .item-2{
    grid-area: 2/1/2/7;
}
/* ----------------Page3------------------------------ */
/* ----------------Page4------------------------------ */
#turn-1 .page-back .item-1{
    grid-area: 1/1/1/7;
}

#turn-1 .page-back .item-2{
    grid-area: 2/1/2/7;
}
#turn-1 .page-back .item-2 img {
    max-width: 100%; 
    height: auto;
    display: block;
}
/* ----------------Page2------------------------------ */
/* #turn-1 .page-front .item-1{
    grid-area: 1/1/1/7;
}

#turn-2 .page-front .item-1{
    grid-area: 1/1/1/7;
}
#turn-2 .page-front .item-1{
    grid-area: 2/1/2/7;
}

#turn-3 .page-front .item-1{
    grid-area: 1/1/1/7;
}
#turn-3 .page-front .item-2{
    grid-area: 2/1/2/3;
}
#turn-3 .page-front .item-3{
    grid-area: 2/1/4/7;
} */



/* EXAMPLE GRID AREA COMMANDS */
  
/* #turn-4 .page-back .item-1{
    grid-area: 1/1/1/7;
}

#turn-4 .page-back .item-2{
    grid-area: 2/1/2/7;
}

#turn-4 .page-back .item-3{
    grid-area: 3/3/3/7;
}
#turn-4 .page-back .item-4{
    grid-area: 4/4/4/7;
}

#turn-4 .page-back .item-5 {
    background-color: red;
    grid-area: 5/5/5/7;
}
#turn-4 .page-back .item-6{
    grid-area: 6/6/6/7;
}
#turn-4 .page-back .item-7{
    grid-area: 7/7/7/7;
} */