/* this beginning portion relates to the index page as well as elements that are unified across pages */

body {
font-family:Verdana, Tahoma, Georgia, sans-serif;
text-align: center;
line-height:1.3em;
font-weight:700;
background-color: wheat;
margin: 40px center;
min-width:400px;
max-width:1500px;
}

/* should be used across pages. idk what i want from this yet though*/
header {
    border: 10px black double;
    border-radius: 50px;
    padding: 5px 20px;
    background-color: rgb(236, 143, 66);
    text-transform:uppercase;
    text-decoration: underline overline solid maroon 8px;
    margin: 30px auto;
}

footer {
    position: absolute;
    bottom: sticky;
    width:80%;
    background-color: #f2d297;

}

p { font-size: 1.0em; color: black; }

h1, h2 { font-size: 1.5em; text-align:center }

h3, ul { text-align: left }

/* img { border: 1px solid white } used to outline the diary page*/
img.button {
    width:100px;
    margin:5px center;
}

/* used across pages. holds plain text in the body. bg is same color as diary page outset border */
.DashedBorder {
    border: 3px black dashed;
    border-radius: 30px;
    padding: 15px;
    background-color: rgb(128, 0, 0, 0.3);
    margin: 20px auto;
    max-width:1000px;
    text-align: left;
}

.DashedBorder h1, h2 {
    text-decoration: underline wavy maroon 2px;
}


/* DIARY PAGE STYLE */

div.diaryPage {
    min-width: 400px;
}

.diaryPage header {
    margin:20px auto;
    border-style: double;
    border-width: 20px;
    border-color:rgb(182, 103, 0);
    padding:15px;
    line-height: 3em;
    max-width: 800px }

.diaryPage header > p,h1 {text-align: center;}

.diaryPage #BioBox {
    min-width:200px;
    margin:auto auto 10px auto;
    background-color:gray;
    border: 10px outset rgb(128, 0, 0);
    padding:10px;
    max-width: 750px;}

.diaryPage p {margin:0;font-size:11pt;}

.diaryPage p.title {
    padding-top:24pt;
    font-size:36pt;
    padding-bottom:6pt;
    font-family:"Georgia";
    page-break-after:avoid;
    text-align:left}

.diaryPage p.subtitle {
    padding-top:18pt;
    color:#666666;
    font-size:24pt;
    padding-bottom:4px;
    page-break-after:avoid;
    font-style:italic;
    text-align:left}

p.signoff { color:#222222; font-style:italic; text-align: left;}

div.MonthSegment {
    margin:auto;
    margin-bottom:10px;
    border: 4px dashed brown;
    padding:15px;
    background-color:rgb(182, 103, 0, 0.8);
    max-width: 850px;
}

.diaryPage hr { color:black; height:1px; }

div.diaryEntry {
    text-align:left;
}

.diaryEntry h1, h2, h3 {
    text-align: left;
    padding: 10px 5px;
}

.diaryEntry details {
    margin-bottom:8px;
    padding: 10px 5px 5px 5px;
    border-left: 2px solid maroon;
    border-right: 2px solid maroon;
    background-color:rgb(220, 20, 60, 0.5);
    border-bottom: 4px dotted rgb(128, 0, 0, 0.5) }

.diaryEntry details > p {
    text-indent: 25px;
    padding:15px 0px 3px 0px; }


/* STORIES DIRECTORY STYLE */

div.StoryNav {
    background-color: wheat;
}

.StoryNav h2 {
    font-size: 1.2em;
}

/* SINGLE PAGE VIEW STYLE */

div.SinglePage {
    margin: 100px auto;
}

.SinglePage .main {
    min-width:fit-content;
    max-width:1200px;
    margin:150px auto;
    border:2px solid black;
    padding:20px 10px;
    background-color: lightgray;
}

.SinglePage .pageImg {
    border:1px solid white;
    padding:10px;
    margin:center;
}

.SinglePage img.mainBG {
    width:100%;
    min-width:100px;
    max-width:fit-content;
}

.SinglePage .quicknav {
    border: 1px solid white;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    min-width:310px;
    padding: 10px;
    margin:30px auto;
}

.SinglePage img.backpage {
    width:15%;
    min-width:65px;
    max-width:120px;
    border:1px solid black;
    justify-content: flex-start;
}

.SinglePage img.nextpage {
    width:15%;
    min-width:65px;
    max-width:120px;
    border:1px solid black;
    justify-content: flex-end;
}

.SinglePage .txtdropdown {
    border: 1px dashed black;
    background-color:antiquewhite;
}

div.ChatBox {
    max-width: 1200px;
    margin: 30px auto;
    border-style:dashed;
    border-color:lightsalmon;
    border-width:2px;
    background-color: lightgray;
    text-align: left;
    padding: 10px 5px 10px 20px;
    cursor: crosshair;
}

.ChatBox details {
    color: #281528;
    border: 1px none;
    margin:auto;
}

.ChatBox summary {
    margin:auto;
    font-style: red;
}

.ChatBox p.MangoCookie {
    color: #952536;
}