@charset "UTF-8";
/* CSS Document */



html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
color: #333;
min-height: 100%;
}

body {
background-color: #DAE8FC; 
background-image: linear-gradient(to bottom, #DAE8FC, #edf9fc);
background-repeat: no-repeat;
background-attachment: fixed; 
}

main {
padding: 2rem;
max-width: 800px;
margin: 0 auto;
padding-top: 100vh;
padding-bottom: 100vh;
}

h1 {
text-align: center;
color: #0d47a1;
}

#book-container {
height: 50vh;
aspect-ratio: 2 / 3;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
perspective: 1500px; 
transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

#book-container.flipped {
transform: translate(-50%, -50%) rotateY(180deg);
}

.book-face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border-radius: 8px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; 
}


#book-back {
transform: rotateY(180deg);
}


.hummingbird {
position: fixed; 
width: 150px; 
height: auto;
z-index: 100; 
pointer-events: none; 
opacity: 0; 
transition-property: transform, opacity; 
transition-timing-function: ease-out; 
}