html,
body {
	margin: 0;
	padding: 0;
	min-height: 100vh; /* Ensures the body is at least the height of the viewport */
	font-family: "Roboto Condensed", sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #ecf0f3;
}

h1, h2, h3, h4 {
	font-family: "Roboto Condensed", sans-serif !important;
}

.uk-container {
	padding: 0!important
}


.heat-info {
	margin-top: .5em;
	border-top: 1px solid #e8e8e8;
}


.race {
	display: inline-block;
	width: 20px;
	text-align: right;
	font-weight: bold;
	border-right: 1px solid #2aa197;
	padding-right: .5em;
	margin-right: .5em
}


.lanes ul {
	font-size: .775em
}

/* Theme Switcher */
.sun-and-moon {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
}

.sun-and-moon > .sun,
.sun-and-moon > .sun-beams,
.sun-and-moon > .moon {
	transform-origin: center center;
	transition: all 0.5s ease-in-out;
}

/* Sun Icon */
.sun-and-moon > .sun {
	fill: var(--icon-fill);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

/* Sun Beams */
.sun-and-moon > .sun-beams {
	stroke: var(--icon-fill);
	stroke-width: 1px;
	opacity: 1;
	transition: opacity 0.3s ease, transform 0.5s ease-in-out;
}

/* Moon Mask and Circle */
.sun-and-moon > .moon {
	fill: var(--icon-fill);
	mask: url(#moon-mask); /* Apply the crescent moon mask */
	-webkit-mask: url(#moon-mask); /* Safari Support */
	transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Dark Theme States */
[data-theme="dark"] .sun-and-moon > .sun {
	opacity: 0;
	transform: scale(1.75);
}

[data-theme="dark"] .sun-and-moon > .sun-beams {
	opacity: 0;
	transform: rotate(-45deg);
}

[data-theme="dark"] .sun-and-moon > .moon {
	opacity: 1;
	transform: scale(1.2);
}

/* Button Styles */
.theme-toggle {
	--size: 2.3rem;
	--icon-fill: hsl(210 10% 30%);
	--icon-fill-hover: hsl(210 10% 15%);
	display: block;
	justify-content: center;
	align-items: center;
	width: var(--size);
	height: var(--size);
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	outline-offset: 5px;
	transition: background 0.3s ease, transform 0.3s ease;
}

.theme-toggle:hover {
	--icon-fill: hsl(210 10% 40%);
	transform: scale(1.1);
}

[data-theme="dark"] .theme-toggle {
	--icon-fill: hsl(210 10% 70%);
}

.theme-toggle > svg {
	width: 100%;
	height: 100%;
	display: block;
}

.uk-button {
	padding: 0 15px;
}

#loadingState {
	font-family: "Share Tech Mono", monospace;
}

.wrapper {
	padding: 0
}

.timer {
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.timer:hover {
	transform: scale(1.005); /* Slight zoom effect */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.timer-elapsed {
	font-family: "Share Tech Mono", monospace;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 1.2em;
	margin: 0;
}

.uk-button-primary {
	background: #2aa197;
	transition: background-color 0.3s ease;
}

.uk-button-primary:disabled:hover {
	background: #2aa197cc;
	color: #fff;
}

@media (min-width: 960px) {

	.uk-container {
		padding: 1em!important
	}


	.wrapper {
		padding: .5em
	}

	.race {
		padding-right: .5em;
		margin-right: .5em
	}
}

/* Dark Theme */
html[data-theme="dark"],
body[data-theme="dark"] {
	background-color: #161c23 !important;
	color: #e0e0e0;
}

body[data-theme="dark"] h2,
body[data-theme="dark"] h3 {
	color: #e0e0e0;
}

body[data-theme="dark"] .timer-elapsed {

}

body[data-theme="dark"] #filter select {
	background-color: #1e1e1e !important;
	border: 0;
	box-shadow: 0 2px 8px rgba(255, 255, 255, 0.16);
}

body[data-theme="dark"] .uk-button-primary {
	background: #81c784;
}

body[data-theme="dark"] .uk-button-primary:disabled:hover {
	background: #81c784cc;
	color: #e0e0e0;
}