/* Steampunk Font */
@font-face {
    font-family: "steamwreck";
    src: url("/fonts/steamwreck.ttf");
}
  

/* Base styles */
body {
    background-color: #2a2a2a;
    color: #d3c6ae; 
    font-family: 'Calibri', 'sans-serif'; 
    line-height: 1.6;
    margin: 0;
    padding: 0;
    padding-right: 50px;
}

header, footer {
    text-align: center;
    padding: 10px 0; 
    color: #cd7f32; 
}

header h1 {
    font-family: steamwreck, 'Times New Roman', serif;
    color: #cd7f32; 
    font-size: 3em;
}

a {
    color: red;
}

/* Navigation styles */
#chapter-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 180px; 
    background-color: #1a1a1a;
    overflow-y: auto;
    z-index: 2000; 
    transition: width 0.3s; 
}

#chapter-nav li a {
    display: block;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s, width 0.3s; 
    z-index: 2001;
}

#chapter-nav li a:hover, #chapter-nav li a:focus {
    background-color: #cd7f32; 
    color: #000;
    width: 260px; 
    z-index: 2002;
}

/* Main content styles */
#main-content {
    margin-left: 200px; 
    padding: 20px;
    min-height: 100vh; 
    z-index: 1000; 
    position: relative; 
}

article {
    margin-bottom: 40px;
}

h2, h3, h4 {
    font-family: 'Times New Roman', serif;
    border-bottom: 1px solid #cd7f32;
    padding-bottom: 5px;
}

p, pre {
    padding: 10px;
    background-color: #1e1e1e;
    border-left: 5px solid #cd7f32; 
}

/* Code snippet styling */
code {
    color: #f28a8a;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
}

/* Footer styles */
footer {
    font-size: 0.8em;
    color: #aaa;
    background-color: #1a1a1a;
}

/* Images */
img {
    display: block;
    margin: auto;
    height: auto;
}

#logo {
    border-radius: 20%;
    width: 200px;
}

#cover {
    width: 75%;
}

#future {
    width: 400px;
}