body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #e7e7e7;
    color: #333
}

.header {
    overflow: hidden;
    background-color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header img {
    margin: 0; /* Remove margins around the image */
    padding: 0; /* Remove any padding */
}
.header .deviceId {
    color: #f2f2f2;
    text-align: right;
    padding: 0px 10px;
    text-decoration: blink;
    font-size: 17px;
}

.topnav {
    overflow: hidden;
    background-color: #333;
    justify-content: space-between;
    align-items: center;
    padding: 0 0px;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 12px 10px;
    text-decoration: none;
    font-size: 17px;
    align-items: normal
}

    
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #04aa6d;
;
    color: white;
    font-size: 17px;
}

.topnav a.activeAdmin {
    background-color: #dc3545;
    color: white;
    font-size: 20px;
}
.topnav .icon {
    display: none;
    padding: 8px 8px;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}


h1 {
    text-align: center;
    margin-top: 20px;
}

/* Style for the logos */
.logos {
    text-align: center;
}

.logos img {
    width: 400px; /* Adjust the size as needed */
    margin: 10px; /* Add margin between logos */
}

/* Style for the people section */
.people {
    text-align: center;
    margin-top: 20px; /* Add margin to separate from logos */
}

.person {
    display: inline-block;
    margin: 10px; /* Add margin between people */
}

/* Style for contributors bar */
.contributors-bar {
    text-align: center;
}

/* Style for contributor icons */
.contributor img {
    width: 24px; /* Adjust the size as needed */
    height: 24px; /* Adjust the size as needed */
    margin-right: 10px; /* Add margin between icons and name */
    vertical-align: middle; /* Align icons vertically with name */
}

ul.credits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.credit-info {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 10px;
    width: 95%;
    max-width: 800px;
    margin: 10px auto;
    /* border: 5px solid #ddd; */ /* Retro border color */
    border-radius: 8px;
    box-shadow: 0 0 10px 0px #cccccc3b; /* Retro box shadow */
    background: #fff;
    
}

.credit-info h3 {
    margin: 0;
}

.credit-info img {
    max-width: 24px; /* Adjust the maximum width as needed */
    max-height: 24px; /* Adjust the maximum height as needed */
    margin-right: 10px; /* Add margin between images and name */
    vertical-align: middle; /* Align images vertically with name */
}


.social-links {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.social-links a {
    color: #fff;
    margin-right: 10px;
    font-size: 18px;
}

.social-links a i {
    font-size: 24px;
}

/* Style the "Start Sequence" button */
#startButton {
    background-color: #28a745; /* Green by default */
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-left: 10px; /* Add left padding */
}

/* Style the "Start Sequence" button when active */
#startButton.active {
    background-color: #dc3545; /* Red when active */
}

#prompt {
    font-weight: bold;
    margin-top: 10px;
    margin-left: 10px; /* Add left padding */
}

.fun-fact {
    font-weight: normal;
    margin-top: 10px;
    margin-left: 10px;
    font-size: 0.9em; /* Smaller font size relative to the parent element */
}

/* Delete this later but simplify the prompt first */
#responseText {
    font-weight: bold;
    margin-top: 10px;
    margin-left: 10px; /* Add left padding */
}

.deviceId {
    color: white;
    font-weight: bold;
}

.flag-entries {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    flex-direction: row; 
}

/* Add CSS to style the flag entries */
.flag-entry {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    max-width: 800px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    /* border: 5px solid #ddd; */ /* Retro border color */
    border-radius: 8px;
    box-shadow: 0 0 10px 0px #cccccc3b; /* Retro box shadow */
    background: #fff;
}

.flag-details {
    display: flex;
    align-items: right;
    flex-grow: 1;
    max-width: 300px;
    justify-content: flex-end; /* Right-align text */
    margin-right: 10px;
}

/* Right-align flag titles */
.flag-details h2 {
    margin: 0;
    text-align: right;
    align-items: right;
}

/* Center-align flag input and buttons */
.flag-input {
    display: flex;
    align-items: center;
    /* flex-grow: 0; */
}

/* Style the flag input box */
.flag-input input[type="text"] {
    width: 100%; /* Adjust the width as needed */
    padding: 5px;
    margin-right: 5px;
    /* min-width: 240px; */
    border: none;
    background: #f1f1f1;
    border-color: #f1f1f1;
    border-radius: 4px;
    font-style: italic;
}

/* Style the flag capture button */
.flag-input button {
    background-color: #28a745; /* Green by default */
    color: #fff;
    border: none;
    padding: 5px 5px;
    cursor: pointer;
    margin-left: 10px;
    border-radius: 4px;
}

/* Style the flag capture indicator */
.capture-indicator {
    font-weight: bold;
    margin-left: 10px;
}

/* Style for capture indicator */
#captureIndicator-Easy,
#captureIndicator-Comms,
#captureIndicator-Diagnose,
#captureIndicator-Credits,
#captureIndicator-Firmware,
#captureIndicator-Authorized,
#captureIndicator-Respond,
#captureIndicator-Secured {
    color: #dc3545; /* Red for Not Captured */
}

#interfaceButton {
    background-color: #28a745; /* Green by default */
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
    margin-left: 10px;
    border-radius: 4px;
}

#interfaceButton.active {
    background-color: #dc3545; /* Red when active */
}

/* Style for sensor value display */
#sensorValue {
    font-size: 36px;
    font-weight: bold;
    margin-top: 20px;
    padding: 10px 20px;
}

#drinkResponsibly {
    font-size: 12px;
    color: #333; /* Dark gray color for reminder */
    margin-top: 10px;
    padding: 10px 20px;
    font-style: italic;
}

button {
    background-color: #28a745; /* Green by default */
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-left: 10px; /* Add left padding */
}

button.active {
    background-color: #dc3545; /* Red when active */
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start; /* Align items to the start on smaller screens */
    }

    .nav-link {
        margin-right: 0; /* Remove right margin on smaller screens */
        padding: 8px 10px; /* Smaller padding for compact navigation */
    }

    .logo {
        margin-bottom: 10px; /* Add some space below the logo on smaller screens */
    }
}

#configForm {
    margin-left: 10px; /* Aligns with the fun-fact margin */
    font-size: 0.9em; /* Matches the fun-fact text size if desired */
}

/* Style labels and inputs for better alignment and spacing */
#configForm label {
    display: block; /* Makes each label appear on a new line */
    margin-top: 10px; /* Adds space above each label for clear separation */
    margin-bottom: 5px; /* Adds a little space above the input fields */
}

#configForm input[type="text"],
#configForm input[type="number"] {
    width: 95%; /* Adjusts the width to fit within the form area */
    padding: 8px; /* Adds padding inside the input for better text visibility */
    margin-bottom: 10px; /* Adds space below each input field */
}

#configForm button {
    margin-top: 20px; /* Adds space above the button */
    padding: 10px 20px; /* More comfortable clicking area */
    background-color: #28a745; /* Styling button with a green background */
    color: white; /* Text color for the button */
    border: none; /* Removes default border */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
}
