#year {
  font-family: mono;
  font-size: 1.2em;
}

#controls {
  width: var(--main-width);
  margin: auto;
}

#controls #plus-minus {
  display: flex !important;
  justify-content: space-between;
  padding: 20px 8px;
}

#slider-container {
  text-align: center;
}

#slider-container svg rect:nth-child(1) {
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));
}

section:nth-of-type(odd) square {
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
  background-color: var(--background-3);
}

#plus,
#minus {
  fill: var(--foreground-2);
}

section {
  background-color: var(--background) !important;
}

square {
  width: calc(calc(var(--main-width) / 3) - var(--square-margins));
}

square.release {
  background-color: var(--background) !important;
  box-shadow: unset !important;
}

square.release .image {
  width: 100%;
  height: 35em;
}

square.release.archive {
  width: calc(calc(var(--main-width) / 6) - var(--square-margins));
  min-height: unset;
}

square.release.archive .image {
  height: 20em;
}

#releases-header {
  margin: auto;
  text-align: center;
  font-weight: bold;
  font-family: mono;
}

@media (max-width: 80em) {
  #controls {
    width: 100%;
    margin: auto;
  }

  square .info {
    flex-flow: row wrap;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 1em;
  }

  square .info .name {
    order: 3;
    width: 100%;
  }
}