/* Reset some basic elements */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Open Sans', Arial, sans-serif;
}

/* Body and html styling */
body {
    background-color: #fff8e7; /* Soft warm peach background */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Container for the logo and buttons */
.container {
    width: 100%;
    max-width: 360px;
}

/* Styling the logo wrapper */
.logo-wrapper {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    width: 130px;
    height: 130px;
    object-fit: cover;
    background-color: transparent;
}

/* New style for the text below the logo */
.logo-text {
    font-size: 28px;
    color: #556270; /* Muted slate for the text */
    margin-top: 8px;
}

/* Styling for the link buttons */
.links {
    display: flex;
    flex-direction: column;
}

.link-button {
    background-color: #ff7043; /* Vibrant coral for buttons */
    color: white;
    padding: 12px 24px;
    margin: 8px 0;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 20px;
    transition: background-color 0.3s, transform 0.3s;
}

/* Hover effect for buttons */
.link-button:hover {
    background-color: #ffa726; /* Zesty orange for the hover effect */
    transform: translateY(-2px);
}

/* Keyframes for the entire bounce sequence including the wait */
@keyframes bounceSequence {
    0%, 7.69%, 100% { /* No movement at the beginning, the end, and during the wait */
      transform: translateY(0);
    }
    2.88%, 4.81% { /* Highest point of the bounce */
      transform: translateY(-10px);
    }
    3.85%, 5.77% { /* Coming down from the bounce */
      transform: translateY(-5px);
    }
  }
  
  /* Animation duration is the total cycle time */
  .link-button {
      animation-name: bounceSequence;
      animation-duration: 10.4s; /* Total time for one complete sequence */
      animation-iteration-count: infinite;
      animation-timing-function: ease;
  }
  
  /* Apply the bounce animation to each link with different start times */
  .link-button:nth-child(1) {
      animation-delay: 0s; /* Starts immediately */
  }
  
  .link-button:nth-child(2) {
      animation-delay: 0.8s; /* Starts 0.8 seconds after the first one */
  }
  
  .link-button:nth-child(3) {
      animation-delay: 1.6s; /* Starts 1.6 seconds after the first one */
  }

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .links {
        width: 90%;
        margin: auto;
    }
}