html {
	height: 100%;

	body {
		height: 100%;

		display: flex;
		flex-direction: column;

		header {
			height: auto;

			display: flex;
			align-items: center;
			gap: 0.5rem;

			padding: 0.3rem;
			border: 1px solid var(--black);

			.hamburger {
				border-radius: 50%;
				padding: 0.5rem;

				div {
					width: 35px;
					height: 5px;
					background: var(--white);
					margin: 6px 0;
				}

				&:hover {
					background: var(--hover-background);
				}
			}
		}


		main {
			flex: 1;
			overflow-y: auto;

			position: relative;

			display: flex;

			>* {
				height: 100%;
				flex: 1;
			}

			nav {
				position: absolute;

				width: 100%;
				background: rgba(0, 0, 0, 0.4);

				z-index: 10;

				div {
					height: 100%;
					padding: 1rem;

					display: flex;
					flex-direction: column;
					align-items: start;
					gap: 1rem;
					width: fit-content;

					background: var(--black);

					a {
						padding: 0.5rem;
						width: 100%;
						border-radius: 0.5rem;
					}
				}
			}

			#content {
				padding: 0.5rem;

				@media only screen and (min-width: 600px) {
					padding: 0 25% 0 25%;
				}
			}
		}
	}
}