/* Reset some default styles */
body, h1, h2, p, ul {
    margin: 0;
    padding: 0;
}

body, h1, h2, p, ul, nav ul li a {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Black drop shadow with blur */
}

/* Dark mode styling */
body {
    font-family: Arial, sans-serif;
    background-color: #222; /* Dark background color */
    color: #fff; /* Light text color */
    line-height: 1.6;
    text-align: center; /* Center all text content */
}

section {
    margin-bottom: 20px; /* Add spacing between sections */
    position: relative; /* Establish positioning context */
    background-color: rgba(128, 128, 128, 0); /* Transparent grey overlay */
    height: 100%; /* Cover the entire height of the section */
    width: auto; /* Cover as much space as possible within limits */
    min-width: 200px; /* content does not get smaller than this size + other */
    max-width: 800px; /* content does not exceed this size*/
    margin-left: auto; /* center content */
    margin-right: auto; /* center content */
    padding: 1rem; /* adds extra space form content to edges */
    border-radius: 1rem; /* corner size*/
    border: 2px solid #fff; /* size type color*/
    backdrop-filter: blur(10px); /* Add blur effect */
}

section h2 {
    margin-bottom: .75rem;
}

#specs li {
    list-style-type: none;
}

header {
    background-color: #000;
    color: #fff;
    padding: 5px 5;
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Align items to the start and end of the header */
    align-items: center; /* Align items vertically at the center */
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0; /* Remove margin */
    box-shadow: 0px 0px 30px green;
}

/* Apply background image to main content */
main {
    background-image: url("/media/images/backgrounds/bg5.jpg");
    background-size: cover; /* Cover the entire viewport */
    background-position: center top; /* Position the top of the background image */
    background-attachment: fixed; /* Keep the background fixed while scrolling */
    padding-top: 0; /* Remove padding-top */
    min-height: calc(100vh - 110px); /* Calculate the height dynamically based on viewport and header/footer heights */
    padding: 20px 20px 10px 20px; /* padding so content doesn't touch edged (top, right, bottom, left) */
}

/* Center the banner image horizontally within the header */
.banner-container {
    height: auto; /* Set the height to auto */
    margin: 0; /* Remove margin */
    overflow: hidden; /* Hide overflow content */
    display: flex; /* Use flexbox for layout */
    justify-content: flex-start; /* Align banner to the left */
    align-items: center; /* Align items vertically at the center */
}

.banner-container img {
    height: auto; /* Automatically adjust height to maintain aspect ratio */
    max-width: 100%; /* Width is as large as possible while maintaining aspect ratio */
    max-height: 10vh; /* Height does not exceed 10% of the screen */
    display: block; /* Ensure the image is treated as a block element */
}

nav ul {
    list-style: none;
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Align navigation to the right */
    flex-wrap: wrap; /* Allow items to wrap to a new line */
}

nav ul li {
    margin-right: 20px;
    flex: 0 0 auto; /* Don't grow or shrink navigation items */
}

nav ul li a {
    text-decoration: none;
    color: #fff; /* Text color */
}

.internal-link:hover {
    color: #0F0;
}

#specs a {
    color: #007bff; /* Link color */
    text-decoration: none; /* Remove underline */
}

/* Hover styles specifically for links within #specs section */
#specs a:hover {
    color: #0f0; /* Change link color */
    text-decoration: underline; /* Underline links on hover */
}

footer {
    background-color: #000; /* Dark footer background color */
    color: #fff;
    text-align: center;
    padding: 5px;
    bottom: 0;
}

/* Links anywhere else */
a, a:active, a:visited {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    color: #0f0;
    text-decoration: underline;
}

#commands {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.subsections {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns with equal width */
    gap: 20px; /* Adjust the gap between subsections */
}

.subsection {
    background-color: rgba(255, 255, 255, 0.1); /* Example background color with transparency */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Example box shadow */
}

.subsections .subsection ul {
    list-style: none;
}

.menu-icon {
    visibility: hidden;
}

/* Media query for mobile devices */
@media only screen and (max-width: 765px) {
    .subsections {
        grid-template-columns: 1fr; /* One column */
    }

    .dropdown-menu {
        visibility: visible;
    }

    /* Show the menu icon on smaller screens */
    .menu-icon {
        display: block;
        cursor: pointer;
        font-size: 24px;
        color: #0f0;
        justify-content: flex-end;
        align-items: center; /* Vertically center the menu icon */
        /* Add some padding to the right */
        padding-right: 30px;
        visibility: visible;
    }

    /* Hide the dropdown menu by default on smaller screens */
    .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%; /* Align with the bottom of the menu icon */
        right: 0; /* Align with the right edge */
        width: 100%; /* Make the menu span the width of the screen */
        background-color: #000; /* Background color */
        padding: 10px; /* Add padding */
        z-index: 999; /* Ensure it's above other content */
        box-shadow: 0px 0px 30px green;
    }

    /* Add styles for dropdown menu items */
    .dropdown-menu li {
        list-style: none; /* Remove default list style */
        margin-bottom: 10px; /* Add spacing between items */
        position: relative; /* Position context for pseudo-element */
    }

    .dropdown-menu li::after {
        content: '';
        position: absolute;
        bottom: -5px; /* Adjust as needed */
        left: 0;
        width: 100%;
        height: 1px; /* Height of the line */
        background-color: #0f0; /* Color of the line */
    }

    .dropdown-menu a {
        color: #fff; /* Text color */
        text-decoration: none; /* Remove underline */
        font-size: 18px; /* Adjust font size */
        display: block; /* Display as block element */
    }

    .dropdown-menu a:hover {
        color: #0F0; /* Change color on hover */
    }

    /* Links anywhere else */
    a, a:active, a:visited {
        color: #00f;
        text-decoration: none;
    }
}

/* Show the dropdown menu when the .show class is added */
.dropdown-menu.show {
    display: block;
    /* Add any additional styles you want to apply when the dropdown menu is shown */
    /* For example, you might want to add padding, background color, etc. */
}