/* Add Bootstrap styles for responsiveness */
@media screen and (min-width: 576px) {
    body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: #3aafa9; /* Set background color for the entire document */
    }

    * {
        box-sizing: border-box;
    }

    #Form {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    #Form p {
        white-space: nowrap; /* Prevent text from wrapping onto the next line */
    }
}

/* Adjust styling for checkboxes */
#Form p {
    margin-bottom: 0; /* Remove bottom margin for paragraph elements within #Form */
}

/* Add spacing for better readability */
#Form p, #Form input[type="checkbox"] {
    margin-right: 10px;
}

/* Center the checkbox within its container */
#Form input[type="checkbox"] {
    margin-top: 5px;
}

/* Style for the navbar */
.navbar {
    background-color: #17252A; /* Set background color for the navbar */
    margin-bottom: 20px;
}

.navbar-dark .navbar-brand {
    color: #def2f1 !important; /* Set text color for the navbar brand */
}

/* Additional styles for better visibility */
.navbar-dark .navbar-toggler-icon {
    background-color: #def2f1;
}

.navbar-dark .navbar-toggler:focus,
.navbar-dark .navbar-toggler:hover {
    background-color: #2B7A78; /* Set a darker blue on hover */
}

.navbar-dark .navbar-toggler {
    border-color: #def2f1;
}

/* Style for the content */
.container {
    background-color: #3aafa9 !important; /* Set background color for the content */
    padding: 20px;
}

/* Maintain original styling for team sections */
#teams * {
    font-size: larger;
    color: #def2f1;
}

#right {
    color: #17252A;
}

/* Adjust styling for better visibility */
.btn-dark {
    background-color: #2B7A78; /* Set a darker blue for the button */
    color: #def2f1; /* Set text color for the button */
}

.text-dark {
    color: #17252A; /* Set text color for dark text */
}