body {
  background-color: #111;
}

h1, h2, h3, h4, h5, h6, div, span, p {
  color: white;
}

.logo {
  width: 5rem;
  margin-right: 0.5rem;
}

.logo ~ h1 {
  margin: 0;
}

a {
  color: limegreen;
  text-decoration: none;
}

a:hover {
  filter: brightness(70%);
  color: limegreen;
}

@media (min-width: 992px) {
  .container {
    max-width: 80vw;
  }
}

.time-row {
  margin: 0 auto;
}

@media (min-width: 1400px) {
  .time-row {
    max-width: 50vw;
  }
}

.time-row > .col > h1 {
  font-weight: bold;
  font-size: 3rem;
}

@media (min-width: 576px) {
  .time-row > .col > h1 {
    font-size: 4rem;
  }
}

@media (min-width: 992px) {
  .time-row > .col > h1 {
    font-size: 5rem;
  }
}

.card {
  background-color: #222;
  border-radius: 0.5rem;
}

.card > a {
  background-color: #111;
  margin: 1.5rem 0 0 0;
  padding: 1rem;
}

.card > a:hover {
  filter: brightness(100%);
}

.card > a > img {
  height: 6.250rem;
  max-width: 100%;
}

.card-title {
  margin: 1rem;
}

.sponsor-row {
  max-width: 112.5vw;
  /*max-width: 75vw;*/
  margin: 0 auto;
  margin-top: 1rem;
}

.time {
  font-weight: bold;
  font-size: 3.5rem;
}

@media (min-width: 576px) {
  .sponsor-row {
    max-width: 82.5vw;
    /*max-width: 55vw;*/
  }
}

@media (min-width: 768px) {
  .sponsor-row {
    max-width: 105vw;
    /*max-width: 70vw;*/
  }
}

@media (min-width: 992px) {
  .sponsor-row {
    max-width: 90vw;
    /*max-width: 60vw;*/
  }
}

@media (min-width: 1200px) {
  .sponsor-row {
    max-width: 82.5vw;
    /*max-width: 55vw;*/
  }
}

@media (min-width: 1400px) { /* im pretty sure this is the only one that needs to be changed */
  .sponsor-row {
    max-width: 67.5vw;
    /*max-width: 45vw;*/
  }
}

@media (min-width: 1800px) {
  .sponsor-row {
    max-width: 52.5vw;
    /*max-width: 35vw;*/
  }
}

.sponsor-row > .col {
  margin: 0.5rem 0;
}

.social-footer > a > img {
  width: 1.75rem;
}

.social-footer > a > i {
  font-size: 1.75rem;
}

.social-footer > * {
  margin: 0 0.25rem;
  vertical-align: middle;
}