:root {
  --background-color: rgb(7, 10, 12);
  --c1: rgb(79, 17, 177);
  --c2: rgb(121, 8, 76);
  --c3: rgb(153, 18, 99);
}

#menu {
  align-items: center;
  display: flex;
  height: 100vh;
  overflow: hidden;
}


#menu-items {
  margin-left: clamp(4rem, 15vw, 48rem);
  position: relative;
  list-style-type: none; /* Remove bullet points from the list */

}

.menu-item:hover {
  opacity: 1;
}

#menu-items:hover > .menu-item {
  opacity: 0.3;
}

#menu-items:hover > .menu-item:hover {
  opacity: 1; 
}

a {
  font-size: 5rem;
  color: rgb(255, 251, 235);
  cursor: pointer;
  transition: opacity 300ms ease;
  text-decoration: none;
}

.menu-item {
  transition: opacity 300ms ease;
  text-decoration: none;
}

#clock {
  font-size: 4em;
  color: rgb(17, 253, 222);
  display: block;
  transition: opacity 300ms ease;
  text-decoration: none;
  position: absolute;
  cursor:none;
}


/* General media query for mobile devices */
@media only screen and (max-width: 768px) {
  #menu-items {
    margin-left: 1rem; /* Adjust margin for better spacing on mobile */
  }

  .menu-item a {
    font-size: 4em; /* Set font size to 3.5% of viewport width */
    margin-bottom: 1rem; /* Adjust spacing between menu items on mobile */
  }

  #clock {
    font-size: 2em; /* Adjust font size for the clock on mobile */
  }
}

/*
#second-page {
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: opacity 0.5s ease;
  background-color: white;
  color: black;
}


*/