style.css

@font-face {
    font-family: 'digital-7regular';
    src: url('digital7/digital-7-webfont.woff2') format('woff2'),
         url('digital7/digital-7-webfont.woff') format('woff');
 }


body {
	font-family: 'Roboto',sans-serif;
	min-height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0px;
}

.control{
	flex: 0 0 100%;
}

/* Mobile displays */
@media only screen and (max-width: 600px) {
	.container {
		flex-basis: 65%;
		margin: 0px;
		padding: 50px;
		color: #e2e2e2;
		font-family: 'Roboto', sans-serif;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
	}

}

/* Monitors and other bigger displays */
@media only screen and (min-width: 600px){
	.container {
		flex-basis: 25%;
		margin: 0px;
		padding: 50px;
		color: #e2e2e2;
		font-family: 'Roboto', sans-serif;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
	}
} 

#clock{
	padding: 10px;
	font-family: 'digital-7regular', sans-serif;
	background-color: grey;
	font-size: 36pt;
	font-weight: bold;
	border-radius: 5px;
}

.footer{
	flex: 0 0 100%;
  }

 .colorBtn{
	padding: 0.25rem 0.5rem;
	color: #eee;
	border: none;
	background: rgba(0,0,0,0.5);
	font-size: 0.85rem;
	text-transform: capitalize;
	cursor: pointer;
	outline: none;
 }

  .colorBtn:hover{
	background: rgba(0,0,0,0.6);
 }

 .colorBtn:active{
 	background-color: rgba(0,0,0,0.95)
 }