:root {
	/* Clock width and height */
	--clk-width: 400px;
	--clk-height: 70px;
	--clk-opacity: 0.8;
	/* Clock digits */
	--clk-digit-color: #66ccff;
	--clk-digit-on-opacity: 1;
	--clk-digit-off-opacity: 0.2;
}

#clock{
	width: var(--clk-width);
	height: var(--clk-height);
	opacity: var(--clk-opacity);
	user-select: none;
	/* Align clock at center */
	position: fixed;
	left: 50%;
	margin-left: calc(0px - var(--clk-width) / 2);
	top: 50%;
	margin-top: calc(0px - var(--clk-height) / 2);
	z-index: -1;
}

#clock:after{
	content: '';
	position: fixed;
	width: 400px;
	height: 20px;
	border-radius: 100%;
	left: 50%;
	margin-left: -200px;
	bottom: 2px;
	z-index: -1;
}


#clock .display{
	text-align: center;
	padding: 20px;
	border-radius: 6px;
	position: relative;
	height: 54px;
}

#clock .light{
	background-color: #00000000;
}

#clock .light:after{
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

#clock.light .digits div span{
	background-color: var(--clk-digit-color);
	border-color: var(--clk-digit-color);
}

#clock.light .digits div.dots:before,
#clock.light .digits div.dots:after{
	background-color: var(--clk-digit-color);
}


#clock .digits div{
	text-align: left;
	position: relative;
	width: 28px;
	height: 50px;
	display: inline-block;
	margin: 0 4px;
}

#clock .digits div span{
	opacity: 0;
	position: absolute;

	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	transition: 0.25s;
}

#clock .digits div span:before,
#clock .digits div span:after{
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border: 5px solid transparent;
}

#clock .digits .d1{ height: 5px;width: 16px;top: 0;left: 6px;}
#clock .digits .d1:before{ border-width: 0 5px 5px 0;border-right-color: inherit;left: -5px;}
#clock .digits .d1:after{ border-width: 0 0 5px 5px;border-left-color: inherit;right: -5px;}

#clock .digits .d2{ height: 5px;width: 16px;top: 24px;left: 6px;}
#clock .digits .d2:before{ border-width: 3px 4px 2px;border-right-color: inherit;left: -8px;}
#clock .digits .d2:after{ border-width: 3px 4px 2px;border-left-color: inherit;right: -8px;}

#clock .digits .d3{ height: 5px;width: 16px;top: 48px;left: 6px;}
#clock .digits .d3:before{ border-width: 5px 5px 0 0;border-right-color: inherit;left: -5px;}
#clock .digits .d3:after{ border-width: 5px 0 0 5px;border-left-color: inherit;right: -5px;}

#clock .digits .d4{ width: 5px;height: 14px;top: 7px;left: 0;}
#clock .digits .d4:before{ border-width: 0 5px 5px 0;border-bottom-color: inherit;top: -5px;}
#clock .digits .d4:after{ border-width: 0 0 5px 5px;border-left-color: inherit;bottom: -5px;}

#clock .digits .d5{ width: 5px;height: 14px;top: 7px;right: 0;}
#clock .digits .d5:before{ border-width: 0 0 5px 5px;border-bottom-color: inherit;top: -5px;}
#clock .digits .d5:after{ border-width: 5px 0 0 5px;border-top-color: inherit;bottom: -5px;}

#clock .digits .d6{ width: 5px;height: 14px;top: 32px;left: 0;}
#clock .digits .d6:before{ border-width: 0 5px 5px 0;border-bottom-color: inherit;top: -5px;}
#clock .digits .d6:after{ border-width: 0 0 5px 5px;border-left-color: inherit;bottom: -5px;}

#clock .digits .d7{ width: 5px;height: 14px;top: 32px;right: 0;}
#clock .digits .d7:before{ border-width: 0 0 5px 5px;border-bottom-color: inherit;top: -5px;}
#clock .digits .d7:after{ border-width: 5px 0 0 5px;border-top-color: inherit;bottom: -5px;}


/* 0 */
#clock .digits div.zero .d1, 
#clock .digits div.zero .d3, 
#clock .digits div.zero .d4, 
#clock .digits div.zero .d5, 
#clock .digits div.zero .d6, 
#clock .digits div.zero .d7{
	opacity: var(--clk-digit-on-opacity);
}
#clock .digits div.zero .d2{
	opacity: var(--clk-digit-off-opacity);
}

/* 1 */
#clock .digits div.one .d5,
#clock .digits div.one .d7{
	opacity: var(--clk-digit-on-opacity);
}
#clock .digits div.one .d1,
#clock .digits div.one .d2,
#clock .digits div.one .d3,
#clock .digits div.one .d4,
#clock .digits div.one .d6{
	opacity: var(--clk-digit-off-opacity);
}

/* 2 */
#clock .digits div.two .d1,
#clock .digits div.two .d2,
#clock .digits div.two .d3,
#clock .digits div.two .d5,
#clock .digits div.two .d6{
	opacity: var(--clk-digit-on-opacity);
}
#clock .digits div.two .d4,
#clock .digits div.two .d7{
	opacity: var(--clk-digit-off-opacity);
}

/* 3 */
#clock .digits div.three .d1,
#clock .digits div.three .d2,
#clock .digits div.three .d3,
#clock .digits div.three .d5,
#clock .digits div.three .d7{
	opacity: var(--clk-digit-on-opacity);
}
#clock .digits div.three .d4,
#clock .digits div.three .d6{
	opacity: var(--clk-digit-off-opacity);
}

/* 4 */
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d5,
#clock .digits div.four .d7{
	opacity: var(--clk-digit-on-opacity);
}
#clock .digits div.four .d1,
#clock .digits div.four .d3,
#clock .digits div.four .d6{
	opacity: var(--clk-digit-off-opacity);
}

/* 5 */
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d3,
#clock .digits div.five .d4,
#clock .digits div.five .d7{
	opacity: var(--clk-digit-on-opacity);
}
#clock .digits div.five .d5,
#clock .digits div.five .d6{
	opacity: var(--clk-digit-off-opacity);
}

/* 6 */
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d3,
#clock .digits div.six .d4,
#clock .digits div.six .d6,
#clock .digits div.six .d7{
	opacity: var(--clk-digit-on-opacity);
}
#clock .digits div.six .d5{
	opacity: var(--clk-digit-off-opacity);
}


/* 7 */
#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7{
	opacity: var(--clk-digit-on-opacity);
}
#clock .digits div.seven .d2,
#clock .digits div.seven .d3,
#clock .digits div.seven .d4,
#clock .digits div.seven .d6{
	opacity: var(--clk-digit-off-opacity);
}

/* 8 */
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7{
	opacity: var(--clk-digit-on-opacity);
}

/* 9 */
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7{
	opacity: var(--clk-digit-on-opacity);
}
#clock .digits div.nine .d6{
	opacity: var(--clk-digit-off-opacity);
}

#clock .digits div.dots{
	width: 5px;
}

#clock .digits div.dots:before,
#clock .digits div.dots:after{
	width: 5px;
	height: 5px;
	content: '';
	position: absolute;
	left: 0;
	top: 14px;
}

#clock .digits div.dots:after{
	top: 34px;
}