/* Animations */
.animate-left {
    animation: slideInLeft 1s forwards;
  }
  
  .animate-right {
    animation: slideInRight 1s forwards;
  }
  
  .animate-top {
    animation: slideInTop 1s forwards;
  }
  
  /* Keyframes for animations */
  @keyframes slideInLeft {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
  
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideInRight {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
  
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideInTop {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
  
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  welcome {
    text-align: center;
  }
  
  .grid-container {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
    flex-direction: column;
  }
  
  @media (min-width: 768px) {
    .grid-container {
      display: flex;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 20px;
      flex-direction: row;
    }
  }
  
  .card {
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    opacity: 0;
  }
  
  h3,
  p {
    margin: 10px 0;
  }
  
  /* Universelle Animationsklasse */
  .fly-in {
    opacity: 0;
    transform: translateX(-100%);
    animation: flyInAnimation 1s forwards;
  }
  
  /* Verschiedene Richtungen für die Animation */
  .fly-left {
    transform: translateX(-100%);
  }
  
  .fly-right {
    transform: translateX(100%);
  }
  
  .fly-top {
    transform: translateY(-100%);
  }
  
  .fly-bottom {
    transform: translateY(100%);
  }
  
  /* Keyframes für die Animation */
  @keyframes flyInAnimation {
    0% {
      opacity: 0;
      transform: translate(0);
    }
  
    100% {
      opacity: 1;
      transform: translate(0);
    }
  }