/* Typography */
body {
    font-family: 'Poppins', sans-serif;
    color: #000000;
    background-color: #F5F5F7;
    margin: 0;
    padding: 0;
}

.header {
    /* background-color: #4AD6F0; */
    padding: 1rem;
    text-align: center;
}

.logo-container {
    max-width: 600px;
    margin: 0 auto;
}

.logo {
    width: auto; /* Maintains aspect ratio */
    height: auto; /* Maintains aspect ratio */
    max-width: 80%; /* Prevents logo from being larger than its container */
    max-height: 80%; /* Prevents logo from stretching vertically */
    object-fit: contain; /* Ensures the logo fits within its container without distortion */
}

/* Default logo for larger screens (e.g., laptops/desktops) */
@media (min-width: 768px) {
    .logo {
        content: url("/static/logo-laptop.png");
    }
}

/* Mobile-specific logo */
@media (max-width: 767px) {
    .logo {
        content: url("/static/logo-mobile.png");
    }
}

.content {
    text-align: center;
    padding: 2rem;
}

.message-container {
    background-color: #FFFFFF;
    border: 1px solid #E5E8EB;
    border-radius: 8px;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 600px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.headline {
    font-size: 2rem;
    color: #F04DB5;
    margin: 0;
}

.footer {
    background-color: #BDBDCB;
    color: #FFFFFF;
    text-align: center;
    padding: 1rem;
}

/* Aurora Brand Button */
.aurora-button {
    background-color: #F04DB5; /* Primary Pink Color */
    color: #FFFFFF; /* White for text */
    font-family: 'Poppins', sans-serif; /* Brand Typeface */
    font-size: 16px; /* Base size as per font sizing guidelines */
    font-weight: 600; /* Semi-bold for emphasis */
    padding: 12px 24px; /* Comfortable padding for usability */
    border: none; /* Clean design with no borders */
    border-radius: 8px; /* Subtle rounded corners for modern look */
    cursor: pointer; /* Interactive appearance */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
    text-transform: uppercase; /* Emphasizes the call-to-action */
  }
  
  .aurora-button:hover {
    background-color: #E044A8; /* Slightly darker pink for hover effect */
    transform: scale(1.05); /* Enlarges slightly on hover */
  }
  
  .aurora-button:active {
    background-color: #C73A8E; /* Darker pink for active state */
    transform: scale(0.98); /* Slightly shrinks on click */
  }
  
  .aurora-button:disabled {
    background-color: #BDBDCB; /* Medium grey for disabled state */
    cursor: not-allowed; /* Indicates non-interactive state */
    opacity: 0.7; /* Fades to show it's inactive */
  }