:root {
	--dot-size: 10px;
	--dot-gap: 15px;
}

body {
	background-color: #222;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	font-family: sans-serif;
}

#clock-container {
	display: grid;
	gap: var(--dot-gap);
}

.dot {
	width: var(--dot-size);
	height: var(--dot-size);
	border-radius: 50%;
	background-color: white;
	opacity: 0.5;
	transform: scale(0.2);
	transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.dot.active {
	background-color: #ff4d4d; /* Rouge */
	opacity: 1;
	transform: scale(1.5);
}

/* Media Queries pour la responsivité */

@media (max-width: 900px) {
	:root {
		--dot-size: 7px;
		--dot-gap: 10px;
	}
}

@media (max-width: 620px) {
	:root {
		--dot-size: 5px;
		--dot-gap: 8px;
	}
}
@media (max-width: 480px) {
	:root {
		--dot-size: 3px;
		--dot-gap: 5px;
	}
}