:root {
	--Clock-backcolor: #d8e5ff;
	--Clock-backcolor: #fed9d2;
}

/************** Logo animation **************/
#SUN {
	animation: SUN 5s infinite linear;
	transform-origin: center;
	transform-box: fill-box;
}

#STROKE {
	animation: STROKE 4s linear;
	transform-origin: center;
	transform-box: fill-box;
	overflow: visible;
}

@keyframes SUN {
	from {
		transform: rotateZ(0deg);
	}

	to {
		transform: rotateZ(360deg);
	}
}

@keyframes STROKE {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(360deg);
	}
}
/************** End animation **************/

/************** Background animation **************/
.context {
	width: 100%;
	position: absolute;
	top: 50vh;
}

	.context h1 {
		text-align: center;
		color: #fff;
		font-size: 50px;
	}

.area {
	width: 100vw;
	height: 100vh;
	position: absolute;
}

.circles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

	.circles li {
		position: absolute;
		display: block;
		list-style: none;
		width: 20px;
		height: 20px;
		background: #61afff;
		animation: animate 25s linear infinite;
		bottom: -150px;
	}

		.circles li:nth-child(1) {
			left: 25%;
			width: 80px;
			height: 80px;
			animation-delay: 0s;
		}


		.circles li:nth-child(2) {
			left: 10%;
			width: 20px;
			height: 20px;
			animation-delay: 2s;
			animation-duration: 12s;
		}

		.circles li:nth-child(3) {
			left: 70%;
			width: 20px;
			height: 20px;
			animation-delay: 4s;
		}

		.circles li:nth-child(4) {
			left: 40%;
			width: 60px;
			height: 60px;
			animation-delay: 0s;
			animation-duration: 18s;
		}

		.circles li:nth-child(5) {
			left: 65%;
			width: 20px;
			height: 20px;
			animation-delay: 0s;
		}

		.circles li:nth-child(6) {
			left: 75%;
			width: 110px;
			height: 110px;
			animation-delay: 3s;
		}

		.circles li:nth-child(7) {
			left: 35%;
			width: 150px;
			height: 150px;
			animation-delay: 7s;
		}

		.circles li:nth-child(8) {
			left: 50%;
			width: 25px;
			height: 25px;
			animation-delay: 15s;
			animation-duration: 45s;
		}

		.circles li:nth-child(9) {
			left: 20%;
			width: 15px;
			height: 15px;
			animation-delay: 2s;
			animation-duration: 35s;
		}

		.circles li:nth-child(10) {
			left: 85%;
			width: 150px;
			height: 150px;
			animation-delay: 0s;
			animation-duration: 11s;
		}

@keyframes animate {

	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
		border-radius: 0;
	}

	100% {
		transform: translateY(-1000px) rotate(720deg);
		opacity: 0;
		border-radius: 50%;
	}
}
/************** End Background animation **************/

/************** Date Time **************/
.clock-container {
	text-align: center;
	margin: 0;
	font-size: 2rem;
	display: flex;
	flex: 1;
	align-items: center;
	flex-direction: column;
}

	.clock-container .clock {
		background: #282828;
		border: 7px solid #282828;
		box-shadow: -4px -4px 10px rgba(67,67,67,0.5), inset 4px 4px 10px rgba(0,0,0,0.5), inset -4px -4px 10px rgba(67,67,67,0.5), 4px 4px 10px rgba(0,0,0,0.3);
		box-shadow: var(--BSW-box-shadow);
		width: 15rem;
		height: 15rem;
		position: relative;
		padding: 0.3rem;
		border-radius: 50%;
		margin-bottom: 25px;
	}

.outer-clock-face {
	position: relative;
	background: #282828;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border-radius: 100%;
}

	.outer-clock-face::after {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		transform: rotate(90deg)
	}

	.outer-clock-face::after,
	.outer-clock-face::before,
	.outer-clock-face .marking {
		content: '';
		position: absolute;
		width: 5px;
		height: 100%;
		background: #1df52f;
		z-index: 0;
		left: 49%;
	}

	.outer-clock-face .marking {
		background: #bdbdcb;
		width: 3px;
	}

		.outer-clock-face .marking.marking-one {
			-webkit-transform: rotate(30deg);
			-moz-transform: rotate(30deg);
			transform: rotate(30deg)
		}

		.outer-clock-face .marking.marking-two {
			-webkit-transform: rotate(60deg);
			-moz-transform: rotate(60deg);
			transform: rotate(60deg)
		}

		.outer-clock-face .marking.marking-three {
			-webkit-transform: rotate(120deg);
			-moz-transform: rotate(120deg);
			transform: rotate(120deg)
		}

		.outer-clock-face .marking.marking-four {
			-webkit-transform: rotate(150deg);
			-moz-transform: rotate(150deg);
			transform: rotate(150deg)
		}

.inner-clock-face {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	background: #282828;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

	.inner-clock-face::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 16px;
		border-radius: 18px;
		margin-left: -9px;
		margin-top: -6px;
		background: #4d4b63;
		z-index: 11;
	}

.hand {
	width: 50%;
	right: 50%;
	height: 6px;
	background: #61afff;
	position: absolute;
	top: 50%;
	border-radius: 6px;
	transform-origin: 100%;
	transform: rotate(90deg);
	transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

	.hand.hour-hand {
		width: 30%;
		z-index: 7;
	}

	.hand.min-hand {
		height: 3px;
		width: 40%;
		z-index: 8;
	}

	.hand.second-hand {
		background: #ee791a;
		width: 45%;
		height: 2px;
		z-index: 9;
	}

.Time-container {
	font: bold 16px 'Droid Sans', Arial, sans-serif;
	text-align: center;
	color: #282828;
	background-color: #ddd;
	background-image: -webkit-linear-gradient(top, #bbb, #eee);
	background-image: -moz-linear-gradient(top, #bbb, #eee);
	background-image: -ms-linear-gradient(top, #bbb, #eee);
	background-image: -o-linear-gradient(top, #bbb, #eee);
	box-shadow: 0px 0px 12px rgb(0 0 0 / 70%);
	border-top: 1px solid #fff;
	border-radius: 3px;
	padding: 10px;
	margin-bottom: 15%;
	min-width: 115px;
	text-align: center;
}

.clock-Date-container {
	display: flex;
	align-items: center;
}

	.clock-Date-container:before, .clock-Date-container:after {
		content: "";
		width: 8px;
		height: 50px;
		background: #444;
		background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
		background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
		background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
		background-image: -o-linear-gradient(top, #555, #444, #444, #555);
		border: 1px solid #111;
		box-shadow: 20px 20px 60px #b8c3d9, -20px -20px 60px #f8ffff;
		display: block;
	}

	.clock-Date-container:before {
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
	}

	.clock-Date-container:after {
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}

.clock-Date {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #222;
	background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
	background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
	background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
	background-image: -o-linear-gradient(top, #222, #333, #333, #222);
	box-shadow: 0px 0px 8px rgb(0 0 0 / 60%);
	border: 1px solid #111;
	border-radius: 5px;
	margin: auto;
	padding: 15px 10px;
}

	.clock-Date > .Date-Box {
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
	}

		.clock-Date > .Date-Box > .Date-container > .Date-Value {
			/*min-width: 92px;*/
			font: bold 24px 'Droid Sans', Arial, sans-serif;
			text-align: center;
			color: #282828;
			background-color: #ddd;
			background-image: -webkit-linear-gradient(top, #bbb, #eee);
			background-image: -moz-linear-gradient(top, #bbb, #eee);
			background-image: -ms-linear-gradient(top, #bbb, #eee);
			background-image: -o-linear-gradient(top, #bbb, #eee);
			box-shadow: 0px 0px 12px rgb(0 0 0 / 70%);
			border-top: 1px solid #fff;
			border-radius: 3px;
			margin: 0 5px;
			padding: 10px;
			display: inline-block;
			position: relative;
		}

		.clock-Date > .Date-Box > .Date-container > .Date-label {
			font: 12px 'Droid Sans', Arial, sans-serif;
			color: #76b8fe;
			font-weight: 600;
			text-align: center;
			text-transform: uppercase;
			margin: 10px 5px 0 5px;
		}
/************** End Date Time **************/

/************** Button **************/
.btn-primary {
	background-color: #b6d6ff;
	color: #000000;
	font-weight: 600;
	box-shadow: var(--BSW-box-shadow);
	border: none !important;
}

	.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open > .dropdown-toggle.btn-primary, .btn-primary:active:hover {
		background-color: #c2e4ff;
		background-image: none !important;
		color: black;
	}
/************** End Button **************/