body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
 background-color:#222 ;
/* background-color: #f2f2f2;*/
}

.container {
 max-width: 800px;
 margin: 20px auto;
 background-color: gainsboro;
 padding: 20px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
 color: #008080;
 text-align: center;
}

.example {
 display: flex;
 justify-content: space-around;
 margin-top: 20px;
}

.example div {
 text-align: center;
 font-weight: 600;
}

.example img {
 width: 100px;
 height: 100px;
}

.grammatik {
 margin-top: 20px;
}

.div {
 background-color: #f0f8ff;
 padding: 10px;
 margin-bottom: 15px;
 border-radius: 5px;
 font-weight: 700;
}

.div p {
 margin: 5px 0;
}

table {
 width: 70%;
 margin: 20px auto;
 border-collapse: collapse;
}

th, td {
 border: 1px solid #ddd;
 padding: 8px;
 text-align: center;
}

th {
 background-color: #008080;
 color: #fff;
}

.grammatik .div p[style="color: teal"] {
 color: teal;
}
.buttons {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
}

.btn {
 text-align: center;
 border-radius: 10px;
 background-color: #ff0057;
 border: none;
 width: 150px;
 height: 50px;
}

.btn a {
 text-decoration: none;
 color: white;
 font-size: 20px;
 padding: auto;
 
}

button {
 padding: 10px 20px;
 background-color: teal;
 text-align: center;
 color: #fff;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 font-size: 18px;
 margin: 20px 10px;
 transition: background-color 0.2s;
}