.hero {
    background: url('../assets/yin_yang_Koy.jpg') no-repeat center center;
    background-size: contain; /* Bild vollständig anzeigen */
    background-position: center; /* Zentriert anzeigen */
    position: relative;
    color: white;
    height: 100%; /* Hero nimmt die gesamte Höhe des Viewports ein */
}
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgb(0, 0, 0) 30%, rgb(255, 255, 255) 90%);
    opacity: 0.5;
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.notification {
    position: fixed;  /* Fixed positioning to stay in view */
    top: 20px;       /* Adjust the vertical position */
    right: -300px;   /* Initially hidden outside the screen */
    width: 250px;    /* Width of the popup */
    padding: 15px;   /* Spacing within the popup */
    color: white;    /* Text color */
    border-radius: 5px;  /* Rounded corners */
    transition: right 0.5s ease; /* Smooth slide-in effect */
    z-index: 9999;   /* Ensure it's above other elements */
  }
  
  .notification.success {
    background-color: green;  /* Background color for success messages */
  }
  
  .notification.error {
    background-color: red;    /* Background color for error messages */
  }
  .profile-picture {
    width: 40px; /* Größe des Profilbildes */
    height: 40px; /* Gleiche Höhe wie Breite für den Kreis */
    object-fit: cover; /* Passt das Bild an, ohne es zu verzerren */
    border: 2px solid white; /* Weißer Rand um das Bild */
    cursor: pointer; /* Zeigt den Mauszeiger als Pointer an */
}

.card {
    border-radius: 10px; /* Rundungen */
    overflow: hidden; /* Sicherstellen, dass Inhalte nicht herausragen */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.05); /* Leichtes Vergrößern bei Hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Schatten */
}

.card-title {
    font-size: 1.25rem; /* Größerer Titel */
    font-weight: 600;
    color: #333;
}

.card-text {
    font-size: 0.9rem; /* Etwas kleinerer Text */
    line-height: 1.5; /* Bessere Lesbarkeit */
}

.card-img-top {
    height: 200px; /* Einheitliche Bildhöhe */
    object-fit: cover; /* Bild wird passend zugeschnitten */
}

.card-body i {
    transition: transform 0.3s ease;
}
.card:hover .card-body i {
    transform: scale(1.2);
}


nav a {
    color: white;
    margin: 0 20px;
    text-decoration: none;
    font-weight: 600; /* Slightly bolder for better readability */
    transition: color 0.3s ease; /* Smooth transition for hover */
  }
  
  #userName:hover, nav a:hover {
    color: #ffd700; /* Gold color for hover effect */
  }