/* Importing Google Fonts */
* {
  box-sizing: border-box;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
.alert-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fcfcfc; /* Default background */
  width: 100%;
  font-family: "Inter", sans-serif;
}

/* A wrapper to constrain the content to a max-width and provide padding */
.alert-content-wrapper {
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically center children */
  max-width: 1280px;
  width: 100%;
  margin: auto;
  padding: 2rem 1.25rem 2rem; /* converted padding */
  box-sizing: border-box;
}

.emergency-alert {
  background-color: #af272f;
  color: #fcfcfc;
}

.emergency-alert .alert-heading,
.emergency-alert .alert-link {
  color: #fcfcfc;
}

.standard-alert {
  background-color: #ffc554;
  color: #4d1979;
}

.alert-icon img {
  width: 48px; /* width not converted as it's not a font-size */
  height: 48px; /* height not converted as it's not a font-size */
  margin-right: 32px; /* margin not converted as it's not a font-size */
  flex-shrink: 0;
}

.alert-content {
  flex-grow: 1;
}

.alert-heading {
  margin: 0;
  padding-bottom: 1rem; /* converted padding-bottom */
  font-size: 1.5rem; /* converted font-size */
  font-weight: 600;
  color: #4d1979;
}

.alert-message {
  margin: 0;
  padding-bottom: 0.5rem; /* converted padding-bottom */
  font-size: 1rem; /* converted font-size */
  font-weight: 500;
}

.alert-link {
  font-size: 1rem; /* converted font-size */
  font-weight: 700;
  color: #4d1979;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .alert-container {
    font-size: 0.875rem; /* converted font-size */
    padding: 0.625rem; /* converted padding */
  }

  .alert-content-wrapper {
    flex-direction: column; /* Stack icon and text on smaller screens */
  }

  .alert-icon img {
    margin-right: 0;
    margin-bottom: 0.625rem; /* converted margin-bottom */
  }
}

/* Slide-down animation */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.alert-container {
  animation: slideDown 0.5s ease-out forwards;
}