@font-face {
  font-family: "IrishUncial";
  src: url("/ryan/font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:black;
width:100vw;
height:100vh;
overflow:hidden;
font-family:"IrishUncial", serif;
}

.scene{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}

.book{
position:relative;
width:360px;
height:540px;
transition:width .8s ease;
}

.book.open{
width:720px;
}

.book-half{
position:absolute;
width:360px;
height:540px;
top:0;
overflow:hidden;
}

.book-half img{
width:100%;
height:100%;
object-fit:cover;
}

.front-closed{
left:0;
z-index:5;
}

.back-closed{
right:0;
display:none;
}

.book.closed .front-closed{
display:block;
}

.book.open .front-closed{
display:none;
}

.book-open{
display:none;
width:720px;
height:540px;
}

.book.open .book-open{
display:flex;
}

.page{
position:relative;
width:50%;
height:100%;
overflow:hidden;
}

.page-image{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}

.page-content{
position:relative;
z-index:2;
padding:40px;
color:black;
}

.hidden{
display:none;
}