/* General Page Background */
body {
    background-color: #c2e1fc; 
    background-image: url(https://i.pinimg.com/736x/46/8a/3a/468a3a9faef405033ae3d62d0d592a99.jpg); /* Add a tiling pixel pattern here */
    font-family: "Courier New", Courier, monospace;
    color: #96cbfc;
    display: flex;
    justify-content: center;
    padding-top: 50px;
}

/* The Main Box */
#container {
    background: white;
    width: 800px;
    border: 3px double #4e8bc4;
    padding: 20px;
    box-shadow: 5px 5px 0px #96cbfc;
}

#flex-wrapper {
    display: flex;
    gap: 20px;
}

/* Sidebar Styling */
#sidebar {
    width: 200px;
    border-right: 1px dashed #96cbfc;
    padding-right: 15px;
}

#sidebar ul {
    list-style-type: none;
    padding: 0;
}

#sidebar a {
    text-decoration: none;
    color: #96cbfc;
    font-weight: bold;
}

#sidebar a:hover {
    background: #c2e1fc;
    color: white;
}

/* Scrollable Box Style */
.scroll-box {
    height: 150px;
    overflow-y: scroll;
    border: 1px solid #ddd;
    padding: 10px;
    background: #f1f1f1;
}

/* Custom Scrollbar (The Y2K touch) */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #c2e1fc;
}
::-webkit-scrollbar-thumb {
    background: #f06292;
    border: 2px solid #c2e1fc;
}