timer-style.css

html, body { margin:0; padding:0; height:100%; width:100%; }
#timer { text-align:center; width:100%; height:95%; font-size:10px; display:flex; align-items:center; justify-content:center; margin:0; padding:0; }

#timer-container { }
#time-section { display:block; font-size:120px; }
#time-section:hover { cursor:pointer; }
#control-section { padding:0; margin:5px 0; display:block; }
.digit { height:5em; width:3em; outline:none; }
.time { font-size:28px; margin:0; padding:0; }

.button { width:16em; height:5em; border-radius:.3em; background-color:#e0e1e2; cursor:pointer; outline:none; margin:0 10px 0 0; display:inline-block; vertical-align:top; font-size:12px; border:none; border-style:unset; padding:0; }
.button:hover { background-color:#c6c6c6; }
.quick-set, .quick-set-cycle {  width:10em; height:4em; vertical-align:bottom; }

@media only screen and (max-device-width: 577px) {      
	#time-section { font-size:250px; }
	.control-button, .quick-set, .quick-set-cycle { font-size:35px; }
	.quick-set, .quick-set-cycle { width:100%; margin:0 0 10px 0; }
}
@media only screen and (max-device-width:480px) {
	.control-button { width:100%; margin:0 0 10px 0; }
}