body {
            margin: 0;
            padding: 0;
            font-family: Verdana, sans-serif;
           
            color: #1D3557;
            /* background-color: #31FAEE; */
            display: flex;
        }
        #video-container {
            flex: 1; /* This makes the video container take up the remaining space */
            margin-right: 20px; /* Adjust the margin as needed */
          }
      
          video {
            width: 100%; /* Make the video fill its container */
            height: auto; /* Maintain the aspect ratio */
          }
    
        #menu {
            position: fixed;
            /* left: -200px; */
            top: 0;
            background-color: #F1FAEE;
            color: rgb(255, 255, 255);
            overflow-y: auto;
            padding: 20px;
            height: 100vh;
            font-family: Georgia, serif;
            width: 200px;
            /* transition: left 0.3s ease; */
            border-right: 0;
        }
    
        #menu:hover {
            left: 0;
        }
    
        /* Custom scrollbar styles for Webkit browsers (Chrome, Safari) */
        #menu::-webkit-scrollbar {
            width: 12px;
        }
    
        #menu::-webkit-scrollbar-thumb {
            background-color: #f08484; 
            border-radius: 6px;
        }
    
        #menu::-webkit-scrollbar-track {
            background-color: #1f0303;
        }
    
        #menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
            padding-right: 10px;
        }
    
        #menu li {
            margin-bottom: 20px;
            margin-top: 10px;
        }
    
        #menu a {
            text-decoration: none;
            color: #e05965;
        }
    
        #menu > ul > li > a {
            text-decoration: none;
            font-weight: bold;
            color: #457B9D;
        }
    
        #menu ul.submenu {
            padding-left: 15px;
            border-right: none;
            max-height: 0;
            overflow: hidden;
            /* Animation for the submenu */
            /* transition: max-height 3s ease;  */
        }
    
        #menu:hover ul.submenu {
            max-height: 500px; /* Adjust the maximum height based on your content */
        }
    
        #content {
            margin-left: 240px;
            padding: 60px;
            font-family: Georgia, serif;
            background-color: #A8DADC;
            overflow-y: auto;
            border-left: 0;
            /* transition: margin-left 0.3s ease; */
        }
    
        #content:hover + #menu {
            left: 0;
        }
    
        #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
            color: #457B9D;
        }
    
        /* Custom scrollbar styles for Webkit browsers (Chrome, Safari) */
        #content::-webkit-scrollbar {
            width: 12px;
        }
    
        #content::-webkit-scrollbar-thumb {
            background-color: #254b7f; 
            border-radius: 6px;
        }
    
        #content::-webkit-scrollbar-track {
            background-color: #ffffff; 
        }
    
        .ide-item .ide-title {
            color: #e46f54;
        }
        html.is-changing .transition-fade {
            transition: opacity 0.25s;
            opacity: 1;
          }
          html.is-animating .transition-fade {
            opacity: 0;
          }