style.css

body {
background: #360033;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    
font-family: 'Nunito', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
overflow: hidden;
align-items: center;
}

#timer{
    font-size: 7rem;
    font-weight: 600;
    text-shadow: 2px 2px #5f5f56;
    color: #F1F2B5;
    width: 500px;
    text-align: center;
    margin: 40px auto;
}

#buttons{
    display: flex;
    justify-content: center;

}

button{
    font-family: 'Nunito', sans-serif;
    background-color: #F1F2B5;
    color: #0b8793;
    border: none;
    font-size: 2rem;
    font-weight: bold;
    padding: 1.5rem 4rem;
    margin: 1rem;
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(58, 51, 51, 0.3);
    transition: all .2s;
}

button:hover{
    background-color: #2c3e50;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

button[disabled]{
    opacity: .5;
    cursor: default;
}

@media (max-width: 800px) {
    #timer{
        font-size: 4rem;
        width: 350px;
    }

    button {
        font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1200 - 320)));
        padding: calc(20px + (50 - 20) * ((100vw - 320px) / (1200 - 320)));
    }
}


/* @bycapwan */