:root {
	--time: 86400s;
}

@keyframes sky {
	  0%	{background-color: #089;}
	 25%	{background-color: #0FF;}
	 75%	{background-color: #013;}
	100%	{background-color: #089;}
}

@keyframes sea {
	  0%	{background-color: #069;}
	 25%	{background-color: #09C;}
	 75%	{background-color: #036;}
	100%	{background-color: #069;}
}

@keyframes boat {
	  0%	{filter: brightness(1.2);	left:  100% ;}
	 25%	{filter: brightness(2.0);	left:   75% ;}
	 75%	{filter: brightness(0.4);	left:   25% ;}
	100%	{filter: brightness(1.2);	left: -100px;}
}

@keyframes sun {
	  0%	{left: -50px; top: 50% ;}
	 20%	{left:  40% ; top: 25% ;}
	 30%	{left:  60% ; top: 25% ;}
	 50%	{left: 100% ; top: 50% ;}
	100%	{left: 100% ; top:  0px;}
}

@keyframes moon {
	  0%	{left: -50px; top:  0px;}
	 50%	{left: -50px; top: 50% ;}
	 70%	{left:  40% ; top: 25% ;}
	 80%	{left:  60% ; top: 25% ;}
	100%	{left: 100% ; top: 50% ;}
}

@keyframes stars {
	  0%	{opacity: 0.2;}
	  5%	{opacity: 0.0;}
	 45%	{opacity: 0.0;}
	 50%	{opacity: 0.2;}
	 75%	{opacity: 1.0;}
	100%	{opacity: 0.2;}
}

@keyframes star {
	  0%	{opacity: 0.6;}
	 50%	{opacity: 1.0;}
	100%	{opacity: 0.6;}
}

body {
	margin: 0;
	animation: sky var(--time) infinite linear;
	overflow: hidden;
}

#stars {
	height: 100%;
	width: 100%;
	display: block;
	position: absolute;
	z-index: 1;
}

#sky {
	height: 100%;
	width: 100%;
	display: inline-block;
	animation: stars var(--time) infinite linear;
	position: absolute;
	top: 0;
}

#sun, #moon {
	width: 50px;
	height: 50px;
	border-radius: 200px;
	position: fixed;
}

#sun {
	background: #FF0;
	animation: sun var(--time) infinite linear;
}

#moon {
	background: #FFF;
	animation: moon var(--time) infinite linear;
}

.star {
	background: #FFF;
	border-radius: 3px;
	width: 3px;
	height: 3px;
	display: inline-block;
	position: absolute;
	animation: star 1s infinite ease-in-out;
}

#bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
}

#sea {
	width: 100%;
	height: 100px;
	margin-top: -30px;
	animation: sea var(--time) infinite;
}

#boat {
	position: relative;
	animation: boat var(--time) infinite linear;
}

#clock {
	position: absolute;
	top: 0;
	right: 0;
	padding: 3vmin;
	background-color: #000;
	border-radius: 0 0 0 3vmin;
}

	#clock * {
		line-height: 0;
	}

	#hour, #dots, #minute {
		display: inline-block;
	}

		#clock span {
			border-radius: 0.25vmin;
		}

		.dot {
			width: 0.5vmin;
			height: 0.5vmin;
			margin: 1vmin 0.5vmin;
			display: block;
			background-color: #C00;
		}

		.digit {
			display: inline-block;
			text-align: center;
			margin: 0.25vmin;
		}

			.dash-h {
				width: 2vmin;
				height: 0.5vmin;
				margin: 0 0.5vmin;
				display: block;
			}

			.dash-2, .dash-5 {
				margin-left: 2vmin;
			}

			.dash-v {
				width: 0.5vmin;
				height: 2vmin;
				display: inline-block;
			}

			.number-0 .dash-0,
			.number-0 .dash-1,
			.number-0 .dash-2,
			.number-0 .dash-4,
			.number-0 .dash-5,
			.number-0 .dash-6 {
				background-color: #C00;
			}

			.number-1 .dash-2,
			.number-1 .dash-5 {
				background-color: #C00;
			}

			.number-2 .dash-0,
			.number-2 .dash-2,
			.number-2 .dash-3,
			.number-2 .dash-4,
			.number-2 .dash-6 {
				background-color: #C00;
			}

			.number-3 .dash-0,
			.number-3 .dash-2,
			.number-3 .dash-3,
			.number-3 .dash-5,
			.number-3 .dash-6 {
				background-color: #C00;
			}

			.number-4 .dash-1,
			.number-4 .dash-2,
			.number-4 .dash-3,
			.number-4 .dash-5 {
				background-color: #C00;
			}

			.number-5 .dash-0,
			.number-5 .dash-1,
			.number-5 .dash-3,
			.number-5 .dash-5,
			.number-5 .dash-6 {
				background-color: #C00;
			}

			.number-6 .dash-0,
			.number-6 .dash-1,
			.number-6 .dash-3,
			.number-6 .dash-4,
			.number-6 .dash-5,
			.number-6 .dash-6 {
				background-color: #C00;
			}

			.number-7 .dash-0,
			.number-7 .dash-2,
			.number-7 .dash-5 {
				background-color: #C00;
			}

			.number-8 .dash-0,
			.number-8 .dash-1,
			.number-8 .dash-2,
			.number-8 .dash-3,
			.number-8 .dash-4,
			.number-8 .dash-5,
			.number-8 .dash-6 {
				background-color: #C00;
			}

			.number-9 .dash-0,
			.number-9 .dash-1,
			.number-9 .dash-2,
			.number-9 .dash-3,
			.number-9 .dash-5,
			.number-9 .dash-6 {
				background-color: #C00;
			}