styles.css

/* Ensure the body fills the entire screen */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Roboto', sans-serif; /* Use Roboto Thin for all text */
    font-weight: 100; /* Thin weight for Roboto font */
    background-color: #000;
    overflow: hidden; /* Prevents scrolling */
    cursor: pointer; /* Indicate that the user can click anywhere */
}

.app-title {
    font-size: 36px; /* Increased font size for the title */
    color: white;
    margin-bottom: 20px;
    text-align: center;
}

.settings-container {
    display: flex;
    flex-direction: column; /* Make the layout vertical */
    align-items: center;
    justify-content: center;
    background-color: #000;
    padding: 20px;
    border-radius: 10px;
    margin-top: auto; /* Center align with auto margins */
    margin-bottom: auto; /* Center align with auto margins */
}

.time-inputs {
    display: flex;
    flex-direction: column; /* Align inputs vertically */
    align-items: center;
    gap: 10px; /* Add space between input fields */
    margin-bottom: 20px; /* Space below inputs for Start button */
}

.time-inputs label {
    color: white;
    font-size: 18px; /* Consistent font size for labels */
    margin-bottom: 5px; /* Space between label and input */
}

.settings-container input {
    padding: 10px;
    font-size: 16px; /* Consistent font size for inputs */
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
    width: 80px; /* Adjust width for a better look */
    text-align: center;
    margin-bottom: 10px; /* Space below each input */
}

.settings-container button {
    padding: 10px;
    font-size: 16px; /* Consistent font size for buttons */
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
    width: 80px; /* Adjust width to align with input fields */
    margin-top: 10px; /* Space above button */
}

.timer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute; /* Positioned absolutely to fill the screen */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center both horizontally and vertically */
}

.timer-display {
    display: grid;
    justify-content: center; /* Center horizontally */
    align-content: center; /* Center vertically */
    gap: 3px; /* Gap between the dots */
}

/* Update the color of the dots */
.pixel {
    width: 6px;
    height: 6px;
    background-color: #d3d3d3; /* Set inactive dots to white */
    border-radius: 50%; /* Makes each pixel a circle */
}

.pixel.active {
    background-color: #333; /* Set active dots to gray */
}

.time-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px; /* Consistent font size for time display */
    background-color: #000;
    padding: 20px;
    border-radius: 10px;
}

.reset-button {
    padding: 10px;
    margin-top: 10px;
    font-size: 16px; /* Consistent font size for buttons */
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
}

/* Style for the GitHub button */
footer {
    margin-top: auto; /* Push the footer to the bottom */
    margin-bottom: 20px; /* Add some space at the bottom */
}

.github-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px; /* Consistent font size for buttons */
    color: white;
    background-color: #333;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
}

.github-button:hover {
    background-color: #444; /* Darker color on hover */
}

@media (min-width: 768px) {
    .settings-container {
        flex-direction: column; /* Keep vertical layout on wider screens */
        align-items: center; /* Center align for larger screens */
    }

    .settings-container input,
    .settings-container button {
        margin: 0;
    }
}