body {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}

#clock-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#display {
    font-family: 'Courier New', Courier, monospace;
}

.classic, .modern, .futuristic {
    padding: 1rem; /* Adjusted padding for medium size */
    font-size: 4rem; /* Adjusted font size for medium size */
}

.classic {
    color:white;
    border-color: green;
}

.modern {
    color: white;
    border-color: blue;
}

.futuristic {
    color:white;
    border-color: red;
}

select {
    background-color: black;
    color: green;
}

.date-size {
    font-size: 1.5rem; /* Adjust font size for date as needed */
}

.clock-face-btn {
    transition: background-color 0.2s ease; /* Add transition for smooth hover effect */
}

.clock-face-btn:hover {
    cursor: pointer; /* Indicate clickable button */
}

.hidden {
    display: none;
}

#alarm-container input {
    background-color: black;
    color: yellow;
}

#alarm-popup {
    z-index: 1000; /* Ensure popup is on top */
    padding: 1rem; /* Adjust padding for popup */
    font-size: 1.5rem; /* Adjust font size for popup text */
}
