* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Varela Round', sans-serif;
        }
        
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
    color: #333;
}

h1 {
    /* Large by default, scales down on small screens */
    font-size: clamp(1.5rem, 8vw, 3rem);
    margin-bottom: 2rem;
    font-weight: normal;
}

.time-display {
    /* Very large by default, scales down significantly on mobile */
    font-size: clamp(3rem, 20vw, 15rem);
    margin-bottom: 2rem;
    font-family: 'Varela Round', sans-serif;
    letter-spacing: 2px;
}

.buttons {
    display: flex;
    gap: 1rem;
}

button {
    /* Buttons also scale down on mobile */
    padding: clamp(0.8rem, 3vw, 1.2rem) clamp(1.5rem, 4vw, 2rem);
    font-size: clamp(1rem, 4vw, 1.5rem);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #555;
}

button:active {
    background-color: #222;
}

button#startStop{
	background-color: #169d34;
}

button.button-stop{
	background-color: #ea2424!important;
}

button#clear {
    background: #2b7ad0;
}

div#randomText {
    margin-top: 50px;
    font-size: 30px;
    text-align: center;
}