:root {
  --brand-col1: #6f191a;
  --brand-col2: #d2a65f;

  --white: #dddddd;
  --black: #111111;

  --body-bg: var(--brand-col1);
  --card-bg: var(--white);
}

body {
    background-color: var(--body-bg);
}

.body-container {
    background-color: var(--card-bg);
    width: 95%;
    margin: 25px auto;
}

header {
    border-bottom: 0.3em solid var(--brand-col2);
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "brand"
      "nav";
}

.header-brand {
    grid-area: "brand";
    padding: 1em;
    display: grid;
    grid-template-columns: 10em auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo title"
      "logo subtitle";
    text-decoration: none;
    color: inherit;
    text-transform: uppercase;
}

.header-brand img {
    grid-area: logo;
    max-width: 8em;
    align-self: center;
}

.header-brand h1 {
    grid-area: title;
    justify-self: left;
    align-self: end;
    margin-bottom: 0px;
    line-height: 1;
}

.header-brand h2 {
    grid-area: subtitle;
    justify-self: left;
    align-self: begin;
    margin-top: 0.5em;
    padding-top: 0.5em;
    font-size: smaller;
    border-top: 1px solid var(--brand-col1);
}

.nav {
    grid-area: "nav";
    display: flex;
    list-style: none;
    padding-left: inherit;
    margin-bottom: 0px;
    background-color: var(--black);
    color: var(--white);
    font-weight: bold;
}
.nav a {
    text-decoration: none;
    color: inherit;
    padding: 0.5em 1em 0.5em 1em;
    display: inline-block;
}

.nav li {
    transition: background-color .25s ease-out;
}

.nav li:hover {
    background-color: var(--brand-col2);
}

main {
    padding: 2em;
}

footer {
    padding-left: 1em;
    padding-right: 1em;
    border-top: 0.3em solid var(--brand-col2);
    font-size: smaller;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    grid-template-areas:
      "copy links";
}

.copyright {
    grid-area: copy;
}

.footer-links {
    grid-area: links;
    display: flex;
    list-style: none;
    justify-self: right;
}

.footer-links li {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.footer-links li:not(:first-child) {
    border-left: 2px solid var(--body-bg);
}

a {
    color: var(--brand-col1);
}

@media (max-width: 600px) {
    footer {
      grid-template-columns: auto;
      grid-template-rows: auto auto;
      grid-template-areas:
        "copy"
        "links";
    }
    .footer-links {
        grid-area: links;
        display: flex;
        list-style: none;
        justify-self: left;
        padding-left: 0px;
    }
}

#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
}
.toast {
  background: #333;
  color: white;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInOut 8s ease forwards;
}
.toast.success { background: #28a745; } /* green */
.toast.error { background: #dc3545; }   /* red */
.toast.warning { background: #ffc107; color: #000; } /* yellow */
@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(-10px); }
  10%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

.open-sans {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.noto-serif {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}