* {
  font-family: Arial, sans-serif;
  font-weight: bold;
}

body {
  margin: 0;
  padding: 0;
  background-color: #336699;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #0d1c33;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  border-bottom: 1px solid #0d1c33;
}

nav ul li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #336699;
}
main {
  padding: 20px;
}

h1 {
  margin-top: 0;
}

footer {
  padding: 20px;
  border-top: 1px solid #ddd;
  background-color: #c4dfe6;
}

.content-box {
  display: flex;
  flex-direction: column;
  width: 80%;
  background-color: #c4dfe6;
  padding: 20px;
  border-radius: 10px;
  margin-left: 200px;
  margin-right: auto;
}

.download-button {
  display: inline-block;
  background-color: #0d1c33;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  width: 10%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.download-button:hover {
  background-color: #3e8e41;

}

table {
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}

th,
td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

th {
  
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}
.AufgabenFeld{
  text-align: left;
}

.button {
  background-color: #0d1c33;
  color: white;
  border-radius: 8px;
  font-size: 16px;
  padding: 12px 24px;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease;
}

.buttons-div{
  text-align: center;
}

.gif{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  border-radius: 1%;
}

.skizzen{
  text-align: center;

}

.tastatur{
  text-align: center;
}

h1{
  font-size: 35px;
}



/*
-Die erste Zeile * ist ein Selektor, der auf alle Elemente auf der Website angewendet wird. Die darin enthaltene CSS-Anweisung legt fest, dass die Schriftart Arial oder eine Standardschriftart verwendet werden soll.

-body ist der Hauptabschnitt der Website und stellt den Hintergrund dar. Hier wird der obere Hintergrund auf die Farbe #66a5ad gesetzt.

-header definiert den Abschnitt oben auf der Website. Die CSS-Anweisungen definieren die Höhe, die Ausrichtung und den Inhalt des Abschnitts. Die Hintergrundfarbe ist #07575b und es gibt eine untere Trennlinie mit der Farbe #07575b.

-nav ul und nav li definieren die Navigationselemente, die normalerweise horizontal angezeigt werden. nav a definiert die Links in der Navigation. Die CSS-Anweisungen legen die Abstände zwischen den Elementen, die Textfarbe und die Hintergrundfarbe der Links fest. Beim Überfahren der Links mit der Maus wechselt die Hintergrundfarbe auf #66a5ad.

-main definiert den Hauptinhalt der Website und h1 ist eine Überschrift. Es gibt keine spezifischen CSS-Anweisungen, die hier besonders hervorstechen.

-footer definiert den unteren Abschnitt der Website. Der Hintergrund ist #d1cbcb und es gibt eine obere Trennlinie mit der Farbe #ddd. Der content-box Abschnitt innerhalb des main definiert einen Inhaltsbereich, der von einer Box umgeben ist. Die CSS-Anweisungen definieren die Größe, Ausrichtung und den Inhalt der Box. Die Hintergrundfarbe ist #c4dfe6 und die Box ist abgerundet mit einer Breite von 10 Pixeln.

-Insgesamt werden die verschiedenen CSS-Anweisungen in diesem Code verwendet, um das Erscheinungsbild der Website zu gestalten. Die Farben, Abstände und Ausrichtungen, die in den verschiedenen Abschnitten definiert sind, tragen dazu bei, dass die Website ansprechend aussieht und benutzerfreundlich ist.
*/