/* ######################################## */
/* ######################################## */
/* ######################################## */
/* global variables */

:root {
	--animation-transition-standard: 100ms;
	--color-background: rgb(16, 16, 16);
	--color-button: white;
	--color-button-background: rgb(180, 200, 255);
	--color-header: rgb(200, 255, 255);
	--color-link-hover: white;
	--color-link-standard: rgb(180, 200, 255);
	--color-text: rgb(200, 200, 210);
	--font-family-header: 'Montserrat', sans-serif;
	--font-family-standard: helvetica, arial, sans-serif;
	--font-size-standard: 36px;
	--line-height-standard: 24px;
	--margin-standard: 24px;
	--padding-standard: 24px;
	--thumb-img-box-shadow: 0 0 0 rgba(64, 64, 64, 0);
	--thumb-img-box-shadow-hover: 0 0 16px rgba(64, 64, 64, 0.75);
	--thumb-img-container-width: 128px;
	--thumb-img-container-width-larger: 512px;
	--thumb-gap: 24px;
	--thumb-gap-larger: calc(2 * var(--thumb-gap));
}

/* ######################################## */
/* ######################################## */
/* ######################################## */
/* breakpoints */

body:after {
	content: '';
	display: none;
}
@media screen and (min-width: 600px) {
	body:after {
		content: 'bp-small';
	}
}
@media screen and (min-width: 800px) {
	body:after {
		content: 'bp-small bp-medium';
	}
}
@media screen and (min-width: 1024px) {
	body:after {
		content: 'bp-small bp-medium bp-large';
	}
}
@media screen and (min-width: 2000px) {
	body:after {
		content: 'bp-small bp-medium bp-large bp-huge';
	}
}

/* ######################################## */
/* ######################################## */
/* ######################################## */
/* global elements */

a {
	color: var(--color-link-standard);
	font-weight: bold;
	text-decoration: none;
	transition: all var(--animation-transition-standard);
}

a:hover {
	color: var(--color-link-hover);
}

body {
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-family-standard);
	height: 100vh;
	line-height: var(--line-height-standard);
	margin: 0;
	padding: 0;
}

button {
	border: none;
	color: var(--color-background);
}

figure {
	margin: 0 0 var(--margin-standard);
}

footer, header {
	transition: all var(--animation-transition-standard);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-header);
	font-size: var(--font-size-standard);
	margin: 0 0 var(--margin-standard);
}

h1, h2 {
	color: var(--color-header);
}

h1 {
	font-size: calc(0.6 * var(--font-size-standard));
}

h2 {
	font-size: calc(0.5 * var(--font-size-standard));
}

h3 {
	font-size: calc(0.4 * var(--font-size-standard));
}

html * {
	box-sizing: border-box;
}

img {
	max-width: 100%;
}

label {
	display: block;
}

main {
	margin-left: auto; margin-right: auto;
	max-width: calc(1024px + 2 * var(--padding-standard));
}

.form-row input, .form-row select, .form-row textarea {
	width: 100%;
}

/* ######################################## */
/* ######################################## */
/* ######################################## */
/* global classes */

.always-justify-items .justify-items,
.bp-medium .justify-items {
	display: flex;
	justify-content: space-between;
}

.always-justify-items .justify-items-item-large,
.bp-medium .justify-items-item-large {
	width: 75%;
}

.always-justify-items .justify-items-item-small,
.bp-medium .justify-items-item-small {
	width: 20%;
}

.center {
	text-align: center;
}

.comic-detail aside p {
	margin-top: 0;
}

.content-narrow {
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
}

.document-scrolled header, .document-scrolled footer {
	padding-bottom: calc(0.5 * var(--padding-standard));
	padding-top: calc(0.5 * var(--padding-standard));
}

.fixed {
	background: var(--color-background);
	position: fixed;
	width: 100%;
}

.form-row {
	margin-bottom: var(--margin-standard);
}

.padding-standard {
	padding: var(--padding-standard);
}

main.padding-standard {
	padding-bottom: calc(3 * var(--font-size-standard));
	padding-top: calc(3 * var(--font-size-standard));
}

.pagination {
	padding: var(--padding-standard);
}

.pagination a {
	margin-right: calc(2 * var(--margin-standard));
}

.required:after {
	content: "*";
}

.search-form input, .search-form button {
	height: var(--font-size-standard);
}

.semantic-list li {
	list-style: none;
}

.semantic-list ul {
	margin: 0;
	padding: 0;
}

.text-large {
	font-size: calc(1.1 * var(--font-size-standard));
	line-height: calc(1.5 * var(--line-height-standard));
}

.thumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: calc(2 * var(--margin-standard)) calc(4 * var(--margin-standard));
	justify-content: space-between;
}

.section-margin {
	margin-bottom: calc(2 * var(--margin-standard));
}

.thumb-list a {
	font-weight: normal;
}

.thumb-list li {
	display: block;
	width: 100%;
}

.thumb-list .container {
	display: flex;
	gap: var(--thumb-gap);
	width: 100%;
}

.bp-large .thumb-list .container {
	gap: var(--thumb-gap-larger);
}

.thumb-info h3 {
	margin-top: -5px;
}

.thumb-img, .thumb-info {
	display: inline-block;
	vertical-align: top;
}

.thumb-img {
	width: var(--thumb-img-container-width);
}

.hovermq .thumb-img img {
	transition: all var(--animation-transition-standard);
	box-shadow: var(--thumb-img-box-shadow);
}

.hovermq .thumb-img:hover img {
	box-shadow: var(--thumb-img-box-shadow-hover);
}

.bp-large .thumb-img {
	width: var(--thumb-img-container-width-larger);
}

.thumb-info {
	width: calc(100% - var(--thumb-img-container-width));
}

.bp-large .thumb-info {
	width: calc(100% - var(--thumb-img-container-width-larger));
}

.thumb-merch-link {
	display: none;
}

.bp-large .thumb-merch-link {
	display: block;
}

/* ######################################## */
/* ######################################## */
/* ######################################## */
/* header */

header button {
	border-radius: 0 10px 10px 0;
}

.logo {
	display: inline-block;
}

.logo img {
	margin-right: var(--margin-standard);
	max-width: 24px;
}

.logo span {
	display: none;
}

.bp-small .logo span {
	display: inline-block;
}

.logo * {
	vertical-align: middle;
}

/* ######################################## */
/* ######################################## */
/* ######################################## */
/* footer */

.footer-main {
	bottom: 0;
}