/* weightlosschallenge2025.css */

/* Apply black, gray, and white color theme to weight loss challenge sections */
body {
    font-family: "Montserrat", sans-serif;
    background-color: #1c1c1c; /* Black background */
    color: #e0e0e0; /* Light gray text for contrast */
}

header {
    background-color: #1c1c1c; /* Dark gray header */
    color: #e0e0e0; /* Light gray text */
    padding: 20px;
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
    color: #e0e0e0;
    margin: 20px 0px;
    text-align: center;
}

#login-section {
    backdrop-filter: blur(50%);
    background-color: #696969;
    border-radius: 50px;
    text-align: center;
    max-width: 50%;
    align-items: center;
    width: 80%;
    margin-right:auto;
    margin-left:auto;
    margin-top: 50px;
}

/* Challenge sections */
#add-user-section,
#view-users-section,
#view-challenge-details-section,
#user-info {
    padding: 20px;
    background: #1c1c1c; /* Dark gray background */
    color: #e0e0e0;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 90%;
    width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Buttons */
button,
.w3-button {
    background-color: #1c1c1c;
    color: #e0e0e0;
    border: none;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    margin: 10px auto; /* Center horizontally */
    display: block; /* Make button take up block space for centering */
    text-align: center; /* Ensure text inside the button is centered */
}

button:hover,
.w3-button:hover {
    background-color: #444; /* Slightly lighter gray on hover */
}

/* Table styles (for user data) */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #1c1c1c; /* Dark gray background */
}

table th,
table td {
    border: 1px solid #333; /* Gray border */
    padding: 10px;
    text-align: left;
}

table th {
    background-color: #333; /* Gray header */
    color: #e0e0e0;
}

/* Chart Container */
#chart-container {
    background-color: #1c1c1c; /* Dark gray container */
    border: 1px solid #333;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    text-align: center;
    max-width: calc(60% + 20px);
    margin: 0 auto;
}

/* BMI and progress display */
#bmi-display,
#progress-display {
    font-size: 1.2em;
    margin-top: 10px;
    color: #e0e0e0; /* Light gray text */
}