html {scroll-behavior: smooth;}
        body { font-family: sans-serif; display: flex; padding: 20px; gap: 2000px; background-color: #627190; flex-direction: column; align-items: center; scroll-behavior: smooth; }
        .editor { flex: 1; background: #282c34; color: #61dafb; padding: 20px; border-radius: 8px; max-width: 800px; }
        .preview { flex: 1; border: 2px solid #ccc; padding: 20px; display: flex; align-items: center; justify-content: center; }
        h2 { color: rgb(203, 81, 182); }
        .language-html { background: #574728; padding: 10px; border-radius: 4px; color: #dcdcdc; }
        .language-css { background: #055540; padding: 10px; border-radius: 4px; color: #dcdcdc; }
        .html { color: #ff8000; font-weight: bold; }
        .css { color: #00ffbb; font-weight: bold; }

        .sammlung-btn {
            background-color: #61fbf6;
            color: #282c34;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
        }
        .sammlung-btn:hover {
            background-color: #60aaa7;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: green
        }
        .box:hover { transform: scale(1.2); background-color: teal; }
        .scroll-button {
            justify-content: center;
            display: flex;
            margin-top: 15px;
            padding: 10px 20px;
            background-color: #61fb6b;
            color: #282c34;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
        }

        .scroll-button:hover {
            background-color: #bfdc75;
        }