:root {
  color: #eee;
  background: #111;
  font-family: system-ui, sans-serif;
  --fc-border-color: #444;
  --fc-button-bg-color: #333;
  --fc-button-border-color: #555;
  --fc-button-hover-bg-color: #444;
  --fc-button-hover-border-color: #777;
  --fc-button-active-bg-color: #485f22;
  --fc-button-active-border-color: #b8e85d;
  --fc-event-bg-color: #485f22;
  --fc-event-border-color: #89ad43;
  --fc-event-text-color: #fff;
  --fc-list-event-hover-bg-color: #222;
  --fc-neutral-bg-color: #222;
  --fc-page-bg-color: #111;
  --fc-today-bg-color: rgb(184 232 93 / 10%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  width: min(1100px, calc(100% - 2rem));
  margin: 2rem auto;
}

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

a,
.fc a {
  color: inherit;
}

#calendar {
  padding: 1rem;
  border: 1px solid #444;
}

@media (max-width: 700px) {
  main {
    width: calc(100% - 1rem);
    margin: 1rem auto;
  }

  header {
    display: block;
  }

  #calendar {
    padding: 0.5rem;
  }

  .fc .fc-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .fc .fc-toolbar-chunk:nth-child(2) {
    order: -1;
    width: 100%;
  }
}