html, body {
	overflow: hidden;
}

body {
	background-color: #79ceeb;
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100dvh;
	display: grid;
	grid-template-areas:
		"header"
		"content"
		"nav";
	grid-template-rows: auto 1fr auto;
}

header h1 {
	margin: 10px 0;
	text-align: center;
}

main {
	overflow-y: auto;

	.page {
		&:not(:first-child):not(:target),
		&:first-child:has(~ :target) {
			display: none !important;
		}

		&#temp {
			display: flex;
			height: 100%;
			flex-direction: column;
			justify-content: center;
			align-items: stretch;

			svg>text {
				font-variant-numeric: tabular-nums;
			}

			#boost {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 4rem;

				#boost-toggle {
					position: absolute;
					opacity: 0;
					width: 0;
					height: 0;

					&:checked+.slider {
						background-color: #2196F3;
					}

					&:checked+.slider:before {
						transform: translateX(26px);
					}
				}

				.slider {
					position: relative;
					display: inline-block;
					width: 60px;
					height: 34px;
					background-color: #cccccc;
					border-radius: 34px;
					cursor: pointer;
					transition: background-color 0.4s;


					&:before {
						content: "";
						position: absolute;
						width: 26px;
						height: 26px;
						left: 4px;
						bottom: 4px;
						background-color: #ffffff;
						border-radius: 50%;
						transition: transform 0.4s;
					}
				}

				.label {
					font-size: 1.2rem;
					margin-top: 0.5rem;
				}
			}
		}

		&#plan {
			display: flex;
			height: 100%;
			flex-direction: column;
			justify-content: center;

			p {
				text-align: center;
				padding: 0 1rem;
			}
		}

		&#about {
			padding: 1rem;
		}
	}
}

nav {
	display: grid;
	grid-template: ". temp plan about download" auto / 1fr auto auto auto 1fr;
	gap: 2rem;
	background-color: #21afde;
	padding: 0.5rem;

	a {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 0.75rem;
		text-decoration: none;
		color: #000000;

		&[href="#temp"] {
			grid-area: temp;
		}
		&[href="#plan"] {
			grid-area: plan;
		}
		&[href="#about"] {
			grid-area: about;
		}
		&#install-button {
			grid-area: download;
			justify-self: start;
		}

		svg {
			width: 2.75rem;
			height: 2.75rem;
			margin-bottom: 0.25rem;
		}
	}
}