/* styles.css */

    body {
        background-color: #f2f2f2; /* Hintergrundfarbe Grau */
        color: #FFFFFF; /* Textfarbe Weiß */
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
    }

#categorySelect {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 200px; /* Oder eine andere gewünschte Breite */
    box-sizing: border-box;
    appearance: none; /* Entfernt Standard-Pfeil in einigen Browsern */
    -webkit-appearance: none; /* Für WebKit-basierte Browser (Safari, Chrome) */
    -moz-appearance: none; /* Für Firefox */
    background-color: #fff; /* Hintergrundfarbe */
    color: #333; /* Textfarbe */
}
    #linkForm {
        margin-bottom: 30px;
         text-align: center; /* Zentrieren des Formulars */
    }
 #linkForm button[type="submit"] {
    background-color: #008CBA; /* Ändern Sie die Hintergrundfarbe des Buttons */
    color: white; /* Ändern Sie die Textfarbe des Buttons */
    border: none; /* Entfernen Sie die Button-Grenze */
    padding: 10px 20px; /* Ändern Sie das Padding des Buttons */
    cursor: pointer; /* Zeigen Sie den Cursor als Zeigegerät an */
    border-radius: 5px; /* Runde die Ecken des Buttons */
    transition: background-color 0.3s; /* Fügen Sie eine Übergangsanimation für die Hintergrundfarbe hinzu */
}

#linkForm button[type="submit"]:hover {
    background-color: #005f75; /* Ändern Sie die Hintergrundfarbe des Buttons beim Überfahren */
}
#linkInput,
#labelInput {
    flex: 1; /* Teilen Sie den verfügbaren Platz gleichmäßig zwischen den Eingabefeldern */
    padding: 10px; /* Ändern Sie das Padding der Eingabefelder */
    margin-right: 10px; /* Fügen Sie einen Abstand zwischen den Eingabefeldern hinzu */
    border: 1px solid #ccc; /* Fügen Sie eine Grenze um die Eingabefelder hinzu */
    border-radius: 5px; /* Runde die Ecken der Eingabefelder */
    box-sizing: border-box; /* Berücksichtigen Sie das Padding und die Grenze in der Breite */
}

#linkInput:focus,
#labelInput:focus {
    outline: none; /* Entfernen Sie die Standardkontur beim Fokussieren */
    border-color: #008CBA; /* Ändern Sie die Farbe der Eingabefeldgrenze beim Fokussieren */
}
    #logo {
        max-width: 200px; /* Maximalbreite des Logos */
        margin: 0 auto; /* Zentrieren des Logos */
    }
#linkCategories {
    display: flex;
    justify-content: center; /* Zentriert die Kategorien horizontal */
    flex-wrap: wrap; /* Ermöglicht das Umbrechen der Kategorien in mehreren Zeilen */
    gap: 20px;
    margin-top: 20px;
    width: 100%; /*  Optional:  Stellen Sie sicher, dass #linkCategories die volle Breite einnimmt */
}

.link-category {
    text-align: center;
}
#linkList,
#microsoftList,
#sonstigesList {
    border: 2px solid #ccc; /* Rahmen um die Linkliste */
    padding: 10px;
    background-color: #008CBA;
    border-radius: 10px; /* Abgerundete Ecken */
    max-width: 880px; /* Maximale Breite der Linkliste */
    /* margin: 0 auto; /* Zentrieren der Linkliste */
    padding-left: 20px; /* Links einrücken */
    }
    .link-item {
    position: relative; /* Relative Positionierung für den DEL-Button */
    display: inline-block;
    margin: 10px;
    text-align: center;
    font-size: 16px; /* Schriftgröße */
    font-weight: bold; /* Fett */
    }
.link-item a,
.link-item a:hover {
    color: white !important; /* Ändert die Farbe der Links und bei Hover auf Weiß */
}
    .link-item img {
        max-width: 200px; /* Maximale Breite des Bildes */
        height: auto;
        display: block;
        margin: 0 auto 5px; /* Zentrieren des Bildes */
    }
    .link-item label {
        display: block;
        margin-bottom: 5px;
        cursor: pointer; /* Ändert den Mauszeiger in ein Zeiger-Symbol */
    }
    .link-item button {
        background-color: #f44336; /* Rot */
        color: white;
        border: none;
        text-align: center;
        text-decoration: none;
        font-size: 10px;
        cursor: pointer;
        display: none;
        position: absolute;
        bottom: 0px; /* Abstand nach unten */
        left: 100%; /* Zentriert horizontal */
        transform: translateX(-50%); /* Zentriert horizontal */
    }
    .link-item:hover {
    background-color: #749e4f; /* Ändern Sie die Hintergrundfarbe beim Überfahren mit der Maus */
    }
.link-item:hover button {
    display: inline-block; /* Zeige den DEL-Button beim Hover über das Listenelement */
   }
    #clock-container {
        text-align: center;
        margin: 20px auto; /* Zentrieren des Containers */
    }
    #clock {
        font-size: 48px; /* Größere Schriftgröße für die Uhr */
        background-color: #000000; /* Hintergrundfarbe Schwarz für die Uhr */
        padding: 10px; /* Innenabstand der Uhr */
        border-radius: 10px; /* Abgerundete Ecken des Rahmens */
        color: #ffffff; /* Textfarbe Weiß für die Uhr */
        display: inline-block; /* Container auf die Breite des Inhalts begrenzen */
       }
    #date {
        font-size: 24px; /* Schriftgröße für das Datum */
     }

   #greeting {
        text-align: center;
        font-size: 32px;
        color: #008CBA;
        margin-bottom: 20px;
    }
    #exportButton, #importInput {
        display: inline-block;
        margin: 20px auto; /* Zentriert die Buttons horizontal */
    }
    #searchForm {
        text-align: center; /* Zentrieren des Formulars */
    }
    #searchForm label {
        display: inline-block;
        margin-right: 10px;
        background-color: #ccc;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
    }
    #searchForm label:hover {
        background-color: #ddd;
    }
    #searchForm input[type="text"], #searchForm input[type="submit"] {
        margin-right: 10px;
    }
    #searchForm input[type="text"] {
        width: 400px; /* Größeres Suchfeld */
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
    #searchForm input[type="submit"] {
        padding: 10px 20px;
        border: none;
        background-color: #007bff;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
    }
    #searchOptions {
        margin-top: 10px;
    }
    #searchOptions input[type="radio"] {
        display: none;
    }
    #searchOptions label {
        display: inline-block;
        margin-right: 10px;
        background-color: #ccc;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
    }
    #searchOptions label:hover {
        background-color: #ddd;
    }
    #searchOptions input[type="radio"]:checked + label {
        background-color: #007bff;
        color: #fff;
    }
#copyright {
    position: fixed;
    bottom: 10px;
    right: 10px;
    color: #666; /* Farbe des Copyright-Texts */
    font-size: 14px; /* Schriftgröße des Copyright-Texts */
}
#quote-container {
    text-align: center; /* Zentrieren des Texts horizontal */
}

#quote {
    font-size: 24px;
    font-style: italic;
    max-width: 600px; /* Maximale Breite des Zitats */
    margin: 0 auto; /* Zentrieren des Zitats */
}

 #todoContainer {
        background-color: #e0f2f1; /* Hintergrundfarbe Blau */
        border: 0px solid #008CBA; /* Rahmen um den Container */
        border-radius: 10px; /* Abgerundete Ecken */
        padding: 10px; /* Innenabstand des Containers */
        max-width: 750px; /* Maximale Breite des Containers */
        margin: 20px auto; /* Zentrieren des Containers */
    }
    #todoForm {
        text-align: center;
        margin-bottom: 20px;
    }
    #todoInput {
        width: 60%; /* Ändere die Breite des Eingabefelds nach Bedarf */
        padding: 5px; /* Füge etwas Polsterung hinzu */
        padding-left: 40px;
        font-size: 14px; /* Ändere die Schriftgröße nach Bedarf */

    }
    #todoList {
        border: 0px solid #ccc; /* Rahmen um die Todo-Liste */
        border-radius: 10px; /* Abgerundete Ecken */
        max-width: 720px; /* Maximale Breite der Todo-Liste */
        margin: 0 auto; /* Zentrieren der Todo-Liste */
        padding-left: 20px; /* Links einrücken */
        list-style-type: none; /* Entferne Aufzählungszeichen */
    }
    .todo-item {
        background-color: #b0cbd4;
        padding: 8px;
        margin-bottom: 5px;
        border-radius: 5px;
        color: #ffffff;
        font-size: 14px;
    }
    .todo-item input[type="checkbox"] {
        margin-right: 10px;
    }
    .todo-item.completed span {
        text-decoration: line-through;
        color: #000000; /* Textfarbe Schwarz */
    }
    .todo-item button {
        background-color: #f44336; /* Rot */
        color: white;
        border: none;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        border-radius: 3px;
        margin-left: 10px;
    }
    #notes-container {
        text-align: center;
        background-color: #e0f2f1; /* Hintergrundfarbe Blau */
        border: 0px solid #008CBA; /* Rahmen um den Container */
        border-radius: 10px; /* Abgerundete Ecken */
        padding: 10px; /* Innenabstand des Containers */
        max-width: 700px; /* Maximale Breite des Containers */
        margin: 20px auto; /* Zentrieren des Containers */
    }
    #note-input {
        width: 80%; /* Ändere die Breite des Eingabefelds nach Bedarf */
        padding: 10px;
        margin-bottom: 10px;
    }
    #add-note {
        background-color: #4caf50; /* Grün */
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin-bottom: 10px;
        cursor: pointer;
        border-radius: 5px;
    }
    #note-list {
        list-style-type: none;
        padding: 0;
    }
    #note-list li {
        background-color: #ffffff; /* Weiß */
        color: #000000;
        padding: 10px;
        font-size: 14px;
        margin-bottom: 10px;
        border-radius: 5px;
    }
    #note-list li button {
        background-color: #f44336; /* Rot */
        color: white;
        border: none;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        border-radius: 3px;
        margin-left: 10px;
    }