/* General body and layout */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    text-align: center;
}

/* Logo styling */
.logo-container {
    margin-top: 1.25rem; /* 20px */
    text-align: center;
}

.logo {
    width: 50%; /* Adjust width to 50% of the screen width */
    max-width: 18.75rem; /* 300px */
    height: auto;
}

/* Fundraising Section */
.progress-bar-container {
    margin-top: 2.5rem; /* 40px */
    padding: 1.25rem; /* 20px */
    background-color: #ffffff;
    border-radius: 0.625rem; /* 10px */
    box-shadow: 0px 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 37.5rem; /* 600px */
    margin-left: auto;
    margin-right: auto;
}

.progress-container {
    height: 2.5rem; /* 40px */
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 1.875rem; /* 30px */
    position: relative;
    margin-bottom: 0.625rem; /* 10px */
}

/* Progress bar initial style */
#progress {
    height: 100%;
    background-color: #2196F3; /* Initial color is blue */
    border-radius: 1.875rem; /* 30px */
    width: 0%; /* Start with an empty progress bar */
    transition: width 0.5s ease, background-color 0.5s ease; /* Smooth transition for both width and color */
}

#current-raised {
    font-size: 1rem; /* 16px */
    font-weight: bold;
}

/* Boxes for Last Week, Current, and Target */
.info-boxes {
    display: flex;
    justify-content: space-between;
    margin-top: 1.25rem; /* 20px */
    gap: 0.9375rem; /* 15px */
    width: 90%;
    max-width: 37.5rem; /* 600px */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.125rem; /* 50px */
    flex-wrap: wrap;
}

.info-box {
    background-color: #ccc; /* Grey background */
    color: #333; /* Dark text color */
    font-size: 1rem; /* 16px */
    font-weight: normal;
    padding: 0.9375rem; /* 15px */
    border-radius: 0.625rem; /* 10px */
    width: 30%;
    text-align: center;
    box-sizing: border-box; /* Ensure the padding does not overflow */
    min-width: 10rem; /* Ensure minimum width for responsiveness */
}

.info-box span {
    display: block;
}

.info-box span:first-child {
    font-size: 1rem; /* 16px */
}

.info-box span:last-child {
    font-size: 1rem; /* 16px */
}

/* Distance Input and Button */
.distance-container {
    margin-top: 5rem; /* 80px */
    padding: 0.3rem; /* 10px */
    width: 90%; /* Ensure container takes 90% width */
    max-width: 37.5rem; /* 600px */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Center text and button */
}

#donationForm {
    display: flex; /* Enable flexbox layout */
    justify-content: center; /* Center the items horizontally */
    gap: 1rem; /* Space between inputs */
    margin-bottom: 0.25rem; /* Add some space below the inputs */
}

/* The inputs for name and distance */
#distanceInput,
#nameInput {
    padding: 0.625rem; /* 10px */
    width: 40%; /* Adjust width to make inputs fit side by side */
    max-width: 15.5rem; /* Set a maximum width */
    font-size: 1rem; /* 16px */
    border-radius: 0.3125rem; /* 5px */
    border: 0.0625rem solid #ccc; /* 1px */
    margin: 0; /* Remove margin */
}

/* Button */
button {
    padding: 0.625rem 1.25rem; /* 10px 20px */
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 0.3125rem; /* 5px */
    font-size: 1rem; /* 16px */
    cursor: pointer;
    width: 60%; /* Set the width of the button */
    max-width: 18.75rem; /* 300px */
    margin: 1.25rem auto; /* Center the button */
}

button:hover {
    background-color: #45a049;
}

/* Responsive design for mobile devices */
@media (max-width: 48em) { /* 768px */
    #donationForm {
        flex-direction: column; /* Stack inputs vertically on smaller screens */
        align-items: center; /* Center inputs when stacked */
    }

    #distanceInput,
    #nameInput {
        width: 80%; /* Make inputs 80% width on small screens */
        max-width: 100%; /* Allow inputs to take full width */
    }

    button {
        width: 80%; /* Make the button 80% width on mobile */
    }
}


/* Donation Stats */
.donation-stats {
    margin-top: 2.5rem; /* 40px */
    font-size: 1.125rem; /* 18px */
    color: #333;
}

.donation-stats span {
    font-weight: bold;
}

.donation-stats span#average-distance {
    color: #007bff;
}

/* Styling for the donation form */
.distance-container {
    margin-top: 5rem; /* 80px */
    background-color: #ffffff;
    padding: 2.25rem; /* 20px */
    border-radius: 0.625rem; /* 10px */
    box-shadow: 0px 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    max-width: 37.5rem; /* 600px */
    margin: 0 auto;
    text-align: center;
}

.distance-container h3 {
    margin-top: 0.9375rem; /* 15px */
    font-size: 1.5rem; /* 22px */
    margin-bottom: 1.0rem; /* 15px */
}

#donationForm {
    display: flex;
    justify-content: space-between;
    gap: 0.625rem; /* 10px */
    flex-wrap: wrap;
    align-items: center; /* Align inputs and button properly */
}

#donationForm input,
#donationForm button {
    padding: 1.2rem; /* 10px */
    font-size: 1rem; /* 16px */
    border-radius: 0.3125rem; /* 5px */
    border: 0.0625rem solid #ccc; /* 1px */
    margin-top: 0.625rem; /* 10px */
    width: 48%; /* 50% width for input and button */
}

#donationForm button {
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

#donationForm button:hover {
    background-color: #45a049;
}

/* Styling for the Last 5 Runs section */
.runs-container {
    margin-top: 1.875rem; /* 30px */
    background-color: #ffffff;
    padding: 1.25rem; /* 20px */
    border-radius: 0.625rem; /* 10px */
    box-shadow: 0px 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 37.5rem; /* 600px */
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2.5rem; /* 40px */
}

#runsList {
    list-style-type: none;
    padding: 0;
}

#runsList li {
    padding: 0.625rem; /* 10px */
    border-bottom: 0.0625rem solid #ddd; /* 1px */
    font-size: 1rem; /* 16px */
}

#runsList li:last-child {
    border-bottom: none; /* Remove the border on the last item */
}

#runsList li span {
    font-weight: bold;
}

/* Responsive design for mobile devices */
@media (max-width: 48em) { /* 768px */
    .logo {
        width: 80%; /* Make the logo larger on small screens */
    }

    .progress-bar-container {
        width: 100%; /* Use full width on smaller screens */
        padding: 0.9375rem; /* 15px */
    }

    #distanceInput,
    #nameInput {
        width: 80%; /* Make the input fields wider on mobile */
    }

    .donation-stats {
        font-size: 1rem; /* 16px */
    }

    .info-box {
        width: 100%; /* Adjust box width to 100% on mobile */
        margin-bottom: 0.625rem; /* 10px */
    }

    button {
        width: 80%; /* Make the button fill more of the screen on mobile */
    }

    .distance-container {
        padding: 0.9375rem; /* 15px */
    }

    .runs-container {
        width: 100%; /* Full width on small screens */
    }

    .info-boxes {
        flex-direction: column; /* Stack info boxes vertically on small screens */
    }

    /* Donation form adjustments */
    #donationForm {
        justify-content: center; /* Center form inputs and button */
    }

    #donationForm input,
    #donationForm button {
        width: 100%; /* Ensure inputs and button take full width */
        margin-top: 0.625rem; /* 10px */
    }

    /* Adjust padding for small screens */
    .distance-container h3 {
        font-size: 1.125rem; /* 18px */
    }
}