html {
            scroll-behavior: smooth;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #333; /* Light gray background */
        }

        .container {
            width: 80%;
            margin: 0 auto;
        }
        .container h1{
            color: #fff;
        }
        .container img{
            max-width: 100px;
        }
        .container ul li a:hover{
            color: #0052cc;
        }
        
        header {
            background-color: #333; /* Pastel blue */
            color: white;
            text-align: center;
            padding: 1em 0;
        }

        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            background-color: #99c2ff; /* Lighter blue */
        }

        nav a {
            text-decoration: none;
            color: #333;
            padding: 15px;
            display: block;
        }

        nav a:hover {
            background-color: #b3d9ff; /* Lightest blue */
        }

        .lesson{
            margin: 20px 0;
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1, h2, h3, p, pre, code {
            color: #333; /* Dark gray text */
        }

        button {
            padding: 10px;
            cursor: pointer;
            background-color: #3399ff; /* Pastel blue */
            color: white;
            border: none;
            border-radius: 4px;
        }

        .interactive-lesson {
            margin-top: 20px;
            padding: 15px;
            background-color: #333;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            color: #fff;
        }

        .interactive-toggle {
            padding: 8px;
            cursor: pointer;
            background-color: #3399ff; /* Pastel blue */
            color: white;
            border: none;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .interactive-content {
            margin-top: 10px;
        }

        .quiz-container {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            margin-top: 10px;
        }

        .quiz-container h4 {
            margin-bottom: 10px;
        }

        .quiz-container label {
            display: block;
            margin-bottom: 8px;
        }

        .quiz-container button {
            background-color: #0066cc; /* Pastel blue */
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px;
            cursor: pointer;
        }

        .quiz-container button:hover {
            background-color: #0052cc; /* Slightly darker blue on hover */
        }

        #hint {
            color: #777;
            margin-top: 5px;
        }

        .hidden {
            display: none;
            color: #fff;
        }
        .interactive-lesson h3,h4 {
            color: #fff;
        }
        .interactive-lesson p{
            color: #fff;
        }
        .interactive-lesson h3{
            color: #fff;
            text-underline-position: below;
        }
/* Styling for pre and code elements */
pre {
    background-color: #f4f4f4; /* Light gray background */
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    overflow: auto;
    font-size: small;
}

code {
    font-family: 'Courier New', monospace;
    color: #333; /* Dark gray text */
}
.yellow {
    color: yellow;
}
/* ... (previous CSS code) ... */

/* Add these styles to your existing stylesheet or create a new one */

/* Style for the current lesson */
.lesson.current-lesson {
    border: 2px solid #3498db; /* Example border color for the current lesson */
    padding: 10px;
    background-color: #ecf0f1; /* Example background color for the current lesson */
}
/* Video Container Styles */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio for responsive design */
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Responsive design continued */
@media only screen and (max-width: 600px) {
    .container {
        width: 100%;
    }

    nav ul {
        flex-direction: column;
    }
    
    nav li {
        margin-right: 20px;
    }
    .lesson {
        padding: 10px;
    }

    .code-example pre {
        overflow-x: auto;
    }

    .interactive-lesson {
        padding: 10px;
    }

    .quiz-container {
        padding: 10px;
    }
    .lesson img {
        display: block;
        margin: 0 auto;
    }
}