body {

    margin: 0;

    background-image: url("art/background.png");

    background-size: auto;

    background-position: center;

    background-repeat: repeat;

    background-attachment: fixed;

    color: #5b465f;

    font-family: Georgia, "Times New Roman", serif;

}


body::before {

    content: "";

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-image: url("art/backgroundOverlay.png");

    background-size: auto;

    background-position: center;

    background-repeat: repeat;

    pointer-events: none;

    z-index: 0;

}


body.diaryOpen::before {

    background-image: url("art/backgroundOpen.png");

}


.site {

    width: 1200px;

    margin: 40px auto;

    position: relative;

    z-index: 1;

    filter:
        drop-shadow(0 25px 30px rgba(54, 39, 58, 0.10));

}


/* title */

.titleContainer {

    width: 300px;
    height: 50px;

    margin: 0 auto 25px auto;

    background: #d9a7b5;

    border: 1px solid #333;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

}


/* diary */

.diary {

    width: 1200px;

    margin: 0 auto;

}


/* front cover */

.frontCover {

    width: 550px;
    height: 800px;

    margin: 0 auto;

    background-image: url("art/diary98.gif");

    background-size: 100% 100%;

    background-repeat: no-repeat;

    box-shadow:
        0 20px 35px rgba(54, 39, 58, 0.28),
        0 8px 14px rgba(54, 39, 58, 0.20),
        0 2px 5px rgba(54, 39, 58, 0.18);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}


/* opened diary */

.openDiary {

    display: none;

    width: 1200px;
    height: 800px;

    position: relative;

}


.diaryPages {

    width: 1100px;
    height: 800px;

    display: flex;

    filter:
        drop-shadow(0 20px 25px rgba(54, 39, 58, 0.25))
        drop-shadow(0 7px 10px rgba(54, 39, 58, 0.18));

}


/* pages */

.page {

    width: 550px;
    height: 800px;

    background-image: url("art/page.png");

    background-size: 100% 100%;

    background-repeat: no-repeat;

    box-sizing: border-box;

    padding: 27px 35px 35px 35px;

    cursor: pointer;

    position: relative;

    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.08),
        inset 0 0 3px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(54, 39, 58, 0.10);

}


.page p {

    margin: 0;

    line-height: 28px;

}


/* left page */

.leftPage {

    border-right: 1px solid #aaa;

    box-shadow:
        inset -12px 0 18px rgba(0, 0, 0, 0.10),
        inset 0 0 8px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(54, 39, 58, 0.10);

}


/* right page */

.rightPage {

    border-left: 1px solid #aaa;

    box-shadow:
        inset 12px 0 18px rgba(0, 0, 0, 0.10),
        inset 0 0 8px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(54, 39, 58, 0.10);

}


/* tabs */

.sideTabs,
.frontTabs {

    position: absolute;

    top: 35px;

    width: 35px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.sideTabs {

    left: 1100px;

}


.frontTabs {

    left: 550px;

}


.sideTabs button,
.frontTabs button {

    width: 35px;

    height: 110px;

    margin: 0;

    padding: 0;

    border: none;

    outline: none;

    cursor: pointer;

    background-color: transparent;

    background-repeat: no-repeat;

    background-position: center;

    background-size: 35px 110px;

    box-shadow: none;

    writing-mode: vertical-rl;

    text-orientation: mixed;

    font-size: 13px;

    color: #5b465f;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5),
        1px 1px 1px rgba(54, 39, 58, 0.22);

    opacity: 0.88;

    filter:
        drop-shadow(2px 2px 2px rgba(54, 39, 58, 0.20));

}


.sideTabs .tab1,
.frontTabs .tab1 {

    background-image: url("art/tab1.png");

}


.sideTabs .tab2,
.frontTabs .tab2 {

    background-image: url("art/tab2.png");

}


.sideTabs .tab3,
.frontTabs .tab3 {

    background-image: url("art/tab3.png");

}


.sideTabs .tab4,
.frontTabs .tab4 {

    background-image: url("art/tab4.png");

}


.sideTabs .tab5,
.frontTabs .tab5 {

    background-image: url("art/tab5.png");

}


.sideTabs .tab6,
.frontTabs .tab6 {

    background-image: url("art/tab1.png");

}