/* General link style (default) */
a {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
    font-size: 20px;
}

.main-bg {
  background: url('main page.png') center center / contain no-repeat;
  background-color: black; /* fills empty space when aspect ratio differs */
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.start-button {
  text-decoration: underline;
  color: blue;
  font-family: Consolas, monospace;
  font-size: 2rem;
  font-weight: bold;
}


/* Special style for the Start button */
.start-button {
    position: relative;
    top: -120px; /* moves down 100px from its original spot */
    text-decoration: underline;        /* underline text */
    color: blue;                        /* blue text */
    font-family: Consolas, monospace;   /* Consolas font */
    font-size: 28px;                    /* bigger text */
    font-weight: bold;
    margin-top: 300px;                   /* ⬅ pushes it down by 50px */

}

.start-button:hover {
    color: darkblue; /* darker blue on hover */
}

/* Special style for the Make a Wish button to match Start */
.wish-button {
    position: relative;
    top: -60px; /* moves down 100px from its original spot */
    text-decoration: underline;
    color: rgb(252, 218, 0);
    font-family: Consolas, monospace;
    font-size: 24px;
    font-weight: bold;
    margin-top: 300px;                   /* ⬅ pushes it down by 50px */


}

.wish-button:hover {
    color: rgb(255, 227, 90);
}

/* Special style for the Make a Wish button to match Start */
.blow-button {
    position: relative;
    top: -80px; /* moves down 100px from its original spot */
    text-decoration: underline;
    color: rgb(252, 218, 0);
    font-family: Consolas, monospace;
    font-size: 24px;
    font-weight: bold;
    margin-top: 300px;                   /* ⬅ pushes it down by 50px */


}

.wish-button:hover {
    color: rgb(255, 227, 90);
}

/* Centered layout for your pages */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #fff5f8;
}

.main-image {
  width: 100%;
  height: auto;
}

/* Slideshow image styling */
#slideshow {
    max-width: 80%;
    height: auto;

}

/* Greeting text styling */
#greeting {
  position: absolute;      /* Use absolute to overlay without shifting layout */
  left: 50%;
  top: 20%;                /* Adjust as needed for vertical placement */
  transform: translate(-50%, -50%);
  font-family: Consolas, monospace;
  font-size: 3.3rem;
  color: #ff69b4;
  text-align: center;
  font-weight: bold;
  display: none;
  margin-top: 0;           /* Remove margin */
  z-index: 10;             /* Ensure it's above other elements */
}

/* Cake image auto fit */
#cake {
    max-width: 90%;
    height: auto;
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
    .start-button {
        font-size: 1.5rem;
    }

    .wish-button {
        font-size: 1.2rem;
    }

    #greeting {
        font-size: 1.5rem;
    }
}

.name-input {
  width: 150px;
  padding: 5px 10px;
  margin-bottom: 24px;
  border-radius: 30px;
  border: 2px solid #ffaa00;
  font-family: Consolas, monospace;
  font-size: 1rem;
  text-align: center;
  outline: none;
  position: absolute;      /* Add this */
  top: 480px;               /* Distance from top */
  left: 50%;               /* Center horizontally */
  transform: translateX(-50%);
  z-index: 100;
  color: #ffffff;            /* <-- Text color */
  background-color: #ffaa00; /* <-- Background color */
}