*{                                      /* Globale CSS-Einstellungen */
    font-family: 'Jost', sans-serif;    /*Schriftart "Jost"*/
    scroll-behavior: smooth;            /*Reibungslosen Scroll-Effekt*/
    text-align: center;                 /*Zentriert den Text*/
    list-style: none;                   /*Entfernt das Standard-Listensymbol*/
 
}

:root{                 /*Variablen global Verfügbar*/
    --h1-font: 51px;
    --h2-font: 34px;  /*Variablen definiert*/
    --p-font: 19px;
}


body {
    background-image: url(gebrateneNudeln.jpg); /*Hintergrundbild*/
    backdrop-filter: blur(0.3rem); /*Blur Filter*/
    background-size: cover; /*Grösse des Hintergrundbildes*/
    background-position: center; /*Hintergrundbild zentrieren*/
}

.h1 {
    color: #ff0000; /*Farbe Rot*/
    text-align: center; /*Ist centriert*/
    text-shadow: 2px 2px 2px #000000; /*Schatten Farbe Schwarz*/
    font-size: var(--h1-font); /*Grösse*/
} 

.h2 {
    color: #ff0000; /*Farbe Rot*/
    text-align: center; /*Ist centriert*/
    text-shadow: 2px 2px 2px #000000; /*Schatten Farbe Schwarz*/
    font-size: var(--h2-font); /*Grösse*/
} 

.p {
    color: #ffffff; /*Farbe Weiss*/
    text-align: center; /*Ist centriert*/
    text-shadow: 2px 2px 2px #888; /*Schatten Grau Schwarz*/
    font-size: var(--p-font); /*Grösse*/
}


.ul {
    text-align: center; /*Unsortierte Listen sind centriert*/
} 

.li {
    text-align: center; /*Sortierte Listen sind centriert*/
} 

.ol {
    text-align: center; /*Sortierte Listen sind centriert*/
} 



.a {
    color: #f3f1f1; /*Farbe Weiss*/
    font-size: var(--p-font);
}



.table-container {
    margin: auto; /* zentriert die Box horizontal */
    text-align: center; /* zentriert den Inhalt der Box horizontal */
    max-width: 600px; /* legt die maximale Breite der Box fest */
}

table {
    border-collapse: collapse; /* entfernt Abstände zwischen den Tabellenzellen*/
    width: 100%; /*Breite der Tabelle wird auf 100% des verfügbaren Platzes festgelegt*/
}
th, td {
    padding: 8px; /*Abstand von 8 Pixeln*/
    text-align: left; /*Textausrichtung links*/
    border-bottom: 1px solid #ddd; /*Grenzlinie mit einer Breite von 1 Pixel und einer Farbe von #ddd*/
}
th {
    background-color: #f2f2f2; /*Hintergrundfarbe von #f2f2f2*/
    font-size: var(--p-font); /*Schriftgrösse*/
}

td {
    color: #f1f1f1; /*Farbe*/
    font-size: var(--p-font); /*Schriftgrösse*/
}