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)));
        }
    }