/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
.top-menu, .left-nav {
    background-color: #333;
    color: white;
}
.top-menu {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
.top-menu a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
}
.left-nav {
    position: fixed;
    top: 50px;
    left: 0;
    width: 200px;
    height: calc(100% - 50px);
    padding-top: 20px;
    overflow-y: auto;
}
.left-nav a {
    display: block;
    color: white;
    padding: 10px;
    text-decoration: none;
}
.left-nav a:hover {
    background-color: #575757;
}
.content {
    margin-left: 220px;
    padding: 80px 20px 20px 20px; /* Adjusted for fixed top-menu and left-nav */
    height: calc(100vh - 80px); /* Adjusted for top-menu height */
    overflow-y: auto;
}
.section {
    margin: 20px 0;
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 8px;
}
.section h2 {
    margin-top: 0;
}
code {
	background: #f4f4f4;
	padding: 2px 4px;
	border-radius: 4px;
}
pre {
	background: #f4f4f4;
	padding: 10px;
	border: #ddd 1px solid;
	overflow: auto;
	position: relative;
}
.copy-btn {
	position: absolute;
	right: 10px;
	top: 10px;
	background:  #555;
	color: #fff;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	font-size: 12px;
}
.copy-btn:hover {
	background: #007bff;
}
 
		

@media (max-width: 768px) {
    .left-nav {
        width: 100%;
        height: auto;
        position: relative;
    }
    .content {
        margin-left: 0;
        padding: 100px 20px 20px 20px; /* Adjusted for fixed top-menu */
    }
}