* {
  padding: 0;
  margin: 0;
}

body {
  background: black;
  text-align: center;
  font-size: clamp(12px, 3vh, 20px);
  font-weight: bold;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  overflow-x: hidden;
  user-select: none;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-user-select: none;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-touch-callout: none; 
}

a {
  color: #90C;
  text-decoration: none;
}

.menu {
  background: black;
  max-width: 100vw;
  text-align: center;
}

.menu button {
  float: left;
  background: black;
  color: white;
  font-size: 20px;
  font-weight: bold;
  width: 20vw;
}

.menu > button:hover {
  filter: invert(1);
}

.menu .icon {
  display: none;
}

#hamburger::after {
  content: '\2630';
}

#controls.menu button:active {
  font-size: 15px;
  padding-top: 1px;
  padding-bottom: 3px;
  border-width: 3px;
  border-style: groove;
}

#controls.menu button:nth-child(n+2):nth-child(-n+5) {
  display: block;
  width: 25vw;
  margin: 0;
}

#controls.menu button:nth-child(n+6):nth-child(-n+7) {
  display: block;
  width: 50vw;
  margin: 0;
}

#controls button#reset {
  display: none;
  width: 100vw;
}

#controls.menu.responsive button#reset {
  display: none;
}

#coc-container {
  display: none;
}

@media screen and (width <= 600px) {
  #hamburger.active::after {
    content: '\2715';
    width: 100vw;
    font-size: 14px;
  }

  #hamburger:active::after {
    font-size: 12px;
  }

  .menu button {
    height: 32px;
    width: calc(50% - 24px);
  }

  #controls button:nth-child(n+2):nth-child(-n+5) {
    display: none;
    width: 45vw;
  }

  .menu button.icon {
    float: left;
    display: block;
    width: 48px;
  }

  .menu.responsive {
    position: absolute;
  }

  .menu .responsive #hamburger {
    float: left;
    top: 0;
  }

  .menu button.active {
    width: 100vw;
  }

  #controls.menu.responsive button:nth-child(n+2), #controls.menu.responsive button:nth-child(-n+5) {
    padding: 0 0 2px;
  }

  #controls.menu button:nth-child(n+2):nth-child(-n+5) {
    display: none;
  }

  #controls.menu button:nth-child(n+6):nth-child(-n+8) {
    width: calc((100vw - 48px) / 2);
  }

  #controls.menu.responsive button:nth-child(n+2):nth-child(-n+5) {
    display: block;
    width: 100vw;
    margin: 0;
  }

  #controls.menu.responsive button:nth-child(n+6):nth-child(-n+7) {
    display: none;
  }

  #controls.menu button#reset {
    border: none;
    width: calc(100vw - 48px);
  }

  #controls.responsive #hamburger.active ~ button#reset {
    visibility: hidden;
  }
}