@import url("https://fonts.googleapis.com/css?family=Heebo:300&display=swap");

* {
	box-sizing: border-box;
}

:root {
	--primary-color: #000;
	--secondary-color: #fff;
}

html {
	transition: all 0.5s ease-in;
}

html.dark {
	--primary-color: #fff;
	--secondary-color: #333;
}

html.dark {
	background-color: #111;
	color: var(--primary-color);
}

body {
	font-family: "Heebo", sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
	margin: 0;
}

.toggle {
	cursor: pointer;
	background-color: var(--primary-color);
	color: var(--secondary-color);
	border: 0;
	border-radius: 4px;
	padding: 8px 12px;
	position: absolute;
	top: 100px;
}

.toggle:focus {
	outline: none;
}

.clock-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.clock {
	position: relative;
	width: 200px;
	height: 200px;
}

.needle {
	background-color: var(--primary-color);
	position: absolute;
	top: 50%;
	left: 50%;
	height: 65px;
	width: 3px;
	transform-origin: bottom center;
	transition: all 0.5s ease-in;
}

.needle.hour {
	transform: translate(-50%, -100%) rotate(0deg);
}

.needle.minute {
	transform: translate(-50%, -100%) rotate(0deg);
	height: 100px;
}

.needle.second {
	transform: translate(-50%, -100%) rotate(0deg);
	height: 100px;
	background-color: #5da271;
}

.center-point {
	background-color: #5da271;
	width: 10px;
	height: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

.center-point::after {
	content: "";
	background-color: var(--primary-color);
	width: 5px;
	height: 5px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

.time {
	font-size: 60px;
}

.date {
	color: #aaa;
	font-size: 14px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.date .circle {
	background-color: var(--primary-color);
	color: var(--secondary-color);
	border-radius: 50%;
	height: 18px;
	width: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 18px;
	transition: all 0.5s ease-in;
	font-size: 12px;
}