body, html {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: Arial, sans-serif;
    background-color: #fff; /* Adjust the background color as needed */
}

#app {
    width: 100%; /* Adjust the width as necessary */
    max-width: 800px; /* Set a max-width for larger screens */
    margin : auto;
}

.card {
    width: 280px;
    background-color: #fff;
    border : solid #EAECF0;
    border-radius: 8px;
    margin-bottom: 16px; /* This creates the vertical spacing between cards */
    padding: 15px;
    text-align: left;
}

.disabled {
    color: #ccc;
}

#timer-controls {
    display: flex;
    justify-content: space-around;
    margin-bottom: 16px;
}

#timer-controls button {
    flex-grow: 1; /* Allow the buttons to grow and fill the space */
    margin: 0 5px; /* Adjust as needed */
    padding: 10px;
    border: none;
    border-radius: 4px; /* Rounded corners for the pill effect */
    background-color: #e0e0e0; /* Default non-active color */
    color: #666;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for color change */
    outline: none; /* Remove the outline to keep the pill appearance */
    text-align: center; /* Ensure text is centered */
    transition: background-color 0.3s, color 0.3s, transform 0.3s; /* Add transform to the transition property */
}


#timer-controls button.active {
    background-color: #fff; /* Active button color */
    color: #000;
    border : solid #101010
}

#timer-controls button:hover {
    background-color: #101010; /* Slightly darker blue on hover for non-active button */
    transform: scale(1.05); /* Scale up the button a bit on hover */
    color: #FFF;
}

/* Make sure the buttons don't wrap on smaller screens */
@media (max-width: 400px) {
    #timer-controls button {
        padding: 10px 0;
    }
}

#timer-display {
    font-size: 5em; /* Increase the font size for better visibility */
}

#actions button {
    width: 100%; /* Makes the buttons full width of the container */
    padding: 10px;
    margin-top: 10px; /* Adds space above the action buttons */
}

h1, h4 {
    color: #333; /* Adjust title colors as needed */
}

#start .icon {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid #333741; /* Use the button's active color */
    cursor: pointer;
}

/* Adjust the button itself to remove the padding and center the icon */
#start {
    padding: 0;
    border: solid black;
    background: none;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    display: flex;
}

.timer-container {
    display: flex;
    justify-content: space-between; /* Adjust this as needed to space items */
    align-items: center; /* Align items vertically */
}

.timer-btn {
    background: #7F56D9;
    border: none;
    font-size: medium;
}

.hidden {
    display: none;
}

/* IDLE State - Waiting for any action */
.timer-card.idle {
    background: #FFFFFF;
    border: 2px solid #101010;
    color: #101010;
}
/* Active Timer Card */
.timer-card.active {
    background: #FCFAFF;
    border: 2px solid #7F56D9;
    color: #7F56D9;
}

/* Inactive (Not Active) Timer Card */
.timer-card.inactive {
    background: #FFFFFF;
    border: 2px solid #EAECF0;
    color: #667085;
}

/* Completed Timer Card */
.timer-card.completed {
    background: #F6FEF9;
    border: 2px solid #079455;
    color: #079455;
}