/* Imports */

	@import url("style-reset.css"); /* Reset */
	@import url("style-fonts.css"); /* Fonts */
	@import url("style-variables.css"); /* Variables */

/* Basic settings */

	:root {
		box-sizing: border-box;
		font-size: 1rem;
		scrollbar-width: thin;
	}

	* {
		transition: ease 0.5s all;
	}

	body {
		background: var(--background-body);
		font: normal 300 100% var(--font-body);
		text-align: center;
		color: var(--text-color);
		hyphens: auto;
		overflow-x: clip;
	}

	a {
		color: var(--discord-yellow);
		text-decoration: none;
		border-bottom: 1px dashed;
		transition: ease 0.5s all;
		&:hover {
			color: var(--discord-fuchsia);
		}
	}

	img {
		display: inline-block;
		margin: 1em;
		object-fit: fill;
		border: var(--border-images);
		&.portrait {
			max-width: 70%;
		}
		&.landscape {
			max-width: calc(100% + 2em);
			position: relative;
			left: -1em;
			border-left: none;
			border-right: none;
		}
	}

/* Basic elements */

	header {
		text-align: center;
	}

	#wrapper {
		margin: 1em auto 0;
		padding: 2em 1em;
		background: var(--background-wrapper);
		border-top: var(--border-main);
		& img {
			margin: 1em 0;
		}
	}

	footer {
		position: relative;
		bottom: 0;
		width: 100%;
		padding: 2em 1em;
		font-size: 90%;
		text-align: center;
		background: var(--background-sections);
		border-top: var(--border-main);
	}

/* Headers */

	h1 {
		display: inline-block;
		margin: 1em 1ex 1ex;
		padding: 1ex;
		font: 900 150% var(--font-header);
		text-transform: uppercase;
		color: var(--white);
		background: var(--discord-blurple);
		box-shadow: var(--shadow-style) var(--shadow-color);
	}

	h2 {
		margin-bottom: 1em;
		font: 500 135% var(--font-header);
		text-transform: uppercase;
		color: var(--discord-blurple);
		--h2-border-gradient: linear-gradient(
			to right,
			transparent,
			var(--discord-blurple),
			transparent);
		border-bottom: 2px solid;
		border-image: var(--h2-border-gradient) 1;
	}

	h3 {
		margin: 1em 0 1.5ex;
		padding-top: 1em;
		font: bold 110% var(--font-body);
		text-align: left;
		color: var(--white);
		border-top: var(--border-main);
	}

	h2 + h3 {
		padding-top: 0;
		border-top: none;
	}

/* Flexbox */

	.flexbox {
		display: flex;
	}

	.characters {
		flex-flow: row wrap;
		justify-content: space-between;
		margin-bottom: 1em;
		& div {
			flex-basis: 49%;
			text-align: center;
			& a {
				display: block;
				font: 500 100% var(--font-header);
				border-bottom: none;
				&.wip {
					color: var(--border-images);
					& img {
						filter: blur(0.5ex) grayscale(1) opacity(0.25);
						transform: scale(1.1);
						}
				}
				& div {
					aspect-ratio: 1 / 1;
					min-height: 0;
					overflow: hidden;
					border: var(--border-images);
					&:hover {
						border-color: var(--discord-fuchsia);
						transform: rotate(5deg);
						}
				}
			& img {
				width: 100%;
				margin: 0 !important;
				border: none;
				}
			}
			& p {
				text-align: inherit;
			}
		}
		& > div {
			padding-bottom: 2em;
		}
	}

/* Text */

	p {
		text-align: justify;
		& + p {
			margin-top: 1em;
		}
	}

	blockquote {
		padding: 0 1ex;
		font-style: italic;
		font-size: 120%;
		&::before {
			content: "“";
		}
		&::after {
			content: "”";
		}
	}

/* Tables */

	table {
		width: 100%;
		text-align: left;
		& th, & td {
			padding: 0.25ex 0;
			vertical-align: baseline;
		}
		& th {
			width: 9em;
			padding-right: 1em;
			font-weight: bold;
			color: var(--white);
		}
		& + table {
			margin-top: 1.5ex;
			padding-top: 1.5ex;
			border-top: var(--border-main);
		}
		&:last-of-type {
			margin-bottom: 1.5ex;
		}
	}

/* Lists */

	ul {
		list-style: square;
		text-align: left;
	}

/* Resolution variations */
/* Common breakpoints: 20, 30, 40, 60, 64, and 80em */

	@media screen and (min-width: 36em) {
		:root {
			font-size: 105%;
		}
		#wrapper {
			padding: 3em;
			img {
				margin: 2em 0;
				&.landscape {
					max-width: calc(100% + 6em);
					left: -3em;
				}
			}
		}
		h1 {
			margin-top: 2em;
			margin-bottom: 1em;
			font-size: 160%;
		}
		h2 {
			font-size: 140%;
		}
		blockquote {
			font-size: 130%;
		}
		.characters {
			& div {
				flex-basis: 32%;
			}
			& p {
				margin-left: 0;
			}
		}
		p {
			margin-left: 2em;
		}
		table {
			& th {
				width: 11em;
				text-align: right;
			}
		}
	}

	@media screen and (min-width: 60em) {
		:root {
			font-size: 110%;
		}
		#wrapper {
			max-width: 80%;
			padding: 3em 4em;
			border: var(--border-main);
			& img.landscape {
				max-width: calc(100% + 8em);
				left: -4em;
				border-left: inherit;
				border-right: inherit;
			}
		}
		h1 {
			font-size: 175%;
		}
		h2 {
			font-size: 150%;
		}
		blockquote {
			font-size: 140%;
		}
		p {
			margin-left: 3em;
		}
		.characters {
			& div {
				flex-basis: 24%;
			}
			& p {
				margin-left: 0;
			}
		}
	}

	@media screen and (min-width: 80em) {
		#wrapper {
			max-width: 60em;
			padding: 4em 5em;
		}
	}