/* Import the base as layered CSS so it has lower precedence than this file */
@import '../dist/css/main.css' layer(base);

:root {
	/* Palette */
	--light: #FFFFFF;
	--medium: #282827;

	/* Dimensions */
	--content-padding: 100px;

	@media(max-width: 599px) {
		/* Phones */
	}
	@media(min-width: 600px) {
		/* Tablets in portrait mode */
	}
	@media(min-width: 900px) {
		/* Tablets in landscape mode */
	}
	@media(min-width: 1200px) {
		/* Desktop small screen */
	}
	@media(min-width: 1800px) {
		/* Desktop large screen */
	}
}

:root, :root.light {
	--accent-color: var(--medium);
}
@media(prefers-color-scheme: dark) {
	:root {
		--accent-color: var(--medium);
	}
}
:root.dark {
	--accent-color: var(--medium);
}


body {
	margin: 0px;

	/* For the sticky footer */
	display: flex;
	flex-direction: column;
	min-height: 100dvh;

	@media(min-width: 1800px) {
		/* Desktop large screen */
		text-align: center;
	}

	& > header {
		padding-right: var(--content-padding);
		padding-left: calc(var(--content-padding) / 3.0);
		padding-top: 60px;
		padding-bottom: 50px;
		font-size: 30px;

		/* Spread header contents horizontally */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		picture {
			height: 40px;
			img {
				height: inherit;
			}
		}

		/* This button is special */
		& > a[role="button"] {
			display: block;
			border: none;
			background: none;
			padding: 0;
			margin: 0;
		}
	}
}

hgroup {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: var(--content-padding);
	padding-left: calc(var(--content-padding) / 3.0);
	font-weight: bold;
	line-height: 50px;
	flex: 1;

	h1 {
		--pico-font-size: 40px;
		margin: 0px;
	}
	p {
		--pico-font-size: 40px;
		--pico-color: initial;
		font-size: var(--pico-font-size);
		margin: 0px;
	}
}

footer {
	margin: 0px;
	height: 30vh;
	background-color: var(--accent-color);
	clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);
	position: relative;

	* {
		color: var(--light);
	}
	p {
		--pico-font-size: 1rem;
		font-size: var(--pico-font-size);
		margin-right: var(--content-padding);
		text-align: right;
		position: absolute;
		bottom: 0;
		right: 0;
	}
}