body {
     display: flex;
 }

 #toc {
     position: fixed;
     top: 0;
     left: 0;
     width: 270px;
     height: 100%;
     overflow-y: auto;
     background-color: #f4f4f4;
     padding: 16px;
     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
     transition: width 0.3s;
     z-index: 1000;
 }

 #content {
     margin-left: 290px;
     /* Adjust as needed */
     padding: 0 20px;
     transition: margin-left 0.3s;
     overflow-y: auto;
 }

 #toc.collapsed {
     width: 50px;
 }

 #toc ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 #toc ul ul {
     display: none;
     padding-left: 20px;
 }

 #toc.collapsed ul ul {
     display: none;
 }

 #toc.collapsed+#content {
     margin-left: 70px;
 }

 #toc a {
     text-decoration: none;
     color: #333;
     display: block;
     padding: 5px;
     border-radius: 6px;
 }

 #toc a:hover,
 #toc li.active {
     background-color: #e0e0e0;
     color: #1890ff !important;
     font-weight: bold;
     border-radius: 6px;
 }

 #toc li.active>a {
     color: #1890ff !important;
 }

 /* Custom scrollbar */
 #toc::-webkit-scrollbar {
     width: 12px;
 }

 #toc::-webkit-scrollbar-track {
     background: #f1f1f1;
 }

 #toc::-webkit-scrollbar-thumb {
     background: #888;
 }

 #toc::-webkit-scrollbar-thumb:hover {
     background: #555;
 }

 @media (max-width: 768px) {
     #toc {
         display: none;
     }

     #content {
         margin-left: 0;
         padding: 0;
     }

     #toc.collapsed {
         left: 0;
     }

     .spec-img {
        width: 500px;
     }
 }

 .card img {
     font-size: 25px;
     text-align: center;
     border-radius: 8px;
     border: 1px solid #ccc;
     box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
 }