/*
 * The primary CSS file for this project. Any nested directories may have their own style.css files to override
 *      any configurations present here.
 */

/*
  * Root assignments:
  *     Color palette for the site
  */

:root {
    --color-dark: #0d160b;
    --color-light: #f5e4d7;
    --color-primary: #2e0014;
    --color-secondary: #442220;
    --color-alternate: #809848;
}

/*
 * element assignements
 */

* {
    box-sizing: border-box;
    font-family: "Times New Roman", "Arial";
}

body {
    font-size: 1rem;
}

html {
    background-color: var(--color-primary);
}

img {
    max-width: 100%;
    height: auto;
}

/*
 * Grid Configuration
 */

.grid-container {
    display: grid;
    grid-template-areas:
        "header"
        "menu"
        "main"
        "footer";
}


/*
 * Chaos Below here for now.
 * This def needs to be sorted and cleaned.
 */

.header {
    position: sticky;
    grid-area: header;
    background-color: var(--color-light);
    text-align: center;
    margin-top: 3%;
    margin-bottom: 3%
    color: var(--color-dark);
    border: 1ch outset var(--color-alternate);
}


.header > h1 {
    font-size: 2rem;
    color: var(--color-dark);
}

.menu {
    grid-area: menu;
    border: 1ch outset var(--color-alternate);
    background-color: var(--color-light);
    margin-top: 3%;
}

.menu ul {
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    margin: 1%;
    overflow: hidden;
}

.menu ul li {
    padding: 1%;
    margin: 0.5ch;
    background-color: var(--color-light);
    color: var(--color-dark);
    float: left;
    border: 1ch inset var(--color-alternate);
}

.menu ul li:hover {
    background-color: var(--color-alternate);
    border: 1ch outset var(--color-alternate);
}

.menu ul li:active {
    background-color: var(--color-alternate);
    border: 1ch inset var(--color-alternate);
}

.menu ul li a {
    display: block;
    text-align: center;
    padding: 2% 1%;
    text-decoration: none;
}

.content {
    grid-area: main;
    margin: 2%;
    padding: 1%;
    border: 1ch inset var(--color-alternate);
    background-color: var(--color-light);
}

.segment {
    padding: 2%
}

.segment > ul > li {
    background-image: url("/images/2a4a3837-6c2b-464d-a946-b8ccc93a2969.png");
    margin: 0;
    padding: 18px 0 18px 42px;
    list-style: none;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 32px;
}

.footer {
    grid-area: footer;
    background-color: var(--color-light);
    color: var(--color-dark);
    text-align: center;
    border: 1ch inset var(--color-alternate);
    margin: 1%;
    margin-bottom: 5%;
}

.footer img {
    border: 1ch inset var(--color-alternate);
    margin: 2%;
}

/*
 * Flex box configurations
 */
.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: var(--color-light);
}

.flex-container div {
    margin: 2%;
    width: 40%;
    text-align: left;
    background-color: var(--color-light);
    border: 1ch groove var(--color-alternate);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    body {
        width: 95%;
    }
    .flex-container div {
        width: 95%;
        margin: 2%;
    }
}