*{

margin:0;
padding:0;
box-sizing:border-box;

}



html,
body{

width:100%;
height:100%;

overflow:hidden;

background:#111;

font-family:Arial,sans-serif;

}





/* OPENING SCREEN */


#welcomeScreen{

position:fixed;

inset:0;

background:#102827;

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

}



.welcome-content{

text-align:center;

color:white;

}



.welcome-logo{

width:120px;

height:auto;

margin-bottom:30px;

}



.welcome-content h1{

font-size:28px;

font-weight:500;

letter-spacing:1px;

margin-bottom:15px;

}



.welcome-content p{

font-size:14px;

opacity:.8;

margin-bottom:35px;

}




#openGuide{

padding:14px 40px;

border:none;

border-radius:30px;

background:#c7a45d;

color:white;

font-size:16px;

cursor:pointer;

}



#openGuide:hover{

opacity:.85;

}







/* BOOK */


.book-container{

width:100vw;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

}




#book{

width:794px;

height:1000px;

}




.page{

background:#fff;

}




.page canvas{

width:100%;

height:100%;

display:block;

}






.stf__wrapper{

filter:

drop-shadow(

0 15px 35px rgba(0,0,0,.45)

);

}







/* BUTTON */


.controls{

position:fixed;

bottom:25px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:15px;

z-index:1000;

}



.controls button{

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#c7a45d;

color:white;

font-size:25px;

cursor:pointer;

}





audio{

display:none;

}







@media(max-height:900px){


#book{

width:620px;

height:780px;

}


}





@media(max-height:750px){


#book{

width:520px;

height:650px;

}


}





@media(max-width:768px){


#book{

width:100vw;

height:126vw;

}



.controls{

bottom:15px;

}


.controls button{

width:40px;

height:40px;

font-size:22px;

}


}