:root {
  --elem-height: 92px;
  --timeline-event: #333;
  --timeline-event-dark: #111;
}

#legend {
  margin: 1rem auto;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  justify-content: center;

  border: 1px solid var(--quote-border);

  p {
    width: unset;
    margin: 0;
    padding: 0.1rem;

    color: white;
  }
}

.year .month .events {
  background: repeating-linear-gradient(
    0,
    var(--quote-background),
    var(--quote-background) var(--elem-height),
    var(--quote-darker) var(--elem-height),
    var(--quote-darker) calc(2 * var(--elem-height))
  );
}

.year {
  border: 1px solid var(var(--font-color));
  margin-bottom: 3rem;
  width: 100%;

  p,
  a {
    font-size: 18px;
    text-transform: none;
    font-variant: normal;
  }

  h2 {
    margin: 0;
    margin-bottom: 1rem;
    font-size: 3rem;
    text-align: center;
  }

  p {
    width: unset;
    font-weight: normal;
  }

  & > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5rem;

    .month_name {
      font-weight: bold;
      margin: 0;
      border-bottom: 1px solid var(--font-color);
      padding: 0.3rem;
      font-size: 14px;
    }

    .month {
      border: 1px solid var(--font-color);

      display: flex;
      flex-direction: column;
    }

    .events {
      display: flex;
      flex-direction: column;
      min-height: calc(2 * var(--elem-height));

      flex: 1;
    }

    .event_container {
      display: grid;
      grid-template-columns: 32px auto;
      box-sizing: border-box;

      &:last-child {
        margin-bottom: -1px;
      }

      .day {
        color: white;
        text-align: center;
        height: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid var(--font-color);
        border-right: 1px solid var(--font-color);
      }

      p {
        margin: 0;
        min-height: var(--elem-height);
        box-sizing: border-box;
        padding-top: 0.25rem;
      }

      p:last-of-type {
        padding: 0.25rem;
      }
    }
  }
}

.event-arg {
  background: #444;
}

.event-soulstorm {
  background: #306040;
}

.event-killed {
  background: #904035;
}

.event-other {
  background: #c09040;
}

.event-discord {
  background: #650b1d;
}

.event-marketing {
  background: #b07060;
}

.event-patch {
  background: #4444aa;
}

.event-twitch {
  background: #7d418f;
}

@media (max-width: 990px) {
  .year > div {
    grid-template-columns: 1fr;
  }
}