:root {
	--bg-color: #841205;
	--hl-color: #A72119;
	--menu-font-color: white;
	--font-color: #430C08;
	--box-bg: #ece2d5;
	--main-font: Arial, Helvetica, sans-serif;
	--highlight-font: 'Cubellan';
}

@font-face {
  font-family: 'Cubellan';
  src: url('../font/Cubellan.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html {
	font-size: 1.5rem;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--box-bg);
  color: var(--font-color);
  font-family: var(--main-font);
}

.container {
	max-width: 60rem;
	margin: 0 auto;
	padding: clamp(.5rem, 2vw, 3rem);
}

section.red {
	background-color: var(--bg-color);
}

main {
	font-size: clamp(1rem, 2vw, 1.2rem);
}

main img {
	max-width: 100%;
	height: auto;
}

main a {
	color: red;
	text-decoration: underline;
}

h1, h2, h3, h4, h5 {
	font-family: var(--highlight-font);
}

h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin-bottom: 0.5rem;
	margin-top: 1rem;
}

.body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.body > main {
	flex: 1 1 0%;
}
/** Header and Navigation ###################################################### **/

header {
	background-color: var(--bg-color);
	border-bottom: 1px solid var(--box-bg);
	font-family: var(--highlight-font);
}

header .container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-block: clamp(.5rem, 1.5vw, 1.7rem);
}

header .logo {
	flex-grow: 1;
	display: block;
	text-decoration: none;
	font-weight: bold;
	font-size: clamp(1.5rem, 4vw, 3rem);
	color: var(--box-bg);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-grow: 1;
 	justify-content: flex-start;
}

header .site-nav {
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.logo img {
	height: clamp(1.5rem, 4vw, 3rem);
	margin: .5rem;
}

.main-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.main-menu > li {
	margin: 0;
	padding: 0;
}

.main-menu > li > a {
	display: block;
	padding-inline: clamp(0.5em, 1.5vw, 1.5em);
	padding-block: 0.2rem;
	color: var(--menu-font-color);
	text-decoration: none;
}

/* landscape view */
@media (orientation: portrait) {
	header .logo {
		justify-content:center;
	}

	header .site-nav {
		justify-content:center;
	}
}

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

footer {
	background-color: var(--bg-color);
	color: var(--box-bg);
	padding: 1rem 0;
}

footer > .container {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}

footer > .container > div {
	flex-basis: 25%;
}


footer > .container > div:last-child {
	flex-basis: auto;
}


footer  a {
	color: var(--box-bg);
	text-decoration: underline;
}

@media (orientation: portrait) {
	footer > .container {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.5rem;
	}
	
	footer > .container > div {
		flex-basis: auto;
		margin-bottom: 1rem;
	}
}

/** news list ###################################################### **/

.news-list {
	list-style: none;
	padding: 0;
	margin: 0;
	text-decoration: none;
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.news-list li {
	flex: 1 1 calc(33.333% - 1rem);	
}

.news-list li a {
	display: block;
	background-color: var(--hl-color);
	color: var(--menu-font-color);
	text-decoration: none;
	padding: 0.5rem;
	display: block;
	height: 100%;
}

.news-list li a:hover {
	background-color: var(--bg-color);
}

.news-list li a span {
	display: block;
	font-size: 0.7em;
	margin-bottom: 0.3em;
}

@media (orientation: portrait) { 
	.news-list {
		flex-direction: column;
	}
	
	.news-list li {
		flex: 1 1 100%;
	}
}


/** gallery ###################################################### **/

.image-gallery > p {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1rem;
}

.image-gallery img {
	width: calc(50% - 1rem);
	flex: 1 1 calc(50% - 1rem);
}

@media (orientation: portrait) { 
	.image-gallery img {
		width: 100%;
		flex: 1 1 100%;
	}
}

/** cursor ######################################################**/

/* Default cursor */
body,
body *,
* {
  cursor: url("/img/cursor-default.svg") 2 0, auto;
	opacity: 1;
}

/* Hover cursor */
body a,
body a *,
body button,
body button *,
body input[type="submit"],
body input[type="submit"] *,
body input[type="button"],
body input[type="button"] *
{
  cursor: url("/img/cursor-pointer.svg") 12 0, pointer;
}

/* Text cursor */
body p,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body input[type="text"],
body input[type="email"],
body textarea {
  cursor: url("/img/cursor-text.svg") 9 19, text;
}

/** news page ###################################################### **/

.news-page-article {
	margin-top: 2rem;
	margin-bottom: 2rem;
	padding: 1rem;
	border: 1px solid var(--hl-color);
}
.news-page-article h3 {
	margin-top: 0.5rem;
}

.news-page-article:nth-child(even) {
	margin-left: 5rem;
}

.news-page-article:nth-child(odd) {
	margin-right: 5rem;
}

@media (orientation: portrait) { 

	.news-page-article {
		margin-top: 1rem;
		margin-bottom: 0;
	}

	.news-page-article:nth-child(even) {
		margin-left: 0;
	}

	.news-page-article:nth-child(odd) {
		margin-right: 0;
	}
}

/** members page ###################################################### **/

.members-list {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.members-list > * {
	flex: 1 1 calc(33.333% - 1rem);
}

.members-list__member {
	border: 1px solid var(--bg-color);
	display: flex;
	flex-direction: column;
}

.member_logo_wrapper {
	background-color: #fff;
	aspect-ratio: 1 / 1;
	padding: 1rem;
}

.member_logo_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.member__title {
	display: block;
	text-align: center;
	font-weight: bold;
	padding: .5rem;
	border-top: 1px solid var(--bg-color);
	border-bottom: 1px solid var(--bg-color);
}

.member_space {
	flex-grow: 1;
}

.member_address, .member_email, .member_phone, .member_matrix, .member_mastodon {
	font-size: 0.8em;
	display: block;
	padding: 0.1rem .5rem;
	word-break: break-word;
	display: flex;
}

.member_website {
	display: block;
	padding: 0.5rem;
	text-align: center;
	background-color: var(--hl-color);
	color: var(--menu-font-color);
}

.member__icon {
	margin-right: 0.5rem;
	width: 1em;
	vertical-align: middle;
	fill: currentColor;
	background-size: contain;
	background-repeat: no-repeat;
	flex: 0 0 1em;
} 

.member__icon__house {
	background-image: url(/img/icons/house.svg);
}

.member__icon__phone {
	background-image: url(/img/icons/phone.svg);
}

.member__icon__email {
	background-image: url(/img/icons/email.svg);
}

.member__icon__matrix {
	background-image: url(/img/icons/matrix.svg);
}

.member__icon__mastodon {
	background-image: url(/img/icons/mastodon.svg);
}

@media (orientation: portrait) { 
	.members-list > * {
		flex: 1 1 calc(50% - 1rem);
	}
}

@media (max-aspect-ratio: 5/8) {
	.members-list > * {
		flex: 1 1 100%;
	}
}

/** projects #################################################### **/

.project-page-article {
	margin-top: 2rem;
	margin-bottom: 2rem;
	padding: 1rem;
	border: 1px solid var(--hl-color);
}

/** projects - assets ########################################## **/

.assets__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

.assets__item {
	flex: 1 1 calc(33.333% - 1rem);
	border: 1px solid var(--hl-color);
	padding: 0.5rem;
	display: flex;
	gap: 0.5rem;
	flex-direction: column;
}

.assets__item img {
	max-width: 100%;
	height: auto;
	margin-bottom: 0.5rem;
}

.assets__item a {
	display: block;
	padding: 0.5rem;
	text-align: center;
	background-color: var(--hl-color);
	color: var(--menu-font-color);
}

.assets__item__space {
	flex-grow: 1;
}

@media (orientation: portrait) { 
	.assets__item {
		flex: 1 1 calc(50% - 1rem);
	}
}

/** other ###################################################### **/


pong-game, poly-play-game {
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}

.subline {
	font-size: 0.7em;
	text-align: end;
	margin-top: 1rem;
}