*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #fff;
    color: #000;
}
.dark {
    background-color: #000;
    color: #fff;
}
header {
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header h1{
    font-size: larger;
    font-variant: small-caps;
}
header button{
    padding: 10px 15px;
    background: linear-gradient(45deg,crimson,purple,burlywood);
    color: #fff;
    border: none;
    border-radius: 5px;
}
article {
    padding: 80px 0;
    text-align: center;
    font-size: larger;
    font-variant: small-caps;
}
article span{
    display: inline-flex;
    justify-content: space-evenly;
    font-size: 200px;
}
#hour::after{
    content: 'Hour(s)';
    position: relative;
    transform: translate(0,160px);
    font-size: 20px;
}
#min::after {
    content: 'Minute(s)';
    position: relative;
    transform: translate(0, 160px);
    font-size: 20px;
}
#sec::after {
    content: 'Second(s)';
    position: relative;
    transform: translate(0, 160px);
    font-size: 20px;
}
footer {
    padding: 40px 0;
    text-align: center;
    font-variant: small-caps;
    font-weight: 900;
}
footer ul{
    font-variant:normal;
    font-style: italic;
}
@media (min-width:200px) and (max-width:780px) {
            article span {
                font-size: 80px;
            }
    
            #hour::after {
                content: '';
            }
    
            #min::after {
                content: ''
            }
    
            #sec::after {
                content: ''
            }
}