.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 50%; /* 20px from the left */
    top: 50%; /* 20px from the top */
    transform: translate(-50%, -50%);
    width: auto; /* Auto width based on content */
    height: auto; /* Auto height based on content */
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    padding: 20px;
    border: 0px solid #888;
    width: 680px; /* Adjust width as needed */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    opacity: 0.95;
    font-family: 'Verdana'; /* Setting the font to Courier */
    font-size: 18px;
    color: #ff3333;
    text-align: center;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-content a, /* Stile für Links im Modal */
.modal-content a:visited { /* und besuchte Links */
    color: #ff3333; /* Linkfarbe */
    /*text-decoration: none; /* Optional: Entfernt die Unterstreichung */
}

.modal-content a:hover,
.modal-content a:focus { /* Stile für Hover- und Fokus-Zustände */
    color: #ff6666; /* Veränderte Linkfarbe beim Hover/Fokus */
    text-decoration: underline; /* Optional: Fügt Unterstreichung hinzu */
}
#controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fefefef2; /* Halb-durchsichtiger weißer Hintergrund */
    border: none;
    opacity: 1; /* Stellt sicher, dass die Steuerelemente selbst nicht durchsichtig sind */
    display: flex;
    align-items: center; /* Zentriert die Buttons vertikal */
    justify-content: center; /* Zentriert die Buttons horizontal */
}

#controls button {
    border: none; /* Entfernt den Rahmen */
    outline: none; /* Entfernt den Fokus-Rahmen, der beim Klicken erscheinen könnte */
    font-size: 18px;
    background-color: transparent; /* Macht den Hintergrund der Buttons transparent */
    color: #a19126; /* Farbe der Schrift */
    cursor: pointer; /* Zeigt den Zeiger-Cursor, um die Klickbarkeit anzudeuten */
    /*text-shadow: -1px -1px 2px #bbb, 1px -1px 2px #bbb, -1px 1px 2px #bbb, 1px 1px 2px #bbb;*/
}

#controls button:hover {
    color: #d4c34a; /* Ändert die Farbe beim Hovern */
}

#pauseButton {
    border: none;
}
#controls button.red-color {
    color: red; /* Stellt die Farbe auf Rot ein, wenn die Klasse angewandt wird */
}