style.css

/* Fonts
--------------------------------------------------------------- */
@font-face {
  font-family: "Montserrat-Regular";
  src: url("FONT LINK") format("truetype"); 
  
}

@font-face {
  font-family: "FONT NAME";
  src: url("FONT LINK") format("truetype"); 
  
}


/* Body
------------------------------------------------------ */


body {
    font: 600 18px 'Montserrat-Regular', Arial, sans-serif;
    line-height: 1.2;
    margin: 20px;
    padding-bottom: 16px;
}


p, li, a {
    font-size: 1em; /* Standard-Schriftgröße für Text, der nicht durch andere Regeln definiert wird */
    color: #333; /* Einheitliche Textfarbe für bessere Lesbarkeit */
    margin-bottom: 0; /* Fügt einen Standardabstand unterhalb von Absätzen und Listen hinzu */
}

a {
    text-decoration: none; /* Entfernt die Unterstreichung von Links */
    color: #000; /* Farbe für Links */
}

a:hover {
    text-decoration: underline; /* Fügt die Unterstreichung beim Hover zurück */
    color: #000; /* Farbe für Links */
}


/* Headlines
------------------------------------------------------ */


h1 {
    color: #000;
    padding: 20px 0px 0px 8px;
    font-size: 1.2em;
    font-weight: 600;
    
}

h2 {
    color: #000;
    padding: 16px 0px 0px 8px;
    font-size: 1.2em;
    font-weight: 600;
    
}



/* Suchfelder
------------------------------------------------------ */


#searchInput{
    padding: 10px;
    font-size: 16px;
    width: 80%;
    max-width: 400px;
    margin-bottom: 20px;
}

#colorFilter {
    padding: 10px;
    font-size: 16px;
    width: 80%;
    max-width: 400px;
    margin-bottom: 20px;
}



/* Listen
------------------------------------------------------ */


#wordList {
    list-style-type: none; /* Entfernt die Punkte vor den Listenelementen */
    padding: 0; /* Entfernt den Standard-Einzug der Liste */
}

#wordList li {
    padding: 8px 8px 8px 16px;
    font-size: 18px;
}


/* Farbkennungen
------------------------------------------------------ */


.rot {
    background-color: #fff;
    color: #CA1437;
}

.gelb {
    background-color: #fff;
    color: #E0C327;
}

.gruen {
    background-color: #fff;
    color: #469951;
}

.lila {
    background-color: #fff;
    color: #AF2FBA;
}


.hidden {
    display: none;
}