:root {
    /* Colors */
    --color-primary: rgb(76, 75, 72);
    --color-secondary: rgba(194, 196, 183, 0.5);
    --color-success: #28a745;
    --color-info: #17a2b8;
    --color-warning: #ffc107;

    --money-gray: rgba(76, 75, 72, 0.8);
    --money-green: rgba(58, 110, 95, 0.3);
    --money-lite: rgba(190, 193, 178, 1);
    --money-dark: rgba(45, 100, 80, 0.8);

    /* Font Size */
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-sm: 0.875rem;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-primary);
    background-color: var(--color-secondary);
}

ul {
    list-style: none;
    padding: 0;
    margin-left: 3em;
}

ul:before {
    content: attr(aria-label);
    display: table;
}

ul::after {
    content: "";
    display: table;
    clear: both;
}

/* Custom Definitions */

emphasis {
    font-style: italic;
    font-size: var(--font-size-lg);
    color: var(--color-info);
}

italics {
    font-style: italic;
}

/* Grid */
.container {
    padding: 0 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3fr minmax(0,1fr);
    /* grid-template-rows: max-content 0.2fr 1.8fr 1fr; */
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "header header header"
        ". navigation ."
        ". article ."
        "footer footer footer";
    transition: grid-template-columns 0.5s ease-in-out, grid-template-areas 0.5s ease-in-out, padding 0.5s ease-in-out;
}

.header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". logo logo logo .";
    grid-area: header;
}

.logo {
    grid-area: logo;
}

.logo svg {
    width: 100%;
    height: auto;
}

text#logo-title {
    font-family: 'Banknote Regular';
    font-size: 2.35em;
    font-style: normal;
    font-weight: 700;
    fill: var(--money-gray);
}

text#logo-domain {
    font-family: 'roboto-regular';
    font-size: 2.25em;
    font-style: normal;
    font-weight: 100;
    fill: var(--money-green);
}

text#logo-subtext {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 0.65em;
    font-style: normal;
    font-weight: 500;
    fill: var(--money-dark);
}

.navigation {
    grid-area: navigation;
}

.navigation ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
}

.article {
    grid-area: article;
}

.footer {
    padding-top: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". links credits copyright .";
    grid-area: footer;
}

.links {
    grid-area: links;
}

.credits {
    grid-area: credits;
}

.copyright {
    grid-area: copyright;
}

/* Media Queries */

@media (max-width: 768px) { /* You can adjust the breakpoint (768px) as needed */
    
    .container {
        /* padding and margin are needed in this case */
        padding: 0 1rem;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "header"
            "navigation"
            "article"
            "footer";
    }

    .header {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "logo logo logo";
        grid-area: header;
    }

    .footer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "links credits copyright";
        grid-area: footer;
    }
    
    .navigation ul {
        flex-direction: column;
        align-items: flex-start;
    }


}