:root {
  --bg-color: #121520;
  --caret-color: #fff;
  --main-color: #fff;
  --sub-color: #676e8a;
  --text-color: #fff;
  --error-color: #da3333;
  --error-extra-color: #791717;
  --colorful-error-color: #da3333;
  --colorful-error-extra-color: #791717;
}

#menu {
  gap: 0.5rem;
}

#top.focus #menu .icon-button,
#top.focus #menu:before,
#top.focus #menu:after {
  background: var(--sub-color);
}

#menu .icon-button {
  border-radius: 10rem !important;
  color: #121520;
}

/* #menu:before{
    content: "";
    background: #f94348;
    width: 1.25rem;
    height: 1.25rem;
    padding: .5rem;
    border-radius: 10rem;
} */

#menu .icon-button:nth-child(1) {
  background: #f94348;
}

#menu .icon-button:nth-child(2) {
  background: #9261ff;
}

#menu .icon-button:nth-child(3) {
  background: #3cc5f8;
}

#menu .icon-button:nth-child(4) {
  background: #4acb8a;
}

#menu .icon-button:nth-child(5) {
  background: #ffd543;
}

#menu .icon-button:nth-child(6),
#menu .icon-button:nth-child(7) {
  background: #ff9349;
}

/* #menu:after{
    content: "";
    background: #ff9349;
    width: 1.25rem;
    height: 1.25rem;
    padding: .5rem;
    border-radius: 10rem;
} */

#top.focus #menu .icon-button.discord::after {
  border-color: transparent;
}