/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    background-color: rgba(82, 52, 4, 1);
    background-size: cover;        /* Makes image cover entire page */
    background-repeat: no-repeat;  /* Prevents tiling/repeating */
    background-position: center;   /* Centers the image */
    background-attachment: fixed;  /* Image stays still when scrolling */
    /* text */
    color: white;
    text-shadow: 2px 2px 4px black;  /* Adds shadow to text */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh; /* Full viewport height */
}

/* Make links stand out */
a {
    color: gold;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Create the three-column layout */
.container {
    display: flex;
    height: 100vh;
}

/* Left sidebar */
.left-sidebar {
    width: 200px;
    background-color: rgba(82, 52, 4, 0.8);
    padding: 20px;
    border-right: 2px solid gold;
}

/* Main content area */
.main-content {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
        display: flex;           /* Add this */
        justify-content: center; /* Center horizontally */
        align-items: center;     /* Center vertically */
        min-height: 500px;       /* Give it some height */
      }

/* Right sidebar */
.right-sidebar {
    width: 200px;
    background-color: rgba(82, 52, 4, 0.8);
    padding: 20px;
    border-left: 2px solid gold;
}

/* Sidebar menu styles (add these for your navigation) */
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin-bottom: 10px;
}

.sidebar-menu a {
    display: block;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    transition: background-color 0.3s;
}

.sidebar-menu a:hover {
    background-color: rgba(255, 215, 0, 0.2);
    text-decoration: none;
}