/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* Body background and font */
body {   
     background-image: url('http://dl7.glitter-graphics.net/pub/2730/2730267baqumpdcd2.gif');
     background-attachment: fixed;
background-repeat: repeat;
    font-family: "Playpen Sans", cursive;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
}

/* Container styling */
#main-container {
    background-color: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 500px;
}

/* Heading colors */
h1 {
    color: #ff477e;
}

/* Gift styling and animation */
#gift-box {
    font-size: 80px;
    cursor: pointer;
    transition: transform 0.3s ease;
    margin: 20px 0;
}

#gift-box:hover {
    transform: scale(1.1);
}

/* Hidden message class */
.hidden {
    display: none;
}

#hidden-message {
    font-size: 18px;
    color: #F56EA2;
    animation: fadeIn 1s ease-in;
}

/* Fade-in effect */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
#friend-photo {
    width: 500px;
    height: auto;
    background-color: white; /* Fills behind the photo */
    padding: 10px 10px 30px 10px; /* Thicker padding at the bottom */
    border: 1px solid #ddd; /* Subtle outer line */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Soft drop shadow */
}

a {
  color: #ff5733; 
  text-decoration: underline;
}

/* When the user hovers over the link */
a:hover {
  color: #ffcc00;
  text-decoration: none;
}

/* When the link has already been clicked */
a:visited {
  color: #8800cc;
}

/* When the link is actively being clicked */
a:active {
  color: #ff0000;
}