body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.container {
    width: 70%;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1,
h2 {
    text-align: center;
    margin-top: 20px;
    color: #5B0B67;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

pre {
    background-color: rgba(245, 245, 245, 0.9);
    border: 1px solid #ddd;
    padding: 10px;
    overflow-x: auto;
    color: black;
}

code {
    font-family: 'Courier New', monospace;
    color: #d63384;
}

ul,
.toc {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    margin: 10px;
}

.toc li a {
    text-decoration: none;
    color: #5a67d8;
    font-weight: bold;
}

.toc li a:hover,
a:hover {
    text-decoration: underline;
}

a {
    color: #3498db;
    text-decoration: none;
}

#markdown-content {
    background-color: #eaeaea;
    padding: 10px;
    border-radius: 5px;
}

.references {
    color: darkblue;
    line-height: 1.4;
    /* Adjust the line spacing */
    margin-left: 20px;
    /* Optional: Indent the list slightly */
}

.references a {
    text-decoration: none;
    /* Optional: Removes underline from links */
    color: darkblue;
    /* Ensures the links are also dark blue */
}

.section-title {
    font-size: 1.75rem;
    color: #123357;
    /* A nice blue color */
    font-weight: bold;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px #a020f0, 2px 2px 6px #ff8c00;
    /* Purple and Orange shadow */
}