/*
TODO my eventual goal is to whittle this down to the smallest it can be,
moving styles into components as much as possible
*/

@import "openmoji.css";

body {
	/* Reset */
	height: 100lvh;
	margin: 0;

	display: flex;
	flex-flow: column nowrap;

	/* https://modernfontstacks.com */
	font-family: "Bitstream Charter", "Sitka Text", Cambria, serif, OpenMoji;
	font-weight: normal;
	font-size: 14pt;

	background-color: snow;
}

button,
a,
input[type="submit"] {
	/* Reset */
	cursor: pointer;
	color: inherit;
	font-weight: bold;
	text-decoration: none;

	outline: none;
	padding: 0 0.2em;
	border-radius: 0;
}

#container {
	display: flex;
	flex-grow: 1;
	flex-flow: row wrap-reverse;
	align-items: stretch;

	aside {
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
	}
}

header,
aside {
	margin: 0.5rem;
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/orientation */
}

main {
	article,
	form {
		padding: 1rem;
	}

	article,
	form,
	button,
	a {
		box-shadow: 0.1rem 0.1rem 0.1rem grey;
	}

	article,
	form,
	button,
	a,
	input,
	textarea {
		border-radius: 0;
		border: 0.1rem solid lightgrey;
		background-color: whitesmoke;
		width: 100%;
	}

	button,
	a,
	input[type="submit"] {
		transition: box-shadow 0.2s;
		&:hover {
			box-shadow: 0.2rem 0.2rem 0.2rem grey;
		}
	}
	width: 40rem;
	max-width: 100dvw;
	margin: 0 auto;

	p {
		line-height: 150%;
		text-align: justify;
	}

	img {
		display: block;
	}

	article {
		margin: 1rem 0;
		h2 {
			margin: 1rem 0;
		}
		small {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
		}
		.share {
			button,
			a {
				height: 2rem;
				width: 2rem;
				margin: 0 0.5rem;
			}
		}
	}

	h2#cta {
		font-size: 40pt;
	}
}

header {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;

	hgroup {
		h1 {
			margin: 0;
			padding: 0;
		}

		img {
			display: inline;
			position: relative;
			max-height: 1lh;
			bottom: -0.25lh;
		}
	}

	/* https://css-irl.info/anchor-positioning-and-the-popover-api/ */
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using */
	button[popovertarget="login"] {
		anchor-name: --login-button;
	}

	form#login {
		position: fixed;
		position-anchor: --login-button;
		position-area: left;
		margin: 1rem;

		border: solid 0.1rem lightgrey;
		box-shadow: 0.2rem 0.2rem 0.2rem grey;
	}
}

pre {
	max-width: 100%;
	overflow: auto;

	/* https://modernfontstacks.com */
	font-family:
		ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
		"DejaVu Sans Mono", monospace;
	font-weight: normal;
}

button,
input,
textarea {
	/* Reset */
	color: inherit;
	font-family: inherit;
	font-size: inherit;
}

footer {
	font-size: 10pt;
	text-align: center;
	color: grey;
}