*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --theGradient:
    radial-gradient(
      circle at top center,
      rgba(94, 2, 2, 0.5) 0,
      rgba(94, 2, 2, 0) 280px
    ),
    radial-gradient(
      circle at bottom left,
      rgba(94, 2, 2, 0.25) 0,
      rgba(94, 2, 2, 0) 280px
    ),
    radial-gradient(
      circle at bottom right,
      rgba(94, 2, 2, 0.25) 0,
      rgba(94, 2, 2, 0) 280px
    );
  --clr-gold: #c4a883;
  --clr-gray: #999999;
}
body {
  margin: 0;
  font-family: 'Georgia', serif;
  line-height: 1.5;
}
#headers {
  background: black;
}
body > header,
body > footer {
  min-height: 3em;
  background-color: #000;
  background-image: var(--theGradient), url(noise.png);
  background-repeat: no-repeat, repeat;
  color: var(--clr-gold);
  display: flex;
  align-items: center;
}
body > header .inner {
  width: 100%;
  padding: 1rem 0;
}
.inner {
  max-width: 1200px;
  margin: 0 auto;
}

body > footer > .inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  padding: 1rem 0;
  color: var(--clr-gray);

  .col {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 0;
    }
  }
  a {
    color: var(--clr-gold);
    text-decoration: none;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}
.pageHeader {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1rem;
  .navi ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    a {
      color: var(--clr-gold);
      text-decoration: none;
    }
    li + li {
      &::before {
        color: var(--clr-gold);
        content: '✦';
        margin-right: 0.5rem;
      }
    }
  }
}