*{
    margin: 0;
    padding: 0;
    font-family: 'Bree Serif', serif;
    font-family: 'Roboto Mono', monospace;
}

/* Navbar-Styling */
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: beige;
    padding: 10px 30px 10px 30px;
    color: black;
  }

  .navigation img{
    border-radius: 50%;
    height: 50px;
}
  
  .nav-nav-tabs {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  
  .nav-item {
    margin-right: 20px;
  }
  
  .nav-link {
    color: black;
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  /* Hover-Animation */
  .nav-link:hover {
    background-color: black;
    color: white;
  }
  
  .nav-link a:active{
    background-color: black;
    color: white;
  }
  
.addItems{
    padding: 10px 30px 10px 30px;
    display: flex;
}

#createdList1{
  padding: 10px 30px 10px 30px;
  list-style: none;
  font-size: 20px;
}


#createdList{
  padding: 10px 30px 10px 30px;
  list-style: none;
  font-size: 20px;
}

/* Note that you only needs to edit the config to customize the button! */

.addItems button{
    margin-left: 10px;
}

.transferButton{
    padding: 10px 30px 10px 30px;
}

.button {
    position: relative;
    padding: 10px 22px;
    border-radius: 6px;
    border: none;
    color: #fff;
    cursor: pointer;
    background-color: black;
    transition: all 0.2s ease;
  }
  
  .button:active {
    transform: scale(0.96);
  }
  
  .button:before,
  .button:after {
    position: absolute;
    content: "";
    width: 150%;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1000;
    background-repeat: no-repeat;
  }
  
  .button:hover:before {
    top: -70%;
    background-image: radial-gradient(circle, black 20%, transparent 20%),
      radial-gradient(circle, transparent 20%, black 20%, transparent 30%),
      radial-gradient(circle, black 20%, transparent 20%),
      radial-gradient(circle, black 20%, transparent 20%),
      radial-gradient(circle, transparent 10%, black 15%, transparent 20%),
      radial-gradient(circle, black 20%, transparent 20%),
      radial-gradient(circle, black 20%, transparent 20%),
      radial-gradient(circle, black 20%, transparent 20%),
      radial-gradient(circle, black 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
      10% 10%, 18% 18%;
    background-position: 50% 120%;
    animation: greentopBubbles 0.6s ease;
  }
  
  @keyframes greentopBubbles {
    0% {
      background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
        40% 90%, 55% 90%, 70% 90%;
    }
  
    50% {
      background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
        50% 50%, 65% 20%, 90% 30%;
    }
  
    100% {
      background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
        50% 40%, 65% 10%, 90% 20%;
      background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
  }
  
  .button:hover::after {
    bottom: -70%;
    background-image: radial-gradient(circle, black 20%, transparent 20%),
      radial-gradient(circle, black 20%, transparent 20%),
      radial-gradient(circle, transparent 10%, black 15%, transparent 20%),
      radial-gradient(circle, black 20%, transparent 20%),
      radial-gradient(circle, black 20%, transparent 20%),
      radial-gradient(circle, black 20%, transparent 20%),
      radial-gradient(circle, black 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
    background-position: 50% 0%;
    animation: greenbottomBubbles 0.6s ease;
  }
  
  @keyframes greenbottomBubbles {
    0% {
      background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
        70% -10%, 70% 0%;
    }
  
    50% {
      background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
        105% 0%;
    }
  
    100% {
      background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
        110% 10%;
      background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
  }

.list{
  align-items: center;
  justify-content: center;
}

  input[type="checkbox"] {
    margin-left: 20px; 
  }
  
  /* Ändere die Farbe der Checkboxen */
  input[type="checkbox"] {
    appearance: none; /* Entfernt das Standard-Styling der Checkbox */
    width: 15px; /* Legt die Breite der Checkbox fest */
    height: 15px; /* Legt die Höhe der Checkbox fest */
    border: 2px solid #333; /* Ändere die Border-Farbe */
    background-color: #fff; /* Ändere die Hintergrundfarbe */
    border-radius: 4px; /* Fügt abgerundete Ecken hinzu */
    cursor: pointer; /* Zeigt den Zeiger als Handzeiger an */
  }
  input[type="checkbox"]:checked {
    background-color: #333; /* Ändere die Hintergrundfarbe, wenn abgehakt */
  }


  li button text{
    align-items: center;
    justify-content: center;
  }

  li button{
    align-items: center;
    justify-content: center;
    border-color: black;
    color: #ffffff; /* Weiße Schriftfarbe */
    background-color: #333;
    border: solid 1px; /* Kein Rahmen */
    border-radius: 50%; /* Kreisförmiger Rand */
    width: 20px; /* Breite des Buttons */
    height: 20px; /* Höhe des Buttons */
    font-size: 12px; /* Schriftgröße */
    cursor: pointer; /* Zeiger als Cursor-Stil */
    margin-left: 10px; /* Abstand zwischen dem Listenpunkt und dem Button */
  }
  
  /* Hover-Styling für die X-Buttons (wenn der Mauszeiger darüber schwebt) */
  li button:hover {
    color: black;
    background-color: beige; /* Helleres Rot */
  }