body { font-family: Arial, sans-serif; display: flex; }
.content { width: 100%; padding: 20px; margin-left: 290px; width: calc(100% - 290px); }
.chapter { display: none; }
.active { display: block; }
.nav { margin-bottom: 20px; }
.nav a {
    display: block;
    width: 100%;
    padding: 10px;
    background: #007BFF;
    color: white;
    text-decoration: none;
    margin: 5px 0;
    box-sizing: border-box;
    border-radius: 5px;
}
.nav a:hover { background: #0056b3; }
h1 {
    display: block;
    background-color: #007BFF;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin: 0 auto 20px;
}

/* RESPONSIVE FEATURE FOR MOBILE PHONES - STA. ROSA */
@media (max-width: 768px) {
    body { flex-direction: column; }
    .content { width: 100%; }
}

/* DARK MODE STYLE - STA. ROSA*/
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}
body.dark-mode pre,
body.dark-mode code {
    background: #333;
    color: #fff;
}

/* TERMINAL CONTAINER DOESN'T AFFECTED BY DARK MODE - STA. ROSA*/ 
body.dark-mode .terminal-container {
    background-color: #1e1e1e !important;
    color: #0056b3 !important;
}
body.dark-mode .terminal-container .terminal-header {
    background-color: #333 !important;
    color: #fff !important;
}
body.dark-mode .terminal-container pre,
body.dark-mode .terminal-container code {
    background: none !important;
    color: inherit !important;
}

/* TERMINAL CONTAINER DESIGN - STA. ROSA */
.terminal-container {
    background-color: #1e1e1e;
    color: #0858b3;
    font-family: 'Source Code Pro', Consolas, 'Courier New', monospace;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #333;
    outline: 1px solid #fff;
    overflow-x: auto;
    font-size: 1rem;
    margin: 0.3rem 0;
}

/* REMOVE EXTRA BACKGROUNDS/PADDING FROM INDIVIDUAL CODE BLOCK ELEMENTS INSIDE THE CONTAINER - STA. ROSA */
.terminal-container pre,
.terminal-container code {
    background: none;
    padding: 0;
    margin: 0;
    display: block;
}

/* TERMINAL HEADER DESIGN - STA. ROSA */
.terminal-container .terminal-header {
    background-color: #333333;
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 4px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin: -5px -5px 5px -5px;
}

/* SIDEBAR STYLE - STA. ROSA */
.sidebar {
    width: 250px;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
}
.content {
    margin-left: 270px;
    width: calc(100% - 270px);
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* DARKMODE STYLE - STA. ROSA */
body.dark-mode .content {
    background-color: #1e1e1e;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    color: #f1f1f1;
}

body.dark-mode .sidebar {
    background-color: #333;
    color: #fff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
}
body.dark-mode .sidebar a {
    background: #007BFF;
    color: #fff;
}
body.dark-mode .sidebar-footer {
    color: #ccc;
}
.authors {
    text-align: center;
    font-size: 0.85rem;
    margin-bottom: 10px;
    color: inherit;
}
.sidebar h2 {
    text-align: center;
}
/* SLAB SERIFF FONT FOR ACTIVITY BUTTONS - STA. ROSA */
.chapter a[style*="#0056b3"] {
    font-family: 'Roboto Slab', serif !important;
}
/* SMOOTH HOVER EFFECTS FOR NAV LINKS - STA. ROSA */
.nav a, .chapter a {
    transition: background-color 0.3s ease, color 0.3s ease;
}
.nav a:hover, .chapter a:hover {
    background-color: #0056b3; 
    color: #fff; 
}

/* RESPONSIVE FEATURE FOR MOBILE PHONES - STA. ROSA */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
    .content {
        margin-left: 0;
        width: 100%;
    }
}

/* DARK MODE HOVER EFFECTS - STA. ROSA */
body.dark-mode .nav a:hover {
    background-color: #0056b3; 
    color: #fff; 
}

body.dark-mode #darkModeToggle {
    background: #007BFF; 
    color: #fff; 
    border: 1px solid #fff; 
}