body {
  --dark-blue: #003977;
  --dark-gray: #444444;
  --light-gray: #bbbbbb;

  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  color: var(--dark-gray);

  a {
    color: var(--dark-blue);
  }

  table{
      border-collapse:collapse;
      font-size:0.9rem;
      width:100%
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }

  header {
    max-width: 800px;
    margin: 50px auto 25px;
    padding: 5px;
    border-bottom: 1px solid var(--light-gray);
    font-size: 2rem;

    .title-container {
      justify-content: center;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      max-width: 900px;
      margin: auto;
      text-decoration: none;
    }

    .title-image {
      max-height: 150px;
      max-width: 150px;
      margin-right: 10px;
      display: inline-block;
      text-decoration: none;
    }

    .title-text {
      display: inline-block;
      margin: 0px;
      color: var(--dark-blue);
      font-size: 4.5rem;
      font-family: "Pacifico",sans-serif;
    }

    nav {
      text-align:center;
      font-weight:700;
      font-size: 1rem;

      ul {
        list-style:none;
        padding:0;
        li {
            display:inline-block;
            margin:0 5px
        }
        li:first-child {
          margin-left:0
        }
        li:last-child{
          margin-right:0
        }
      }
    }
  }

  main {
    max-width: 800px;
    margin: 25px auto;
    text-align: left;
  }

  footer {
    max-width: 650px;
    margin: 25px auto 50px;
    padding: 25px;
    border-top: 1px solid lightgray;
    font-size: .85rem;
  }
}

@media (max-width: 500px) {
  body {
    header {
      .title-image {
        max-height: 75px;
        max-width: 75px;
      }

      .title-text {
        font-size: 2.5rem;
      }
    }
  }
}