:root {
	font-family: "Averia Sans Libre", sans-serif;

	--inkColor: hsla(0, 0%, 12%, 1);
	--titleColor: hsla(360, 1%, 7%, 1);
	--backgroundColor: hsla(206, 20%, 84%, 1);
	--linkColor: hsla(16, 66%, 56%, 1);
	--linkColorHover: hsla(45, 67%, 54%, 1);
	--accentColor: hsla(191, 28%, 55%, 1);
	--disabledColor: hsla(0, 0%, 50%, 1);
	--darkGrey: hsla(0, 0%, 37%, 1);

	--patternColor: hsl(from var(--accentColor) h s calc(l - 2));
}

html {
	/* pattern background */
	background:
      radial-gradient(100px at 100% 0, var(--accentColor) 6.25%, var(--patternColor) 6.3% 18.75%, var(--accentColor) 18.8% 31.25%, var(--patternColor) 31.3% 43.75%, var(--accentColor) 43.8% 56.25%, var(--patternColor) 56.3% 68.75%, #0000 0),
      radial-gradient(100px at 0 0, var(--accentColor) 6.25%, var(--patternColor) 6.3% 18.75%, var(--accentColor) 18.8% 31.25%, var(--patternColor) 31.3% 43.75%, var(--accentColor) 43.8% 56.25%, var(--patternColor) 56.3% 68.75%, #0000 0),
      radial-gradient(100px at 0 100%, var(--accentColor) 6.25%, var(--patternColor) 6.3% 18.75%, var(--accentColor) 18.8% 31.25%, var(--patternColor) 31.3% 43.75%, var(--accentColor) 43.8% 56.25%, var(--patternColor) 56.3% 68.75%, #0000 0),
      radial-gradient(100px at 100% 100%, var(--accentColor) 6.25%, var(--patternColor) 6.3% 18.75%, var(--accentColor) 18.8% 31.25%, var(--patternColor) 31.3% 43.75%, var(--accentColor) 43.8% 56.25%, var(--patternColor) 56.3% 68.75%, #0000 0) var(--accentColor);
	background-size: 100px 100px;
	background-color: var(--accentColor);
}


body {
	background-color: var(--backgroundColor);
	color: var(--inkColor);
	padding: 2.5em;
	min-width: 0;
	max-width: 1920px;
	margin: auto;

	/* mobile first */
	--numcolumns: 1;
	/* border: 2px solid black; */
}

h1 {
	color: var(--inkColor);
	font-size: 3.35em;
	text-align: center;
	font-family: "Pirata One", system-ui;
	text-shadow: 3px 2px 0px var(--accentColor);
	margin: 0.5em;
}

h2 {
	color: var(--titleColor);
	font-family: "IM Fell Double Pica SC", serif;
	margin: 0;
}

h3 {
	color: var(--titleColor);
	font-family: "Averia Serif Libre", serif;
	text-align: right;
	font-size: 1.25em;
	font-weight: 300;
	margin: 0;
}

h4 {
	color: var(--titleColor);
	font-family: "Averia Serif Libre", serif;
}

a {
	color: var(--linkColor);
	text-decoration: underline;
	font-weight: 700;
	font-style: italic;
}

a:hover {
	color: var(--linkColorHover) !important;
}

p {
	font-family: "Averia Serif Libre", serif;
	font-size: 1.05em;
	font-weight: 300;
	text-align: justify;
}

.breadcrumbs {
	font-size: 1.25em;
}

.navigation {
	float: left;
	margin-top: 1em;
}

.disabled {
	pointer-events: none;
	cursor: default;
	color: var(--disabledColor) !important;
}

.grid {
	display: grid;
	grid-template-columns: repeat(var(--numcolumns), 1fr);
	gap: 1em;
}

.column2m {
	--numcolumns: 2 !important;
}

.column3m {
	--numcolumns: 3 !important;
}

.column {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1em;
}

.column div, .column h2 {
	flex-grow: 1;
}

.border {
	padding: 0.75em;
	border: 2px solid black;
	background-color: rgba(0, 0, 0, 0.035);
	box-shadow: 3px 3px 0px var(--accentColor);
}

.avatar {
	margin-top: 1em;
	width: 100%;
	aspect-ratio: 1/1;
	background-image: url('/assets/images/avatar-thumb.webp');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.stats {
	text-align: center;
	font-size: 0.85em;
	padding: 0.75em;
	border: 2px dashed grey;
	border-radius: 15px;
	background-color: hsla(191, 28%, 55%, 0.2);
	h2, h3 {
		text-align: center;
		color: var(--darkGrey);
	}
}

.img-details {
	max-width: 100%;
	max-height: max(80vh, 600px);
	margin: auto;
	display: block;
	border: 1px solid black;
}

.fullwidth {
	max-height: none !important;
}

.thumbnail {
	width: 100%;
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	display: flex;
	border: 1px solid black;
	position: relative;
}

.section {
	display:flex;
	align-items: center;
	justify-content: center;

	color: var(--backgroundColor);
	background-color: var(--inkColor);
	border: 2px solid var(--inkColor);
	box-shadow: 3px 3px 0px var(--accentColor);

	font-family: "IM Fell Double Pica SC", serif;
	font-style: normal;
	font-size: 1.5em;
	font-weight: 300;
	text-decoration: none;
	padding: 0.4em;
}

.section:hover {
	background-color: var(--linkColorHover);
	color: var(--inkColor) !important;
}

.btnstrip {
	text-decoration: none;
	border: 2px solid var(--inkColor);
	color: var(--inkColor);
	padding: 0.25em 1.25em 0.25em 1.25em;
	line-height: 2.5em;
}

.btnstrip:hover {
	background-color: var(--linkColorHover);
	color: var(--inkColor) !important;
}

.selected {
	background-color: var(--inkColor);
	color: var(--backgroundColor);
}

.video-container {
  width: 100%;
	aspect-ratio: 3/4;
  position: relative;
	border: 1px solid black;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

@counter-style --cross {
	system: cyclic;
	symbols: '✧';
}

@counter-style --stars {
	system: cyclic;
	symbols: '✷' '※' '❊' '✧' '✧';
}

ul.bullets li {
	list-style: none;
	line-height: 1.5;

	font-family: "Averia Serif Libre", serif;
	font-size: 1.05em;
	font-weight: 300;
}

ul.bullets li::before {
	position: absolute;
	margin-top: -0.0em;
	margin-left: -1.65em;
	inline-size: 1em;
	text-align: end;
	content: counter(list-item, --cross);
}

ul.stars li::before {
	content: counter(list-item, --stars) !important;
}

.about-img {
	margin: 1em;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	width: 90%;
}

@media all and (min-width: 1024px) {
	body {
		padding: 2.5em 4em 2.5em 4em;
	}

	.mobile {
		display: none;
	}

	.column2 {
		--numcolumns: 2 !important;
	}

	.column3 {
		--numcolumns: 3 !important;
	}

	.column4 {
		--numcolumns: 4 !important;
	}

	.navigation {
		position: relative;
		text-align: right;
		float: right;
	}
}

@media all and (max-width: 1024px) {
	.about-img {
		aspect-ratio: 3/4;
	}

	.desktop {
		display: none;
	}
}