:root {
	--primary-dark: rgb(19,44,22);
	--primary-light: white;
	--primary-highlight: rgb(243,248,38);
}
html, body {
	padding:0;
	margin:0;
	max-width: 100vw;
	min-height:100vh;
	overflow-x: hidden;
}

body {
	display:flex;
	flex-direction: column;

	justify-content: space-between;
	align-items: center;

	background-image: url('../images/fruit.jpg');
	background-position: top center;
	background-repeat: no-repeat;
	background-size:contain;
	background-color: var(--primary-dark);
	background-blend-mode: overlay;

	> :is(header, main, footer) {
		display: flex;
		align-items: center;
		width:100%;
	}

	> header {
		flex-direction: row;
		justify-content: space-between;

		border-bottom: 2px outset gray;

		* {
			display:inline-block;
		}
	}

	> :is(header, footer) {
		font-family: sans-serif;

		background-color: var(--primary-dark);
		color:var(--primary-light);

		padding: 1em;

		a {
			color:var(--primary-light);
			text-decoration: none;
		}
		a:hover {
			color:var(--primary-highlight);
		}
	}

	> :is(main, footer) {
		flex-direction: column;
	}

	> main {
		max-width:95%;
		height: max-content;
		justify-content: flex-start;
	}

	> footer {
		justify-content: space-evenly;
		justify-self: flex-end;

		h2 {
			margin:0;
			padding:0;
		}

		copyright {
			display:block;
			font-size: x-small;
		}
	}
}

[hidden] {
	visibility: hidden;
	display:unset;
}