/* Default styles for larger screens (desktops and laptops) */
.clock-body {
	text-align: center;
	background: #ffffff00;
	font-family: lobster, sans-serif;
	font-weight: 200;
}

#clockdiv {
	font-family: sans-serif;
	color: #ffffff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
}

#clockdiv > div {
	padding: 10px;
	border-radius: 3px;
	background: #a7a2f11e;
	display: inline-block;
}

#clockdiv div > span {
	padding: 15px;
	border-radius: 3px;
	background: #8fd5f333;
	display: inline-block;
}

.clock-smalltext {
	padding-top: 5px;
	font-size: 16px;
}

/* Media Queries */

/* Tablets (portrait and landscape) */
@media (max-width: 1024px) {
	#clockdiv {
		font-size: 25px;
	}

	#clockdiv > div {
		padding: 8px;
	}

	#clockdiv div > span {
		padding: 12px;
	}

	.clock-smalltext {
		font-size: 14px;
	}
}

/* Mobile Devices (portrait and landscape) */
@media (max-width: 768px) {
	#clockdiv {
		font-size: 20px;
	}

	#clockdiv > div {
		padding: 6px;
	}

	#clockdiv div > span {
		padding: 10px;
	}

	.clock-smalltext {
		font-size: 12px;
	}
}

/* Small Mobile Devices (portrait and landscape) */
@media (max-width: 480px) {
	#clockdiv {
		font-size: 16px;
	}

	#clockdiv > div {
		padding: 4px;
	}

	#clockdiv div > span {
		padding: 8px;
	}

	.clock-smalltext {
		font-size: 10px;
	}
}