:root{
  --deep-brown: #4A3B2A;
  --loess-beige: #D8CFC4;
  --muted-olive: #7A8450;
  --slate-gray: #5E6469;
  --off-white: #F5F4F2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--loess-beige); 
    display: flex;
    justify-content: center;
    padding: 20px;
}

/* Main container */
.container {
    width: 800px; /* adjustable */
    border: 3px solid #000;
    display: flex;
    flex-direction: column;
}

/* Banner / Title */
.banner {
    background-color: var(--deep-brown);
    color: var(--off-white);
    text-align: center;
    padding: 20px;
    font-weight: bold;
    border-bottom: 3px solid #000;
}

/* Navigation Bar */
.navbar {
    background-color: var(--off-white);
    border-bottom: 3px solid #000;
    padding: 10px;
    text-align: center;
}

/* Main Content */
.main-content {
    background-color: var(--off-white);
    flex-grow: 1;
    border-top: 3px solid var(--muted-olive);

    display: flex;
    flex-direction: column;
}

.main-header {
    background-color: var(--muted-olive);
    color: var(--off-white);
    text-align: center;
    font-weight: bold;
    padding: 10px;
    border-bottom: 3px solid #000;
}

.main-body {
    padding: 20px;
    flex-grow: 1;
}

/* Footer */
.footer {
    background-color: var(--off-white);
    border-top: 3px solid #000;
    padding: 10px;
    text-align: center;
}