.menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.styled-box {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 15px;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  /* 1. Gradient Background */
  /* Syntax: linear-gradient(direction, color1, color2) */
  background: linear-gradient(#30302D, #1E1E1F, #1E1E1E);

  /* 2. Drop Shadow */
  /* Syntax: box-shadow: horizontal vertical blur spread color */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Styles applied ONLY when the mouse is over the box */
.styled-box:hover {
  /* 1. Color Change: Shift the gradient or solid color */
  background: linear-gradient(#3D3D3D, #383838, #121212);
  
  /* 2. Glow Effect: Increase blur and spread of the shadow */
  /* Syntax: 0 (x) 0 (y) 20px (blur) 5px (spread) color */
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 1.6);
  
  /* 3. Bonus: Subtle lift effect */
  transform: translateY(-3px);
}
.rounded-box {
    /* Ensures the element only takes up as much width as its content */
    display: inline-block;

    /* Adds space between the text and the border/background */
    padding: 10px 15px;

    /* Sets the background color of the box */
    background-color: #171717;

    /* Sets the text color */
    color: white;

    /* Adds the rounded corners */
    border-radius: 20px;

    /* Optional: adds a subtle shadow for depth */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    /* Optional: removes default underline if using an <a> tag */
 text-decoration: none;
}