body {
            background-color: #f8f9fa;
            padding-top: 20px;
        }
        .lesson {
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .lesson h2 {
            color: #007bff;
            font-size: 1.5rem;
            margin-bottom: 15px;
        }
        .point {
            margin-bottom: 10px;
            padding-left: 25px;
            position: relative;
            font-size: 1.1rem;
            word-wrap: break-word; /* Allow text to wrap within the container */
            max-width: 100%; /* Limit the maximum width of the container */
        }
        .point::before {
            content: "\2022"; /* Bullet point */
            color: #007bff;
            font-weight: bold;
            position: absolute;
            left: 0;
            top: 5px;
        }
        .point::after {
            content: '';
            display: block;
            width: 100%;
            border-bottom: 2px dotted #000;
            position: absolute;
            bottom: 0;
            left: 0;
            margin-bottom: -5px; /* Adjust the margin to align with the text */
        }
        @media (max-width: 768px) {
            .lesson h2 {
                font-size: 1.3rem;
                word-wrap: break-word;
            }
            .point {
                font-size: 1rem;
            }
        }
        #comment-section {
    margin-top: 20px;
}

.comment {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
}

.comment-author {
    font-weight: bold;
    margin-bottom: 5px;
}

.comment-text {
    margin-bottom: 10px;
}

.comment-date {
    color: #888;
}

.no-comments {
    color: #888;
}
#comment-message {
    font-weight: bold;
    background-color: #d4edda; /* Mild green background color */
    border-color: #c3e6cb; /* Border color */
    color: #155724; /* Text color */
}
     .highlight {
            /*background-color: yellow;  Set the background color of highlighted text */
            font-weight: bold; /* Make the highlighted text bold */
         color: red; /* Set the text color of highlighted text */
            /* Add any other styling properties you want for highlighted text */
        }
        
footer {
            background-color: #343a40;
            color: #fff;
            padding: 20px 0;
            text-align: center;
            flex-shrink: 0;
        }
        footer a {
            color: #ffc107;
            text-decoration: none;
            margin: 0 5px;
        }
        footer a:hover {
            text-decoration: underline;
        }
        @media (max-width: 768px) {
            footer p {
                margin: 0;
                padding: 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }
            footer p a {
                margin: 5px;
            }
        }