body {
	margin: auto;
	font-family: 'ds-digitalbold';
}

p {
	margin: 0;
}

.clock-container {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.clock-display {
	background-color: #202320;
	width: 713px;
	height: 277px;
	z-index: 99;
	border-radius: 16.5px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
}

.clock-display-border {
	position: absolute;
	background-color: #72787F;
	width: 743px;
	height: 307px;
	border-radius: 25px;
	z-index: 9;
}

.clock-body {
	position: absolute;
	background-color: #bebebe;
	width: 758px;
	height: 322px;
	border-radius: 40px 33px 44px 100px;
	transform: translate(7px, -7px);
}



.hours,
.minutes,
.dots,
.am-pm {
	/*	background-color: yellow;*/
	height: 190px;
	margin: 0 5px;
	display: flex;
}

.hours,
.minutes {
	width: 250px;
	font-size: 250px;
}

.dots,
.am-pm {
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.digit-back {
	display: flex;
	justify-content: flex-end;
	align-items: center;


}

.digit-back .digit-1,
.digit-back .digit-2 {
	position: absolute;

}

.digit-back p {
	color: #171918;
}

.digit-back .digit-1 p,
.digit-back .digit-2 p {
	color: #f33;
}


.dots {
	width: 30px;
}

.dots div {
	background-color: #171918;
	width: 15px;
	height: 15px;
	margin: 17px 0;
	border-radius: 3px;
	animation: blink 1s infinite;
}

@keyframes blink {
	50% {
		background-color: #f33;
	}
}

.am-pm {
	width: 80px;
}

.am-pm .am,
.am-pm .pm {
	background-color: transparent;
	height: 50px;
	width: 60px;
	border-radius: 10px;
	margin: 10px;
	text-align: center;
}

.am p,
.pm p {
	font-size: 50px;
	color: #171918;
}