body {
    font-family: Arial, sans-serif;
    background-color: #131313;
    color: #e1e2ff;
    margin: 0;
    padding: 20px;
    text-shadow: 0 0 2px #819eff, 0 0 4px #5059ff;
    overflow-x: hidden; /* Prevent horizontal overflow */
    background: url('../pictures/computer-background.png') no-repeat center center fixed; /* Your image URL */
    background-size: auto; /* Ensure the background covers the entire page */
    position: relative;
    min-height: 100vh; /* Ensure the body is at least the height of the viewport */
}

/* Make bold letters white for emphasis. */
strong {
    color: rgb(248, 251, 255);
}

/* Make italic letters a different color too. */
em {
    color: #cccdff;
}

/* Make the numbers in numbered lists have white bold letters too */
ol li{
    margin-bottom: 0.5em; /* Spacing between list items */
}

ol li::marker {
    font-weight:bold;
    color: rgb(248, 251, 255);
}

/* Add a transparent overlay to make the background appear semi-transparent */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height:100%;
    background: rgba(1, 9, 41, 0.84); /* Dark overlay with slight transparency */
    z-index: -1;
    backdrop-filter: blur(5px); /* Apply the blur effect */
}

h1, h2 {
    color: #e7e8ff;
    text-shadow: 0 0 8px #4d79ff, 0 0 6px #aabfff, 0 0 16px #aabfff;
}

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

.container {
    display: flex;
    align-items: center; /* Align items vertically centered */
    justify-content: space-between;
}

.column {
    width: 45%;
}

.component {
    margin-bottom: 20px;
    text-shadow: 0 0 4px #90aaff, 0 0 3px #aacbff;
}

.circle-number {
    font-size: 1.2em;
    font-weight: bold;
    margin-right: 10px;
    color: #f2f3ff;
    text-shadow: 0 0 8px #f2f3ff, 0 0 12px #c7d5ff;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #120e7a;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #4d79ff;
    color: #fff;
}

/* Styles for the image */
.center-image {
    width: 100%; /* Make the image take up full width of the container */
    max-width: 45%; /* Ensure it does not exceed the width of a column */
    height: auto; /* Maintain aspect ratio */
    margin: 0 1%; /* Adjust spacing to fit between columns */
    display: block; /* Ensure it's displayed as a block element */
}

/* Responsive styles */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center items horizontally */
    }

    .column {
        width: 100%; /* Full width of the container */
        margin-bottom: 20px; /* Space between columns */
    }

    .center-image {
        max-width: 100%; /* Image can be as wide as the container */
        margin: 20px 0; /* Adjust margin to fit well between columns */
    }
}