/* Hannah Alkenbrack */

/* Reset + Base */
body {
    margin-left: auto;
    margin-right: auto;
    background-color: #D6C4BA;
    color: #24171e;
    font-size: 1.5em;
    font-family: "Times New Roman", "Times", "serif";
}

a {
    font-size: 1.5em;
    text-decoration: none;
}

a:link {
    color: #8E7068;
}

a:visited {
    color: #800000;
}

a:hover {
    color: #B8860B;
    opacity: 0.5;
}

/* NAVIGATION BAR */
.navflexcontainer {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    flex-wrap: wrap;
    padding: 1em;
    background-color: #edede9;
    width: 100%;
}


.navflexitem {
    background-color: #edede9;
    padding: 0.25em 3em;
    font-style: italic;
    display: flex;
    align-items: center;
    font-size: 1.5em;
}

/* Center group for Home and About Me */
.navflexitem.left {
    justify-content: flex-start;

}

.navflexitem.center {
    justify-content: center;
    padding-left: 11em;
}

.navflexitem.right {
    margin-left: auto; /* Forces it to the far right */
    justify-content: flex-end;
}


/* Characters dropdown aligned right */
.dropdown.right {
    margin-left: auto;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #f5ebe0;
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 999;
    flex-direction: column;
    text-align: left;
    padding: 0.5em;
    border-radius: 0.5em;
}

.dropdown:hover .dropdown-content {
    display: flex;
}

.dropdown-content a {
    display: block;
    padding: 0.25em 0.5em;
    color: #8E7068;
    font-size: 1em;
    font-style: normal;
    background-color: #f5ebe0;
    margin: 0.15em 0;
    border-radius: 6px;
}

.dropdown-content a:hover {
    background-color: #d6c4ba;
    opacity: 1;
}

/* Social media icons below nav */
.social-container {
    display: flex;
    justify-content: center;
    gap: 1.5em;
    margin-top: 1em;
}

.media img {
    height: 24px;
    width: 24px;
    display: block;
}

/* Headers */
h1 {
    color: #8C6472;
    font-size: 4.5em;
    text-align: center;
    font-family: "Brush Script MT", "Times New Roman", "serif";
    font-weight: bold;
}

h2 {
    color: #6F4539;
    text-align: center;
    font-size: 2.5em;
}

h3 {
    color: #9B6B65;
    font-size: 2em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Header Wrapper */
header {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Page Content */
.maincontainer {
    width: 90%;
    padding: 2em;
    background-color: #f5ebe0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 2em auto;
    align-items: center;
}

p {
    color: #24171e;
    font-size: 1.5em;
    display: block;
    text-align: center;
}

/* Footer */
.footercontainer {
    color: black;
    background-color: #f5cac3;
    text-align: center;
    margin: 1em;
    padding: 0.5em;
    font-size: 1em;
}

.NED {
    font-size: .5em;
}

/* Back to Top */
.jumpbut {
    margin: 2em auto;
    text-align: center;
    display: block;
}

#jumpToTopBut {
    background-color: #8C6472;
    color: #D6C4BA;
    font-size: 1em;
    border-radius: 12px;
}

/* Page-Specific Styling */
.header-container {
    text-align: center;
    width: 100%;
    margin-bottom: 1em;
}

span {
    font-style: italic;
    font-weight: bold;
    color: #B8860B;
}

ol {
    list-style-type: upper-alpha;
    font-size: 1.25em;
    display: block;
    margin: auto;
}

ul {
    list-style-type: square;
    font-size: 1em;
    display: block;
}

/* Table Page */
table,
tr,
th,
td {
    width: 80%;
    border-collapse: collapse;
    margin: auto;
    font-size: 1em;
    text-align: center;
}

.tabBut {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#changeTabButton {
    background-color: #8C6472;
    color: #D6C4BA;
    font-size: 1em;
    border-radius: 12px;
}

/* Images Page */
.imagespagemainflexcontainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.imagespagemainflexitem img {
    margin-right: auto;
    margin-left: auto;
}

.imagespagemainflexitem {
    margin: 0.5em;
    max-width: 15em;
    padding: 0.5em;
    background-color: #c9ada7;
    border-radius: 0.75em;
}

figcaption {
    text-align: center;
}

/* Form Page */
form {
    margin-left: auto;
    margin-right: auto;
}

.formContainer {
    margin: 2em;
    padding: 2em;
    background-color: #f5ebe0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.navformitem {
    padding: 0.25em;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

form p {
    font-size: 1em;
    text-align: center;
}

label {
    display: block;
}