.digit {
	width: 4rem;
	height: 8rem;
	position: relative;
	--angle: 10%;
}

.digit__bar--x {
	width: 80%;
	height: 8%;
	clip-path: polygon(
		var(--angle) 0,
		calc(100% - var(--angle)) 0,
		100% 50%,
		calc(100% - var(--angle)) 100%,
		var(--angle) 100%,
		0 50%
	);
	position: absolute;
	left: 10%;
}

.digit__bar--y {
	height: 40%;
	width: 16%;
	clip-path: polygon(
		50% 0,
		100% var(--angle),
		100% calc(100% - var(--angle)),
		50% 100%,
		0 calc(100% - var(--angle)),
		0 var(--angle)
	);
	position: absolute;
}

.digit__bar--0 {
	top: 0;
}

.digit__bar--1 {
	top: 7%;
	right: 0;
}

.digit__bar--2 {
	top: 46%;
}

.digit__bar--3 {
	top: 7%;
	left: 0;
}

.digit__bar--4 {
	bottom: 7%;
	right: 0;
}

.digit__bar--5 {
	bottom: 0;
}

.digit__bar--6 {
	bottom: 7%;
	left: 0;
}

.digit__bar--on {
	background-color: black;
}
.digit__bar--off {
	background-color: whitesmoke;
}

.clock {
	display: flex;
	gap: 0.8rem;
}

.colon {
	font-size: 6rem;
	animation: 2s ease-in-out 0s both infinite blink;
}

@keyframes blink {
	0% {
		color: whitesmoke;
	}
	50% {
		color: black;
	}
	100% {
		color: whitesmoke;
	}
}