/*
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";

html, body, main {
	scroll-behavior: smooth;
}

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;
	color: black;

	background-color: snow;
}

a.btn,
button,
input[type="submit"] {
	/* Reset */
	display: inline-block;
	box-sizing: border-box;
	cursor: pointer;
	color: inherit;
	font-weight: bold;
	text-decoration: none;
	text-align: center;

	outline: none;
	padding: 0 0.2em;
	margin: 0 0.2em;
	border-radius: 0;
	border: 0.1rem solid lightgrey;
	background-color: whitesmoke;
	box-shadow: 0.1rem 0.1rem 0.1rem grey;

	transition: box-shadow 0.2s;
	&:hover {
		box-shadow: 0.2rem 0.2rem 0.2rem grey;
	}

	transition: background-color 0.2s;
	&:active {
		background-color: lightgrey;
	}
}

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

h1 > a,
h2 > a,
h3 > a {
	color: inherit;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

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

	/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/orientation */
	@media (orientation: portrait) {
		align-items: center;
	}
}

#error {
	position: absolute;
	top: 40dvh;

	&::backdrop {
		background: gray;
		opacity: 0.8;
	}
}

main {
	width: 40rem;
	max-width: 100dvw;
	margin: 0 auto;
	margin-bottom: 5rem;

	.card {
		padding: 1rem;
		margin: 1rem 0;
		box-shadow: 0.1rem 0.1rem 0.1rem grey;
		border: 0.1rem solid lightgrey;
		background-color: whitesmoke;
		width: 100%;
		max-width: 95dvw;

		h2,
		h3 {
			margin: 1em 0;
		}

		small {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
		}

		input,
		textarea {
			width: 100%;
			resize: vertical;
		}

		.buttons {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;

			button,
			.btn {
				width: 2rem;
				padding: 0;
				margin: 0 0.5rem;
			}
		}
	}

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

	img {
		display: block;
	}

	progress {
		width: 100%;
	}

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

	#pager {
		.pagebuttons {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
		}
	}
}

header,
aside {
	margin: 0.5rem;
}

aside {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	@media (orientation: landscape) {
		float: left;
	}
}

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;
}

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

#recent a {
	margin: 0.5rem;
}