html, body {
    margin: 0;
    padding: 0;
    background-color: black;
}

.bg_1{
    width: 100dvw;
    height: 100vh;
    background-image: url('imgs/landscape/bg_1v2.png');
    background-repeat: no-repeat;
}


 .bg_2{
 background-image: url('imgs/landscape/bg_2v2.png');
 background-repeat: no-repeat;
    position: absolute;
    width: 100dvw;
    height: 100vh;
    top: 0%;
    background-repeat: no-repeat;
 }

 .bg_3{
background-image: url('imgs/landscape/bg_2.png');
 background-repeat: no-repeat;
    position: absolute;
    width: 100dvw;
    height: 100vh;
    top: 3%;

 }

 .bg_transition{
    background-image: url('imgs/landscape/bg_transition.png') ;
    background-repeat: no-repeat;
    position: absolute;
    width: 100dvw;
    height: 100vh;
    top: 3%;
 }

 .goetia_title{
    background-image: url('imgs/landscape/goetia_title.png');
        background-repeat: no-repeat;
    position: absolute;
    width: 100dvw;
    height: 100vh;
    top: 30%;
    left: 10%;
 }



.book{
    background-color: black;
}

.book-stage {
  position: relative;      /* anchor for the overlay */
  width: 95vw;
  height: 100vh;
  margin: 0 auto;
}

/* Make the canvas fill the stage */
.book-stage #frame-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* The overlay */
.book-text {
  position: absolute;
  top: 24%;                /* adjust to where the page is */
  left: 35%;               /* the book's right page */
  transform: translate(-50%, -50%);
  width: 35%;              /* stay inside the page */
  color: #2b1d12;          /* dark ink for parchment */
  font-family: Georgia, serif;
  font-size: clamp(0.9rem, 1.4vw, 1.3rem);
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;    /* let scroll/click pass through if needed */
  text-align: center;
}


.characters{
    background-image: url('imgs/cave/bg_cave.png');
    top: -2rem;
    background-repeat: no-repeat;
}

.roots{
    background-image: url('imgs/landscape/bg_roots.png');
    width: 100dvw;
    height: 100vh;
    top: 200%;
    position: absolute;
}

.scroll{

    background-image: url('imgs/characters/scroll.png');
    width: 100vw;
    height: 100vh;
    top: 200%;
    position: absolute;
    background-repeat: no-repeat;
}
.char-text{
    position: relative;
    width: 40%;
    left: 12%;
    display: flex;
    flex-direction:column;
    margin-top: 5%;
}

.title{
    display: flex;
    height: auto;
    width: 100%;

}

.title img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.descriptions{
    display: flex;
    height: 20rem;
    width: 100%;
    margin-top: 5%;
    flex-direction: column;
    min-height: clamp(6rem, 15vw, 15rem); 
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
}

.big-box{
    margin-top: 8rem;
    align-items: center;
    left: 10%;
    display: flex;
    background: grey;
    width: 40%;
    height: 9rem;
    position: relative;
    border-radius: 60px;

}

.char-box{
    display: flex;
    gap: 0.8rem;
    align-items: center;
    position: relative;
    padding: 1rem;
    height: 10rem;
    max-height: 10rem;
    overflow: hidden;
    object-fit: contain;
    
}

.char-token{
    display:flex;
    cursor: pointer;
    width: auto;
    height: auto;
    object-fit: contain;
}

.button{
margin: 1rem;
width: 2rem;
height: 2rem;

}

.images{
    display: flex;
    height: auto;
    width: 40%;
    position: relative;
    left: 60%;
    top: -49rem;
    align-items: center;
    object-fit: contain;
}

.images img{
    width: 100%;
    height: 100%;
    object-fit: contain;

}

.active{
    background: wheat;
    border-radius: 100px;
}