body {
  --color-sol-rosa: #f7d5cf;
  --color-asphalt: #202121;
  --color-armour: #898c8f;

  margin: 0;
  padding: 20px;
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;

  background-color: var(--color-asphalt);
  color: var(--color-sol-rosa);
}

.light-mode {
  background-color: var(--color-sol-rosa);
  color: var(--color-asphalt);
}

h1 {
  display: flex;
}

a {
  color: var(--color-sol-rosa);
  text-decoration: none;
}

.light-mode a {
  color: var(--color-asphalt);
  text-decoration: none;
}

.light-mode-button {
  margin-left: auto;
  cursor: pointer;
}

h1, h2, h3 {
  font-family: 'League Spartan', sans-serif;
}

.chants {
  --gap: 20px;

  display: grid;
  gap: var(--gap);

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        clamp(
          33.3333% - var(--gap),
          (40rem - 100%) * 999,
          100%),
        1fr
      )
    );
}

.chant {
  padding: 1.35rem;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;

  border-color: var(--color-armour);
}

aside {
  display: inline-block;
  font-style: italic;
}

.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.yt-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}