styles.css

body { font-family: Arial, sans-serif; padding: 2rem; transition: background-color 0.5s, color 0.5s; }
input { width: 100%; padding: 1rem; margin-bottom: 1rem; transition: background-color 0.5s, color 0.5s; }
button { padding: 1rem; margin-right: 1rem; transition: background-color 0.5s, color 0.5s; }
pre { background: #f4f4f4; padding: 1rem; }
/* Light Mode Styles */
.dark-mode .title-rectangle {
    background-color: #1661AB; /* Dark color for the title rectangle in dark mode */
}

.light-mode {
    background-color: white;
    color: black;
}

.light-mode input {
    background-color: white;
    color: black;
    border: 0.1rem solid #ccc; /* Light border */
}

.light-mode button {
    background-color: #1661AB; /* Your chosen blue */
    color: white;
}

.light-mode pre {
    background: #f4f4f4; /* Light background for preformatted text */
}

/* Dark Mode Styles */
.dark-mode .title-rectangle {
    background-color: #1E88E5; /* Dark color for the title rectangle in dark mode */
}

.dark-mode {
    background-color: #121212; /* Dark background */
    color: white; /* Light text */
}

.dark-mode input {
    background-color: #333; /* Darker input */
    color: white; /* Light text */
    border: 0.1rem solid #555; /* Darker border */
}

.dark-mode button {
    background-color: #1E88E5; /* Lighter blue for dark mode */
    color: white;
}

.dark-mode pre {
    background: #1E1E1E; /* Darker background for preformatted text */
}

/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.title-rectangle {
    background-color: #1661AB; /* Your chosen blue */
    height: 7rem; /* Adjust height as needed */
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    text-align: center; /* Center text */
}
.title {
    color: white; /* Ensure text color is white */
    font-weight: 600; /* Optional: Make text bold */
    text-transform: uppercase; /* Make text uppercase */
}
#commandInput {
    width: 100%; /* Match the container's width */
    padding: 1rem; /* Add some padding inside the input box */
    border: 1px solid #ccc;
    border-radius: 1rem;
    box-sizing: border-box; /* Ensure padding doesn't affect the overall width */
    margin-top: 0.5rem; /* Space between input and top */
    margin-bottom: 0.5rem; /* Space between input and buttons */
}
#suggestions {
    max-height: 20rem; /* Set a maximum height for the suggestions list */
    overflow-y: scroll; /* Always show vertical scrollbar */
    border: 1px solid #ccc; /* Optional: add a border */
    background-color: white; /* Optional: set a background color */
    z-index: 1000; /* Ensure it appears above other elements */
    position: absolute; /* Position it correctly relative to the input */
    width: 95%; /* Make it slightly smaller than the input */
    list-style-type: none; /* Remove the bullet points */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}
/* For WebKit browsers (Chrome, Safari) */
#suggestions::-webkit-scrollbar {
    width: 3.6rem; /* Width of the scrollbar */
    background: #f1f1f1; /* Background color of the scrollbar track */
}
#suggestions::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 6px; /* Rounded corners */
}
#suggestions::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker color on hover */
}
/* For Firefox */
#suggestions {
    scrollbar-width: thin; /* Thin scrollbar */
    scrollbar-color: #888 #f1f1f1; /* Thumb color and track color */
}
#suggestions li {
    padding: 0.2rem; /* Padding for each suggestion item */
    cursor: pointer; /* Change cursor on hover */
    font-size: 1.2rem; /* Adjust the font size here */
}
#suggestions li:hover {
    background-color: #f0f0f0; /* Highlight item on hover */
}
.button-container {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between left buttons and select folder button */
    align-items: center; /* Align buttons vertically centered */
}
.left-buttons {
    display: flex; /* Use flexbox for left buttons */
}
#selectFolderButton {
    margin-left: auto; /* Push this button to the right of the flex container */
    margin-right: 0; /* Remove margin for last button */
}
button {
    font-size: 1rem;
    background-color: #1661AB; /* Updated button color */
    color: white; /* Button text color */
    border: none; /* No border */
    border-radius: 0.75rem; /* Rounded corners */
    padding: 0.5rem 1.5rem; /* Button padding */
    cursor: pointer; /* Pointer cursor on hover */
}
button:hover {
    background-color: #3B8DCE; /* Darker shade on hover */
}
#darkModeToggle {
    position: absolute; /* Position it relative to the nearest positioned ancestor */
    bottom: 1rem; /* Adjust bottom spacing */
    left: 2rem; /* Adjust left spacing */
    padding: 0.5rem 0.5rem; /* Button padding */
}
#creditsButton{
    position: absolute; /* Position it relative to the nearest positioned ancestor */
    bottom: 1rem; /* Adjust bottom spacing */
    right: 2rem; /* Align to the right */
    font-size: 0.75rem; /* Set a consistent font size */
}
.command-list {
    background-color: #f9f9f9; /* Light gray background */
    padding: 1rem; /* Padding for better spacing */
    border: 1px solid #ccc; /* Optional border */
    border-radius: 4px; /* Slightly rounded corners */
    white-space: pre-wrap; /* Preserve whitespace */
    overflow-wrap: break-word; /* Allow long lines to break */
}

.spinner {
    border: 0.5rem solid #f3f3f3; /* Light grey */
    border-top: 0.5rem solid #3498db; /* Blue */
    border-radius: 50%;
    width: 4rem; /* Adjust size as needed */
    height: 4rem; /* Adjust size as needed */
    animation: spin 1s linear infinite; /* Animation */
    position: fixed; /* Fixed position */
    left: 50%; /* Center horizontally */
    top: 50%; /* Center vertically */
    transform: translate(-50%, -50%); /* Centering fix */
    z-index: 1000; /* Ensure it's above other elements */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}