@font-face {
  font-family: "strawford";
  src: url("strawford-bold-webfont.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "strawford";
  src: url("strawford-bolditalic-webfont.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "strawford";
  src: url("strawford-regular-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "strawford";
  src: url("strawford-regularitalic-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "novela";
  src: url("novela-regular-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "novela";
  src: url("novela-regularitalic-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "novela";
  src: url("novela-bold-webfont.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "novela";
  src: url("novela-bolditalic-webfont.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
}


:root {
	--detail-color: #0E0D0D;
	--page-color: #FFFFFF;
	--link-color: #0E0D0D;
	--accent-one: #7823AC;
	--accent-two: #016273;
	--accent-three: #A90873;
	--weight-border: .1rem;
}

* {
	font-family: "novela", ui-serif, serif;
	margin: 0;
	padding: 0;
}


body {
	color: var(--detail-color);
	background-color: var(--page-color);
}

p {
	font-weight: normal;
	margin-bottom: .6em;
	line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "strawford", ui-sans-serif, sans-serif;
	font-weight: bold;
	margin-bottom: .3em;
	line-height: 1;
}

a {
	color: var(--link-color);
	text-decoration-style: wavy;
	text-decoration-thickness: .05em;
}

h1 a, h2 a, h3 a, h4 a  {
	font-family: "strawford", ui-sans-serif, sans-serif;
}

h1 i, h2 i, h3 i, h4 i {
	font-family: "strawford", ui-sans-serif, sans-serif;
}

header {
	width: 100vw;
	border-bottom: var(--weight-border) solid var(--detail-color);
	position: sticky;
	top: 0;
	background-color: var(--page-color); 
}

header nav {
	max-width: 80rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto 0 auto;
}

.navlogo {
	height: 2.4rem;
	max-width: 90vw;
	margin: .8rem 0 .8rem min(2.4rem, 5vw);
}

.longlogo {
	display: block;
}

.shortlogo {
	display: none;
}

header nav ul {
	list-style: none outside;
	display: flex;
	flex-direction: row;
	gap: 2rem;
	font-size: 1.4em;
	margin: .8rem min(2.4rem, 5vw) .8rem 0;
}

header nav b {
	font-family: strawford;
}

#mobile-nav {
	display: none;
	width: 100vw;
	font-size: 1.1em;
	color: var(--link-color);
	background-color: var(--page-color);
	position: sticky;
	top: 4rem;
	padding: 0 0 1em 0;
	border-bottom: var(--weight-border) solid var(--detail-color);
}

#mobile-nav ul {
	display: flex;
	flex-flow: row wrap;
	gap: 1em;
	justify-content: space-around;
	list-style: none;
	width: 90vw;
	margin: 0 auto 0 auto;
}

#mobile-nav ul a {
	font-family: strawford;
}

button {
	font-family: strawford;
}

.hamburg {
	display: block;
	height: 2rem;
}

.mobile-menu button {
	background: none;
	border: none;
	display: block;
}

main {
	min-height: calc(100vh - 21rem);
}

.main-block {
	border-bottom: var(--weight-border) solid var(--detail-color);
	padding: 2rem;
	scroll-margin-top: 4rem;
	display: grid;
	grid-template-columns: 1fr 26rem;
}

.main-block div {
	padding: 1em;
}

.main-block p {
	font-size: 1.1em;
	max-width: 40rem;
}

.main-block ul {
	width: 100%;
	list-style: none;
}

.main-block ul li {
	padding: .5em;
	border-bottom: var(--weight-border) solid var(--detail-color);
}

.main-block ul li:last-of-type {
	border: none;
}

.main-block:last-of-type {
	border-bottom: none;
}

.main-info {
	display: flex;
	flex-direction: row;
}

.main-illustration {
	width: 12rem;
}

.main-illustration .icon-light {
	display: block;
}

.main-illustration .icon-dark {
	display: none;
}

.main-block:nth-child(odd) .main-info .main-illustration {
	order: 2;
}

#about {
	grid-template-columns: 1fr 1fr;
}

#about {
	font-size: 1.5rem;
	padding: 1.5rem 2rem 2rem 2rem;
}

#about h1, h2, h3 {
	line-height: 1.2;
}

#solo-illustrations {
	display: none;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1.5rem;
	padding: 2rem; 
	border-bottom: var(--weight-border) solid var(--detail-color);
}

.small-title {
	font-variant-caps: all-small-caps;
	font-size: 1rem;
	margin: 1rem 0 0 6rem;
}

.big-title {
	font-size: 2.8rem;
	text-align: center;
}

.events {
	margin: 0 auto 0 auto;
	max-width: 65rem;
	padding: 2rem 4rem 2rem 4rem;
	grid-template-columns: 20rem 1fr;
	column-gap: 2.4rem;
}

.events-calendar {
	margin: 0 auto 0 auto;
	max-width: 69rem;
}

.events div:first-child img {
	width: 100%;
}

.calendar-wrapper {
	max-width: 40rem;
}

ul.month-nav li {
	float: left;
	border-bottom: none;
	padding: 0;
}

ul.month-nav li:first-of-type {
	margin: 0 .8em 0 0;
}

.month-nav button {
	background: var(--page-color);
	color: var(--link-color);
	font-size: 1.5em;
	margin: .3em 0 0 .5em;
	border: none;
	cursor: pointer;
}

.month-nav button.inactive {
	color: var(--detail-color);
	opacity: 50%;
	cursor: initial;
}

.month-view {
	display: none;
	font-variant-caps: all-small-caps;
}

.month-view a {
	text-decoration: none;
}

.current-month {
	display: grid;
	grid-template: 
		'1fr 1fr 1fr 1fr 1fr 1fr 1fr'
		'1fr 1fr 1fr 1fr 1fr 1fr 1fr'
		'1fr 1fr 1fr 1fr 1fr 1fr 1fr'
		'1fr 1fr 1fr 1fr 1fr 1fr 1fr'
		'1fr 1fr 1fr 1fr 1fr 1fr 1fr'
		'1fr 1fr 1fr 1fr 1fr 1fr 1fr'
		'1fr 1fr 1fr 1fr 1fr 1fr 1fr';
}

ul.month-view li {
	border: none;
	text-align: center;
}

ul.month-view a {
	font-family: novela;
	display: block;
	color: var(--page-color);
	background-color: var(--link-color);
	border-radius: 50%;
	height: 1.5em;
	width: 1.5em;
	margin: 0 auto 0 auto;
}

ul.month-view a:hover {
	font-style: normal;
}

ul.month-view a.accent-background {
	background-color: var(--accent-one);
}

ul.month-view a.accent-background-two {
	background-color: var(--accent-two);
}

ul.month-view a.accent-background-three {
	background-color: var(--accent-three);
}

.side-bar-grid {
	display: grid;
	padding: 2rem 4rem 2rem 4rem;
	grid-template-columns: 24em 1fr;
	gap: 1rem;
}

.side-bar-grid ul {
	list-style: none inside;
	width: 90%;
	margin: .3em 0 .6em .6em;
}

.side-bar-grid ul li {
	padding: 0;
	margin-bottom: .4em;
	border: none;
}

.side-bar-grid ul a:hover {
	text-decoration: underline;
}

.normal-content {
	margin: 2rem auto 2rem auto;
	scroll-margin-top: 4.8rem;
	padding: 0 0 1.2em 0;
	width: 50rem;
	font-size: 1.1em;
	border-bottom: var(--weight-border) solid var(--detail-color);
}

.normal-content:last-of-type {
	border-bottom: none;
}

.normal-content ul {
	list-style: none inside;
	margin: .3em 0 .6em .6em;
}

.normal-content ol {
	list-style-position: outside;
	margin: .3em 0 .6em 1.5em;
}

.normal-content ol ol {list-style-type: lower-alpha;}

.normal-content li {
	margin-bottom: .4em;
}

.normal-content img {
	width: 100%;
	margin-bottom: .6em;
}

.summary {
	margin: .3em 0 .4em .6em;
}

.links-list {
	display: none;
	margin-bottom: 0;
}

.accordion {
	background: var(--page-color);
	color: var(--link-color);
	font-size: 1em;
	font-variant-caps: all-small-caps;
	margin: .3em 0 .6em .6em;
	padding: 0 .5em .1em .5em;
	border: .1em solid var(--link-color);
	cursor: pointer;
}

@media (hover: hover) {
	.accordion:hover {
		background: var(--link-color);
		color: var(--page-color);
	}
}

@media (prefers-color-scheme: dark) and (hover: hover) {
	.accordion:hover {
		background: #72D093;
		color: #2E2F3A;
	}
}

.accordion::before {
	content: '\002B';
	margin-right: .2em;
}

.open-accordion::before {
	content: "\21A5";
	margin-right: .2em;
}

.read-more::after {
	content: ' (tap to read more)';
	color: var(--link-color);
}

.open-readmore::after {
	content: ' (tap to hide explanation)';
	color: var(--link-color);
}

.explanation {
	display: none;
}

.profile-columns {
	display: grid;
	grid-template-columns: 18rem 1fr;
	gap: 1.5rem;
	width: 50rem;
}

.profile-columns div:first-child img {
	width: 100%;
}

.tiles {
	font-size: .9rem;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit,minmax(14rem, 1fr));
}

.tiles img {
	width: 100%;
	margin-bottom: .2em;
}

.logo-tiles {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(10rem, auto));
}

.logo-tiles > div:nth-child(n) {
	height: 4rem;
}

.logo-tiles > *:nth-child(n) > *:nth-child(n) {
	height: 4rem;
}

.no-border {
	border: none;
}

.video-embed {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-top: 56.25%;
	margin-bottom: .6em;
}

.responsive-iframe {
	position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  width: 100%;
	  height: 100%;
	  border: none;
}

footer {
	font-family: strawford;
	color: var(--page-color);
	background-color: var(--detail-color);
	padding: min(2.4rem, 5vw);
	gap: 1.5rem;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

footer p {
	font-family: strawford;
	margin-bottom: .2em;
}

footer ul {
	list-style: none;
}

footer ul li {
	padding: 0 0 .1em 0;
}

footer b {
	font-family: strawford;
	font-weight: bold;
}

footer a {
	font-family: strawford;
	color: var(--page-color);
}

.social-icons {
	display: flex;
	flex-direction: row;
	gap: 1em;
	margin: .8rem 0 0 0;
}

.social-icons a {
	display: block;
	width: 1.5em;
	position: relative;
}

.icon-light {
	display: initial;
}

.icon-dark {
	display: none;
}

img.icon-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
}

.h-icon {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.emoji-icons {
	height: 1.8em;
	max-width: 1.8em;
	margin-right: .3em;
	flex-shrink: 0;
}


@media screen and (max-width: 75rem) {
	.main-illustration {
		display: none;
	}
	#solo-illustrations {
		display: grid;
	}
}

@media screen and (max-width: 60rem) {
	
	.longlogo {
		display: none;
	}
	
	.shortlogo {
		display: block;
	}
	
	#about {
		grid-template-columns: 1fr;
		padding: 1rem 0 2rem 0;
	}
	
	#about div {
		margin: auto;
		width: 50rem;
		max-width: 90vw
	}
	
	.small-title {
		font-variant-caps: all-small-caps;
		font-size: 1rem;
		margin: 1rem 0 0 3rem;
	}
	
	.events {
		margin: 0;
		padding: 2rem 2rem 2rem 2rem;
		grid-template-columns: 18rem 1fr;
		column-gap: 1.4rem;
	}
	
	.events-calendar {
		margin: 0;
	}
	
	.side-bar-grid {
		grid-template-columns: 1fr;
		padding: 2em 0 2em 0;
	}
	
	.side-bar-grid div {
		margin: auto;
		padding: 1rem 0 1rem 0;
		width: 40rem;
		max-width: 90vw
	}
	
	.side-bar-grid ul {
		width: 40rem;
		max-width: 90vw;
	}
	
	.normal-content {
		max-width: 90vw;
	}
	
	.profile-columns {
		max-width: 90vw;
	}
}

@media screen and (max-width: 55rem) {
	header nav ul li {
		display: none;
	}
	
	.main-block {
		grid-template-columns: 1fr;
		padding: 2em 0 2em 0;
	}
	
	.main-block div {
		margin: auto;
		padding: .5rem 0 .5rem 0;
		width: 40rem;
		max-width: 90vw
	}
	
	#about {
		font-size: 1rem;
		padding: .5rem 0 1rem 0;
	}
	
	#about div {
		width: 40rem;
		max-width: 90vw
	}
	
	.main-info {
		flex-direction: column;
	}
	
	.main-block p {
		font-size: 1rem;
	}
	
	.main-block:nth-child(odd) .main-info .main-illustration {
		order: 0;
	}
	
	.main-illustration {
		display: block;
	}
	
	#solo-illustrations {
		display: none;
	}
	
	.main-illustration img {
		width: 40vw;
		max-width: 10rem;
		margin: 0 auto 0 auto;
	}
	
	.small-title {
		margin: 1rem 0 0 5vw;
	}
	
	.profile-columns {
		grid-template-columns: 1fr;
	}
	
}

@media screen and (max-width: 35rem) {
	.tiles.equals {
		grid-template-columns: repeat(auto-fit,minmax(11rem, 1fr));
	}
}


@media screen and (max-width: 24rem) {
	
	footer {
		padding: 2em 0 2em 0;
	}
	
	footer div {
		margin: auto;
		width: 22rem;
		max-width: 90vw
	}
}

.accent-less {
	opacity: 50%;
}

.accent-color {
	color: var(--accent-one);
}

.accent-color-two {
	color: var(--accent-two);
}

.accent-color-three {
	color: var(--accent-three);
}

.light-mode-image {
	display: block;
}

.dark-mode-image {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root {
		--detail-color: #ffffff;
		--page-color: #0E0D0D;
		--link-color: #ffffff;
		--accent-one: #C988EE;
		--accent-two: #02B2CF;
		--accent-three: #FD6CBE;
		--weight-border: .06rem;
	}
	
	.light-mode-image {
		display: none;
	}
	
	.dark-mode-image {
		display: block;
	}
	
	.main-illustration .icon-light {
		display: none;
	}
	
	.main-illustration .icon-dark {
		display: block;
	}
	
	.icon-light {
		display: none;
	}
	
	.icon-dark {
		display: initial;
	}
	
	footer {
		color: var(--detail-color);
		background-color: var(--page-color);
		border-top: var(--weight-border) solid var(--detail-color);
	}
	
	footer a {
		color: var(--link-color)
	}
}