body {
  background-color: #050505;
  font-family: Arial, sans-serif;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative; /* New */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 350px; /* Ensure enough space */
  height: 350px; /* Ensure enough space */
}

.logo {
  width: 300px;
  transition: width 0.5s ease-in-out, transform 1s ease-in-out;
  z-index: 1; /* Make sure logo is above buttons */
}

.button-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -40%);
  width: 300px;  /* Match logo size for easier alignment */
  height: 300px; /* Match logo size */
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0s 0.5s; /* Adjust visibility delay */
  pointer-events: none; /* Prevent interaction when not visible */
}

.button-container.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 0s 0s; /* Remove delay when becoming visible */
  pointer-events: auto; /* Enable interaction when visible */
}

/*a {
  position: absolute;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 0;
  text-decoration: none;
  color: #fafafa;
  background-color: #4f4f4f;
  border-radius: 50%;
  transition: height 0.3s ease, width 0.3s ease, background-color 0.3s ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
a:hover {
  background-color: #b0b0b0;
  height: 70px;
  width: 70px;
  line-height: 70px;
}*/
a {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 140px;
  text-align: center;
  padding: 0;
  text-decoration: none;
  color: #fff9cd;
  font-size: 80%;
  background-color: #4f4f4f;
  border-top-left-radius: 5%;
  border-top-right-radius: 5%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  transition: top 0.3s ease, width 0.3s ease, background-color 0.3s ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.8);
}
a:hover {
  background-color: #606060;
  top: 55%;
}

/* Placement adjustments for each button */
a:nth-child(1) { transform: translate(-50%, -50%) translate(-27px, 40px); }
/*a:nth-child(1) { transform: translate(-50%, -50%) translate(120px, 0); }
a:nth-child(2) { transform: translate(-50%, -50%) translate(0, -120px); }
a:nth-child(3) { transform: translate(-50%, -50%) translate(-85px, 85px); }
a:nth-child(4) { transform: translate(-50%, -50%) translate(0, 120px); }
a:nth-child(5) { transform: translate(-50%, -50%) translate(85px, -85px); }
a:nth-child(6) { transform: translate(-50%, -50%) translate(185px, -75px); }*/