@import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&family=Calligraffitti&family=Caveat:wght@500&family=Cedarville+Cursive&family=Cinzel:wght@600&family=Homemade+Apple&family=Pangolin&family=Petit+Formal+Script&family=STIX+Two+Math&display=swap');

body {
    background-color: ivory;
    background-image: url("src/paper.jpg");
    background-repeat: repeat;
    touch-action: none;
    /* touch action NONE counters the error of triggering a function with swiping action 
    [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. */
}

p {
    text-indent: 2rem;
    line-height: 1.2;
}

br {
    text-indent: 2rem;
    line-height: 1.2;
}

.top-sticky {
    font-family: 'Cinzel';
    font-size: 3vh;
    color: whitesmoke;
    background-color: #66001A;
    border-radius: 5px;

    position: -webkit-sticky;
    position: sticky;
    top:0;
    z-index: 10;
}


.container {
    margin: 0px auto;
    width: 80%;
    height: 80%;
    max-width: 800px;
    background-color: whitesmoke;
    padding: 2vh;
    border-radius: 2vh;
    border: 3px solid #66001A;
    padding-bottom: 4vh;
    overflow:scroll ;

    /* -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000; */

}

img {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.chapter-title {
    font-family: 'Homemade Apple';
    font-size: 3.5vh;
    color: #9e0f0d;
}

.chapter-subtitle {
    font-family: 'STIX Two Math';
    font-size: 2vh;
    font-style: italic;
}

.subchapter-number-container {
    font-size: 3.5vh;
    background-color: #9e0f0d;
    height: 5.5vh;
    width: 5.5vh;
    border-radius: 50%;
}

.subchapter-number {

    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: whitesmoke;
    z-index: 0;
}

.body-text {
    text-align:initial;
    text-indent: 2rem;
    font-size: 1.3rem;
    font-style: unset;
    font-family: 'STIX Two Math';
    font-size: 2vh;
}

.body-text b {
    color: #b50b05;
    font-style: italic;
    /* color: #0ce8b1; */
    font-family: 'STIX Two Math';
}

table {
    color: #b50b05;
    font-style: italic;
    font-family: 'STIX Two Math';
    text-align: center;
    margin: 0 auto;
    border-spacing: 1rem;
    font-size: 2vh;
    background-color: #fffcf7;
    border-radius: 1rem;
}

textarea {
    margin: 0 auto;
    width: 80%;
    font-family: 'Homemade Apple';
    font-size: 1rem;
    padding: 2vh;
}

#prevButton {
    font-size: 2vh;
    font-family: 'STIX Two Math';
    font-style: unset;
    margin-top: 1%;
    width: 20%;
    float: left;
    padding-left: 0.2vw;
}

#prevButton:hover {
    background-color: #b52a4d2e;
    border-radius: 0.44rem;
    cursor: pointer;
}

#prevButton:active {
    cursor: grabbing;
}

#nextButton:hover {
    background-color: #b52a4d2e;
    border-radius: 0.44rem;
    cursor: pointer;
}

#nextButton:active {
    cursor: grabbing;
}

#nextButton {
    font-size: 2vh;
    font-family: 'STIX Two Math';
    font-style: unset;
    margin-top: 1%;
    width: 20%;
    float: right;
    padding-right: 0.2vw;
    
    
}

#signature {
    opacity: 0.5;
}