.main-menu {
  width: 25%;
  position: fixed;

  top: var(--body-margin);
  right: var(--body-margin);

  z-index: 10;
}

.main-menu-button {
  text-align: right;
  display: block;

  cursor: pointer;
  transition: color var(--hover-transition-duration);
}

.main-menu-button:hover {
  color: var(--light-gray);
}

.main-menu-button[close] {
  color: var(--light-gray);
}

.main-menu-list {
  display: none;
}

.main-menu-list[show] {
  display: block;
}


.main-menu-list-item {
  text-align: right;
}

.artists-menu:hover {
  color: var(--light-gray);
  transition: color var(--hover-transition-duration);
}

.artists-text-list-item {
  text-align: left;
}

@media only screen and (max-width: 719px) {
  .main-menu {
    width: 50%;
  }
}

@media only screen and (min-width: 720px) and (max-width: 900px) {

}