@import url("https://fonts.googleapis.com/css2?family=Bungee&family=Bungee+Hairline&family=Bungee+Inline&family=Bungee+Outline&family=Bungee+Shade&family=Cherry+Bomb+One&family=Coral+Pixels&family=Doto:wght@395&family=Hanalei&family=Honk&family=Inter:opsz@14..32&family=Monoton&family=Moo+Lah+Lah&family=Nabla&family=Orbitron&family=Patrick+Hand&family=Poppins&family=Roboto+Mono&family=Rubik+Broken+Fax&family=Rubik+Burned&family=Rubik+Dirt&family=Rubik+Doodle+Shadow&family=Rubik+Glitch&family=Rubik+Glitch+Pop&family=Rubik+Iso&family=Rubik+Lines&family=Rubik+Marker+Hatch&family=Rubik+Maze&family=Rubik+Pixels&family=Rubik+Puddles&family=Rubik+Scribble&family=Rubik+Vinyl&family=Sawarabi+Mincho&family=Shadows+Into+Light+Two&family=Tagesschrift&display=swap");

html,
body {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	font-family: sans-serif;
	overflow-x: hidden;
}

html {
	overflow-y: scroll;
	scrollbar-width: none;
}

html::-webkit-scrollbar {
	display: none;
}

.section {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}

#clck {
	height: 100vh;
	width: 100vw;
	background: black;
	color: white;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#settings {
	background: #f8f9fa;
	padding: 60px 0;
	display: flex;
	justify-content: center;
}

.ph {
	font-size: 1.25rem;
	color: #6c757d;
}

#time {
	font-variant-numeric: tabular-nums; /* Might make this togglable in settings */
	font-size: 5em;
}

#date {
	font-size: 2em;
	margin-top: 15px;
}

#scroll-indicator {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.5em;
	color: white;
	opacity: 0.5;
}

@media (max-width: 600px) {
	#time {
		font-size: 3em;
	}

	#date {
		font-size: 1.5em;
	}
}