@font-face {
    font-family: 'Crimson';
    src: url(CrimsonText-Regular.ttf);
}

* {box-sizing: border-box;

scrollbar-color:#483327 #E4DDD0;}

html, body, * {cursor:url(quill.png), auto;}

body {background-color:#E4DDD0;
font-family:'Crimson', Georgia, serif;
color:#483327;
} 

h1 {font-size:50pt;
margin:0;
margin-bottom:-55px;
position:relative;
z-index:5;
width:fit-content;}

h1 a {color:#483327;
text-decoration: none;}

::selection {background-color:#483327;
color:#E4DDD0}


.container {
width:1100px;
background-image:url(bookbgdith.png);
height:750px;
margin:auto;
position:relative;
}

.decor {width:400px;
height:580px;
position:absolute;
left:150px;
top:80px;
}

.decor img {max-width:100%;}

.book {width:400px;
line-height:1.1;
height:580px;
border-radius:5px;
position:absolute;
right:120px;
top:80px;
background-color:#E4DDD0;
font-size:13pt;
overflow:hidden;
}

.page {width:100%;
padding:20px;
height:100%;
scrollbar-width:thin;
overflow:auto;
margin-bottom:20000px;
position:relative;}

.book h2 {font-weight:bold;
font-size:24pt;
margin-top:0;
text-align:center;}

#aboutnav {position:sticky;
top:-20px;
background-color:#E4DDD0;
border:#483327 1px solid;
text-align:center;
padding:5px;
}

#aboutnav a {color:#483327;}
#aboutnav a:hover {color:#927462}

.nav {
width:500px;
height:100px;
padding:20px;
position:absolute;
z-index:3;
left:520px;
top:-14px;
rotate:-2deg;
}

.nav ul, .nav2 ul, .nav3 ul {list-style-type: none;
margin:0;}

.nav li, .nav2 li, .nav3 li {
font-family:'Crimson',Georgia, serif;
background-color:#483327;
padding:10px;
color:#E4DDD0;
margin-right:-10px;
display:inline-block;
padding-bottom:12px;
font-size:14pt;
}
.nav a:hover, .nav2 a:hover, .nav3 a:hover {color:#927462}
.nav li:hover {
padding-bottom:27px;
transform:translateY(-15px)
}

.bookmarklink {
position:absolute;
top:130px;
left:1040px;
transform:rotate(2deg)}

.nav2 {
position:absolute;
width:500px;
height:100px;
top:680px;
left:110px;
display:flex;
align-items:flex-end;
transform:rotate(2deg);
}

.nav2 li {width:100px;
text-align:center;
padding-top:40px;
}

.nav2 li:hover {
padding-top:50px;
transform:translateY(10px)}

.nav3 li:hover {
padding-top:30px;
transform:translateY(10px)}

.nav3 li {padding-top:20px;}

.nav3 {position:absolute;
transform:rotate(-1deg);
width:500px;
display:flex;
align-items:flex-end;
height:100px;
top:660px;
left:570px;}

.nav3 li, .nav li, .nav2 li {box-shadow:-2px 2px 6px rgba(00,00,00,0.3);}

a {color:#483327;
text-decoration: underline dotted 1px;
}

a:hover {color:white;}

#nxtpg {font-size:26pt;
text-align: center;
width:100%;
}

/* Gallery Pages */

#photos {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#photos figure {
    margin: 8px;
    max-width: min-content;
}

#photos img {
    border: 1px solid #483327;
    width:100px;
height:100px;
object-fit: cover;
}

#photos img:hover {
    border-color: white;
}

#photos span {
    text-align: center;
    display: block;
}

#photos figcaption {
    padding: 10px 0px;
}

.page-links {
    text-align: center;
}

.page-links ul {
    padding: 0px 5px;
    margin: 10px 0px;
    display: inline-block;
}
.page-links li {
    list-style: none;
    display: inline;
    margin: 0px 3px;
}

/* Styling for JavaScript viewer (if enabled) */

#js-viewer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.612);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
z-index:100;
}

#js-viewer img {
    max-width: 95%;
    max-height: 80%;
    height: auto;
    width: auto;
    border: 3px double #483327;
}

#js-viewer span {
    margin-top: 10px;
}

#js-viewer span button {
    border: 2px outset #483327;
border-radius:100%;
color:inherit;
    background-color: #E4DDD0;
    font-family: inherit;
    cursor:url(quill.png);
font-size:24pt;
}

#js-viewer span button:hover {
    
    background-color: #d6b6a1;
}

#js-viewer span button:active {border: 2px inset #483327;background-color:#927462}