body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #1FB7F2;
        }
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            flex-wrap: wrap;
            align-items: flex-start; /* Verhindert ungewollten Versatz */
        }
        .canvas-container {
            width: 48%;
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
            box-sizing: border-box;
            margin-bottom: 10px; /* Gleichmäßiger Abstand */
        }
        canvas {
            background-color: #f8f8f8;
            border: 1px solid #999;
            width: 100%;
            height: 350px; /* Feste Höhe für Konsistenz */
        }
        .controls {
            margin: 20px auto;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        input[type="range"] {
            width: 300px;
            margin: 10px;
        }
        h2 {
            color: #333;
            margin-top: 0; /* Entfernt zusätzlichen Abstand oben */
        }
        #speedContainer {
            margin-top: 10px;
        }

        /* Media Query für mobile Geräte im Hochformat */
        @media (max-width: 768px) and (orientation: portrait) {
            .canvas-container {
                width: 100%;
            }
            .container {
                flex-direction: column;
            }
        }