:root {
	--main-bg-color: #fff;
	--main-text-color: #d9d9d9;
	--main-time-color: #f58f70;
}

[time-data-theme="dark"] {
	--main-bg-color: #191919;
	--main-text-color: #333;
	--main-time-color: #f58f70;
}

* {
	transition: all ease 0.2s;
	color: var(--main-time-color);
}

.noselect {
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

body {
	margin: 40px auto 20px;
	background: var(--main-bg-color);
	color: var(--main-text-color);
	font-family: Helvetica, Arial;
	text-align: justify;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
}

p, span {
	color: var(--main-text-color);
	transition: color 0.4s ease-out;
	-ms-transition: color 0.4s ease-out;
	-moz-transition: color 0.4s ease-out;
	-webkit-transition: color 0.4s ease-out;
	letter-spacing: 12.1px;
	font-size: 17px;
}

#midnight {
	color: var(--main-text-color);
	letter-spacing: 23px;
}

#it, #is, span.active {
	color: var(--main-time-color) !important;
	font-weight: 750;
	transition: color 0.4s ease-out;
	-ms-transition: color 0.4s ease-out;
	-moz-transition: color 0.4s ease-out;
	-webkit-transition: color 0.4s ease-out;
}

#text-clock {
	width: 250px;
	position: relative;
	text-transform: uppercase;
}

#line-1, #line-1 span {
	letter-spacing: 13.9px;
}

#line-2, #line-2 span {
	letter-spacing: 11.3px;
}

#line-7, #line-7 span {
	letter-spacing: 11.8px;
}

#line-8, #line-8 span {
	letter-spacing: 12.3px;
}

#line-9, #line-9 span {
	letter-spacing: 11.6px;
}

#line-10, #line-10 span {
	letter-spacing: 11.6px;
}

#logo {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-size: 40px;
	position: absolute;
	margin-top: 650px;
}

#logo:hover {
	opacity: 0.3;
	transform: scale(1.1);
}

@media screen and (max-width:750px) {
	#logo {
		display: none;
	}
}