/* User Styles - Dark Red and Gold Theme */

/* Google Fonts - Import at top of CSS */
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=EB+Garamond:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,700;1,400&display=swap');


/* Reset box-sizing for all elements */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* Body Styles */
body {
    font-family: 'Crimson Text', Georgia, serif;
    margin: 0;
    background-color: #000000;
    color: #f5e6d3;
    
    /* Multiple background images with gradient overlays */
    background-image: 
        /* Left gradient fade (transparent to dark) */
        linear-gradient(to right, 
            transparent 0%, 
            #1a0a0a 70%
        ),
        /* Right gradient fade (transparent to dark) */
        linear-gradient(to left, 
            transparent 0%, 
            #1a0a0a 70%
        ),
        /* Left image */
        url('images/Harry-Clarke-Illustrations-for-Edgar-Allan-Poe-Tales-of-Mystery-and-Imagination-1919-10-scaled copy.jpg'),
        /* Right image */
        url('images/Harry-Clarke-Illustrations-for-Edgar-Allan-Poe-Tales-of-Mystery-and-Imagination-1919-3-scaled_crop.jpg');
    
    background-position: 
        left center,      /* Left gradient */
        right center,     /* Right gradient */
        left center,      /* Left image */
        right center;     /* Right image */
    
    background-repeat: 
        no-repeat,        /* Left gradient */
        no-repeat,        /* Right gradient */
        no-repeat,        /* Left image */
        no-repeat;        /* Right image */
    
    background-size: 
        50% 100%,         /* Left gradient covers left half */
        50% 100%,         /* Right gradient covers right half */
        auto 100%,        /* Left image - auto width, full height */
        auto 100%;        /* Right image - auto width, full height */
    
    background-attachment: fixed; /* Makes images stay in place when scrolling */
}

/* Container */
#container {
    max-width: 900px;
    margin: 0 auto;
}

/* Links */
#container a {
    color: #d4af37;
    font-weight: bold;
}

#container a:hover {
    color: #ffd700;
}

/* Header with Images and Title */
#header {
    width: 100%;
    background-color: #1a0a0a;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.header-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    flex-shrink: 0;
}

.site-title {
    font-family: 'Uncial Antiqua', Georgia, serif;
    font-size: 3.0rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
    flex-grow: 1;
    padding: 0 20px;
    color: #d4af37;
}

/* Navigation */
#navbar {
    height: 40px;
    background-color: #2d0a0a;
    width: 100%;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
}

#navbar li a {
    color: #d4af37;
    font-weight: 800;
    text-decoration: none;
}

#navbar li a:hover {
    color: #ffd700;
    text-decoration: underline;
}

/* Flex Container */
#flex {
    display: flex;
}

/* Sidebars */
aside {
    background-color: #3d1414;
    width: 200px;
    padding: 20px;
    font-size: smaller;
}

aside ul {
    padding-left: 10px;
}

#leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

/* Main Content */
main {
    background-color: #5a1f1f;
    flex: 1;
    padding: 20px;
    order: 2;
}

/* Footer */
footer {
    background-color: #2d0a0a;
    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center;
}

/* Headings */
h1,
h2,
h3 {
    color: #d4af37;
    font-family: 'EB Garamond', Georgia, serif;
}

h1 {
    font-size: 25px;
}

/* Strong Text */
strong {
    color: #d4af37;
}

/* Box Element */
.box {
    background-color: #2d0a0a;
    border: 1px solid #d4af37;
    padding: 10px;
}

/* Top Bar */
#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #2d0a0a;
}

/* PDF Download Styles */
.pdf-download {
    display: inline-block;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.pdf-download:hover {
    opacity: 0.8;
    color: #d4af37;
}

.pdf-download img {
    max-width: 100%;
    height: auto;
    border: 2px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pdf-caption {
    display: block;
    margin-top: 8px;
    color: #d4af37;
    font-size: 14px;
    text-align: center;
}

/* Table Styles */
table,
th,
td {
    border: 1px double;
    border-color: #d4af37;
    width: 100%;
    text-align: center;
}

/* Media Query for Responsive Design */
@media only screen and (max-width: 800px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
    
    #header {
        height: auto;
        padding: 5px;
    }
    
    .site-title {
        font-size: 1.5rem;
    }
    
    .header-image {
        width: 60px;
        height: 60px;
    }
}