index.css

@import 'normalize.css';
@import './colors.css';
@import './form.css';
@import './grid.css';
@import './typography.css';

body {
  border-top: 5px solid var(--orange);
  border-bottom: 5px solid var(--orange);
}

body, header, main {
  background-color: var(--tan);
}

header {
  padding-top: 4rem;

  h4 a:first-child {
    margin-right: 1em;
  }

  h4 a + a {
    margin-left: .5em;
  }

  svg {
    display: inline-block;
    height: 2em;
    width: 2em;
    vertical-align: top;
    margin-top: -.25em;
    path {
      fill: var(--orange);
    }
  }

  ul.nav {
    padding: 0;
    margin: 0 0 1.5rem;
    li {
      display: inline-block;
    }
    li + li {
      margin-left: 1em;
    }
  }
}

main {
  min-height: 90vh;
  padding-bottom: 2rem;

  section {
    margin: 1.5rem 0;

    &:first-child {
      margin-top: 0;
    }
  }
}

footer {
  font-size: x-large;

  @media (--xs-viewport-only) {
    margin: 1rem;
    margin-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  @media (--sm-viewport) {
    padding: 1rem 2rem;
  }

  &.fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

p, ul, .text-gray {
  color: var(--gray);
}

ul {
  padding-left: 22px;
}

table {
  width: 100%;
  margin: 1em auto;

  @media (--sm-viewport) {
    width: 75%;
  }

  td, th {
    padding: 0 5px;
    vertical-align: baseline;
    &:first-child, &:last-child {
      padding: 0;
    }
  }
}

.sponsor {
  margin-bottom: 20px;
}
.sponsor + .sponsor {
  margin-left: 20px;
}

select {
  appearance: none;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjE2Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00IDE2TDAgOWg4TTQgMGw0IDdIMCIvPjwvc3ZnPg==) no-repeat right 10px center;
  border: solid 1px var(--lighter-gray);
  color: var(--gray);
  float: right;
  padding: 0 10px;
}