input[type=checkbox] {
  display: none;
}

@media (max-width: 760px) {
  input[type=checkbox]:checked~.menu {
    display: block;
  }
}

.hamburger {
  display: none;
  font-size: 32px;
  user-select: none;
  color: rgb(255, 255, 255);
}


@media (max-width: 760px) {
  .hamburger {
    display: block;
  }
}

.nav-links {
  margin-right: 22%;
}

@media (max-width: 760px) {
  .nav-links {
    margin-right: 10%;
  }
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 200;
}

.menu {
  display: flex;
  gap: 20px;
  font-size: 16px;
}

.menu a:hover {
  color: rgb(200, 80, 80);
}

@media (max-width: 760px) {
  .menu {
    display: none;
    position: absolute;
    background-color: rgb(140, 140, 140);
    right: 0;
    left: 0;
    text-align: center;
    padding-top: 8px;
    font-size: 16px;
    margin-top: 20px;
    margin-right: 0;
  }

  .menu div {
    padding-bottom: 8px;
  }

}