:root {
	--h1-font-size: 50px;
	--h2-font-size: 40px;
	--p-font-size: 30px;
	--smaller-p-font-size: 15px;
	--black: rgb(12, 12, 12);
	--darkest-gray: rgb(27, 27, 27);
	--darker-gray: rgb(43, 43, 43);
	--dark-gray: rgb(74, 74, 74);
	--gray: rgb(136, 136, 136);
	--white: #fff;
	--off-white: #fafafa;
	--darker-green: #020;
	--dark-green: #040;
	--light-green: #5f5;
	--lightest-green: #dfd;
}

* {
	font-family: "Open Sans", sans-serif, monospace, monospace;
	font-size: var(--p-font-size);
	line-break: loose;
	scroll-behavior: smooth;
}

h1 {
	font-size: var(--h1-font-size);
	text-align: center;
	color: var(--white);
}

h2 {
	font-size: var(--h2-font-size);
	color: var(--white);
}

p {
	font-size: var(--p-font-size);
	font-weight: bolder;
}

header > h1 {
	margin-top: 0;
	margin-bottom: 0;
	padding: var(--smaller-p-font-size);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-size: var(--p-font-size);
	background-color: var(--darker-green);
}

header > h1 > sub {
	font-size: var(--smaller-p-font-size);
}

html {
	background-color: var(--darker-green);
}

body {
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: var(--dark-green);
}

main {
	position: relative;
	width: 100%;
	padding-top: calc(var(--smaller-p-font-size) * 3);
	padding-bottom: calc(var(--smaller-p-font-size) * 0.25);
	left: 50%;
	transform: translateX(-50%);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	background-color: var(--lightest-green);
	border-bottom-left-radius: var(--smaller-p-font-size);
	border-bottom-right-radius: var(--smaller-p-font-size);
	overflow: hidden;
	z-index: 1;
}

main > div {
	position: relative;
	width: calc(100vw - (var(--smaller-p-font-size) * 3));
	max-width: 100%;
	margin: 5px 0;
	padding: 1px var(--smaller-p-font-size);
	text-align: center;
	border-radius: var(--smaller-p-font-size);
	color: var(--off-white);
	background-color: var(--darker-green);
}

main > div#route {
	margin-bottom: calc(var(--smaller-p-font-size) * 3);
	color: var(--black);
	background-color: var(--white);
}

main > div > p {
	font-size: calc(var(--p-font-size) * 0.9);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin: var(--smaller-p-font-size) 0;
}

main > div#to > p {
	font-size: calc(var(--p-font-size) * 1.1);
}

main > div#route > p::before,
main > div#to > p::before {
	content: "Approx. Arriving At:";
	position: absolute;
	left: var(--smaller-p-font-size);
	top: calc(0px - var(--p-font-size));
	font-size: calc(var(--smaller-p-font-size) * 1.25);
	color: var(--black);
}

main > div#route > p::before {
	content: "Approx. Route:";
}

main > div > img {
	position: absolute;
	right: var(--smaller-p-font-size);
	top: calc(0px - var(--p-font-size) * 1.1);
	width: var(--p-font-size);
	aspect-ratio: 1;
	background-size: contain;
	background-repeat: no-repeat;
}

#enable_gps_btn,
#closest_stop {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100vw - calc(var(--smaller-p-font-size) * 3));
	margin-top: var(--smaller-p-font-size);
	padding: var(--smaller-p-font-size);
	font-size: var(--smaller-p-font-size);
	text-align: center;
	border-radius: var(--smaller-p-font-size);
	background-color: var(--lightest-green);
}

#enable_gps_btn {
	cursor: pointer;
	border: solid thick var(--lightest-green);
	background-color: var(--white);
}

.loading {
	background-size: 400% 400%;
	animation: loading 1s infinite;
}

@keyframes loading {
	0% {
		background: linear-gradient(
			to right,
			var(--gray),
			var(--lightest-green) 10%
		);
	}
	100% {
		background: linear-gradient(
			to right,
			var(--lightest-green) 90%,
			var(--gray)
		);
	}
}

footer > a {
	position: relative;
	margin-top: var(--p-font-size);
	padding: var(--smaller-p-font-size);
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: max-content;
	max-width: 80%;
	color: var(--white);
	font-size: var(--smaller-p-font-size);
	font-weight: bold;
	text-align: center;
	white-space: pre-line;
	border-radius: var(--smaller-p-font-size);
	background-color: var(--darker-green);
}

article#disclaimer {
	width: 100%;
	margin-top: var(--h1-font-size);
	padding-bottom: var(--smaller-p-font-size);
	border-top-left-radius: var(--p-font-size);
	border-top-right-radius: var(--p-font-size);
	background-color: var(--darker-green);
	display: flex;
	flex-direction: column;
}

article#disclaimer > h1 {
	padding-top: var(--smaller-p-font-size);
	font-size: var(--p-font-size);
}

article#disclaimer > div {
	width: max-content;
	align-self: center;
}

article#disclaimer > div > p {
	text-align: justify;
	font-weight: normal;
}

article#disclaimer > div > p,
article#disclaimer > div > p > b {
	width: max-content;
	max-width: 90vw;
	margin-top: calc(var(--smaller-p-font-size));
	font-size: var(--smaller-p-font-size);
	color: var(--white);
}