@font-face {
	font-family: 'main font';
	src: url('./fonts/CreatoDisplay-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@charset "utf-8";

:root {
	background-color: var(--main-bg-color);
	--main-font: monospace, sans-serif;
}


/* html types */

h1 {
	font-family: var(--main-font);
	color: var(--nav-title-color);
	font-size: calc(var(--font-multiplier) * 2rem);
	font-weight: bold;
	text-decoration: none;
}

h2 {
	font-family: var(--main-font);
	color: var(--nav-title-color);
	font-size: calc(var(--font-multiplier) * 1.5rem);
	font-weight: bold;
	font-style: italic;
	padding:0px 0px 0px 0px;
}

.content > h2::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: var(--main-text-color);
}

h3 {
	font-family: var(--main-font);
	color: var(--main-text-color);
	font-size: calc(var(--font-multiplier) * .8rem);
	font-weight: normal;
	font-style: italic;
}
h4 {
	font-family: var(--main-font);
	color: var(--hover-color);
	font-size: calc(var(--font-multiplier) * .6rem);
	font-weight: regular;
}
p, ul {
	font-family: var(--main-font);
	color: var(--main-text-color);
	font-size: calc(var(--font-multiplier) * 1.2rem);
	line-height: calc(var(--font-multiplier) * 1.7rem);
	font-weight: normal;
	padding:0px 0px 0px 0px;
	margin: 0 0 0 0;
	overflow-wrap: break-word;
}

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

ul {
	list-style: none;
}

span {
	font-family: var(--main-font);
	color: var(--main-text-color);
	font-size: calc(var(--font-multiplier) * 1.4rem);
	font-weight: normal;
	padding:0px 0px 0px 0px;
}

li {
	font-family: var(--main-font);
	color: var(--main-text-color);
	font-size: calc(var(--font-multiplier) * 1.2rem);
	font-weight: normal;
	padding:0px 0px 15px 20px;
	text-wrap: wrap;
	line-height: calc(var(--font-multiplier) * 1.5rem);
}

li a {
	font-size: calc(var(--font-multiplier) * 1.2rem);
}

table {
	border-collapse: collapse;
}

td {
	border: 1px solid var(--main-text-color); /* Blue border for all cell sides */
	padding: 8px;
	text-align: left;
	color: var(--main-text-color);
	font-family: var(--main-font);
	font-size: calc(var(--font-multiplier) * 1.2rem);
	line-height: calc(var(--font-multiplier) * 1.5rem);
}

button {
	cursor: pointer;
	padding: 2px 15px;
	margin-left: 10px;
}
hr {
	border: 0;
	height: 1px;
	background: var(--main-text-color);
	background-image: linear-gradient(to right,  var(--main-bg-color), var(--main-text-color), var(--main-bg-color));
}

img {
	max-width: 100%;
	margin: 0 auto;
}
.content img {
	/*cursor: zoom-in;*/
}
figcaption {
	font-family: var(--main-font);
	color: var(--main-text-color);
	font-size: calc(var(--font-multiplier) * 0.9rem);
	padding:0px 0px 0px 0px;
}

.heading-wrapper {
	cursor: pointer;
}

.content > p + img,
.content > .heading-wrapper + img,
.content > h1 + img,
.content > h2 + img,
.content > h3 + img {
	padding: 0 0 5vh 0;
}

.content > .video + h1, .content > .video + .heading-wrapper {
	margin-top: 25vh;
}

.content img + p {
	grid-area: span 1 / span 1;
	padding: 0 0 5vh 0;
	font-style: italic;
}

.video {
	width: 100%;
	height: 60vh;
	grid-area: span 1 / span 2;
}

.content .video + p {
	grid-area: span 1 / span 2;
}

.content iframe {
	grid-column: 1 / -1;
}


.inclusive-sans-<uniquifier> {
					 font-family: "Inclusive Sans", sans-serif;
					 font-optical-sizing: auto;
					 font-weight: <weight>;
					 font-style: normal;
				 }
/* body */

.logo-banner	{
	
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(auto-fill, 1fr);
	padding: 4vh 3vw 4vh 3vw;
	grid-row-gap: 5vh;
	grid-column-gap: 3vw;
	justify-items: center;
}

.left-pane {
	grid-area: span 1 / span 1;
	font-size: calc(var(--font-multiplier) * 1.2rem);
}

.left-pane li {
	list-style-type: none;
	line-height: calc(var(--font-multiplier) * 1.8rem);
	font-size: calc(var(--font-multiplier) * 1.1rem);
}

.left-pane li::before {
	content: none;
	margin-right: 0.5em;
}

.left-pane li > a {
	text-decoration: none;
	color: var(--button-color);
}

.left-pane li > a:hover {
	color: var(--hover-color);
	background-color: var(--tag-color);
}
.left-pane > h2 {
	padding: 2vh 0 2vh 0;
}


.vertical-centre {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.centered {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.image {
	grid-area: span 1 / span 4;
	height: 60vh;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: all 0.2s ease-in-out;
}
video {
	grid-column: span 4;
	width: 85%;
	transition: all 0.2s ease-in-out;
	outline-color: #212529;
	outline-width: 3px 3px 1px 5px;
	outline-style: solid;
	border-radius: 5px;
}
/*
.splash-grid-container {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(15%, 1fr) );
	grid-template-rows: auto auto auto;
	grid-auto-rows: auto;
	border-bottom: 20px solid var(--main-bg-color);
	place-items: stretch stretch;
	grid-row-gap: 0vh;
	column-gap: 0vw;
	box-sizing: border-box;

	grid-template-areas:
		"title nav nav nav nav nav nav"
	    "note2 note2 map map map media media"
		"note2 note2 map map map transcript transcript"
		"note4 note4 note4 note4 note4 note4 note4";
	
}
*/
#svg-animation {
	grid-area: span 2 / span 4;
	width: 100%;
	height: 50vh;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	overflow: hidden;
	border: 1px solid black;
}

#svg-animation svg {
	width: 100%;
	height: 100%;
}

#svg-animation > :nth-child(1) {
	grid-area: span 2 / span 1;
	background-color: var(--button-color);
	background-image: url('/imgs/Screenshot 2023-04-27 010137.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: 1.5s;
	padding: 0;
}
#svg-animation > :nth-child(2) {
	grid-area: span 1 / span 1;
	background-color: black;
	min-height: 20vh;
}

#svg-animation > :nth-child(3) {
	grid-area: span 1 / span 1;
	background-color: white;
	padding: 2vh;
}

#map-container {
	width: 100%;
	height: 70vh;
	grid-column: span 8;
	margin: 0vh 0 0vh 0;
}

.note1 h2 {
	font-size: calc(var(--font-multiplier) * 1.2em);
	font-style: italic;
}

.splash-grid-container > div:nth-child(3) {
	grid-area: transcript;
	font-size: calc(var(--font-multiplier) * 1.2em);
}

p {
	border-left: 2px;
	border-color: var(--hover-bg-color);
}

.content {
	grid-column: 1 / -1;
	scroll-behavior: smooth;
	display: grid;
	grid-template-columns: repeat(2, minmax(25vw, min-content));
	grid-row-gap: var(--content-gap);
	column-gap: 3vw;
	/**/
	border-width: 1px;
	border-radius: 5px;
	border-style: dashed;
	border-color: var(--hover-bg-color);
	/*outline-style: solid;*/
	padding: 2vw 2vw 2vw 2vw;
	margin: auto;
	outline-color: var(--hover-bg-color);
}

.content a {
	color: var(--content-link-color);
}


.posts-overview-container {
	grid-column: 1 / -1;
	scroll-behavior: smooth;
	display: grid;
	grid-row-gap: 5vh;
}

.posts-overview-container > .content {
	cursor: pointer;
}

#gallery-content {
	grid-area: span 2 / span 8;
	scroll-behavior: smooth;
	display: grid;
	grid-template-columns: repeat( 8, 1fr );
	grid-row-gap: 10vh;
	column-gap: 3vw;
	/*padding: 3vw;*/
}

#gallery-content p, #gallery-content h1 {
	grid-column: span 6;
	background: var(--main-bg-color);
}
#gallery-content h1 {
	text-align: center;
	font-size: calc(var(--font-multiplier) * 2.3rem);
}


#landing-content {
	grid-column: span 8;
	grid-template-columns: repeat(auto-fill, minmax(25vw, max-content));
}

.content > .heading-wrapper,
.content > h1,
.content > h2,
.content > h3 {
	grid-area: span 1 / span 2;
}

.content > .heading-wrapper + p,
.content > h1 + p,
.content > h2 + p,
.content > h3 + p,
.content > ul {
	grid-area: span 1 / span 2;
}

.content > ul {
	list-style-type: "❇ ";
	list-style-position: inside;
}

.content > p + p {
	grid-area: span 1 / span 2;
}

.content > p + .heading-wrapper,
.content > p + h1,
.content > p + h2,
.content > p + h3 {
	margin: 0 0 0 0;
}

/* header */

.title {
	grid-area: span 8 / span 1;
	text-align: center;
}

header img {
	width: calc(var(--font-multiplier) * 75%);
	max-width: 400px;
}

header {
	font-family: var(--main-font);
	color: var(--nav-title-color);
	calc(var(--font-multiplier) * 2.4rem)
	font-weight: bold;
	font-size: calc(var(--font-multiplier) * 1.5em);
	margin: 0px 0px 0px 0px;
	text-decoration: none;
}
header a {
	text-decoration: none;
	font-weight: bold;
	color: var(--nav-title-color);
	font-size: calc(var(--font-multiplier) * 9																																																																																																																																																																																																																																																rem);
}

/* nav-items */

.nav-items {
	grid-area: span 1 / span 8;
	display: inline-grid;
	grid-template-columns: repeat( 8, 1fr );
	/*grid-auto-rows: auto;*/
	place-items: stretch stretch;
	grid-column-gap: 1vw;
	box-sizing: border-box;
	width: 100%;
	/*height: 15vh;*/
	padding: 1vh 1vw 1vh 0;
	line-height: calc(var(--font-multiplier) * 6vh);
	align-items: center;
	direction: ltr;
	/* transition: display 0.2s ease-in-out; */
}

.nav-items > div, .nav-items + .lang-selector {
	grid-area: span 1 / span 1;
	display: flex;
	/*flex-direction: column;*/
	justify-content: center;
	align-items: center;
	height: 3vh;
	padding: 2vh 0 2vh 0;
	text-align: center;
	text-decoration: none;
	font-family: var(--main-font);
	font-style: normal;
	color: var(--button-color);
	font-size: calc(var(--font-multiplier) * 1.2rem);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/* direction: ltr; */
}

.nav-items + .lang-selector {
	grid-area: span 1 / span 1;
	padding: 1vh 1vw 1vh 1vw;
	height: 8vh;
}

.nav-items svg {
	fill: var(--button-color);
	cursor: pointer;
}
/*
#open {
	display: none;
	flex-direction: column;
	height: calc(var(--font-multiplier) * 2rem);
}

#close {
	position: absolute;
	flex-direction: column;
	height: calc(var(--font-multiplier) * 19rem);
}
*/
#light {
	position: absolute;
	flex-direction: column;
	height: calc(var(--font-multiplier) * 19rem);
}


/* Base styling */
.icon svg {
	fill: var(--button-color);
	transition: fill 0.1s ease;
}

.nav-items.activated #light svg {
	fill: var(--active-color);
}

.nav-items:not(.activated) #light svg {
	fill: var(--inactive-color);
}




.nav-items > a {
	font-size: calc(var(--font-multiplier) * 1.1rem);
	color: var(--button-color);
	text-transform: uppercase;
	border-radius: 5px;
	border: 1px dashed var(--no-color);
}

.nav-items > a, .nav-items > .lang-selector a[href] {
	grid-area: span 1 / span 1;
	text-align: center;
	text-decoration: none;
	font-family: var(--main-font);
	line-height: 7vh;
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all 0.0s ease-in-out;
	direction: ltr;
	text-decoration: none;
}

.nav-items > .lang-selector a[href] {
	line-height: 4vh;
}

 .nav-items > .lang-selector a[href]:hover {
	 text-decoration: underline;
 }

.lang-selector {
	height: 4vh;
}

.lang-selector a {
	padding: .4vh .4vw .4vh .4vw;
}

footer .lang-selector a {
	line-height: 4vh;
}

.nav-items > a[href]:hover {
	/* background-color: var(--hover-bg-color); */
	color:  var(--hover-color);
	/*outline: .5px dash var(--hover-color);*/
	/*border-radius: calc(var(--font-multiplier) * 1.2rem);*/
	border: dashed 1px var(--hover-bg-color);
	box-sizing: border-box;
	border-radius: calc(var(--font-multiplier) * .4rem);
	transition: all 0.1s ease-out;
}

.nav-item svg {
	height: calc(var(--font-multiplier) * 1.2rem);
	width: calc(var(--font-multiplier) * 1.2rem);
	margin-bottom: calc(var(--font-multiplier) * -.30rem);
}

footer ul svg {
	height: calc(var(--font-multiplier) * 1rem);
	width: calc(var(--font-multiplier) * 1rem);
	margin-bottom: calc(var(--font-multiplier) * -.1rem);
}

.inline-grid {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	place-items: stretch stretch;
	grid-row-gap: 0vh;
	grid-column-gap: 0vw;
	padding: 4vh 0 4vh 0;
	box-sizing: border-box;
	place-items: center;
}



/* marquee */
/*
.fadeout-horizontal {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 5rem,
    black calc(100% - 5rem),
    transparent
  );
}

.marquee-wrapper {
	padding: 0 1px;
	width: 100%;
	color: white;
	font-size: 2rem;
}
*/
.marquee-detached {
  grid-column: 1 / -1;
  width: 100%;
}

.marquee-text {
  overflow: clip;
}

.marquee-text-track {
  display: flex;
  gap: 4.8rem;
  width: max-content;
  animation: marquee-move-text var(--speed, 40s) linear infinite
    var(--direction, forwards);
}

.marquee-text-track > p {
  font-size: calc(var(--font-multiplier) * 2rem);
  line-height: calc(var(--font-multiplier) * 2rem);
}

.marquee-text-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-move-text {
  to {
    transform: translateX(-50%);
  }
}


/* footer */


footer {
	background-color: var(--hover-color);
	display: grid;
	place-items: stretch stretch;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(auto-fill, 1fr);
	margin-top: 10vh;
	padding: 2vh 2vw 2vh 2vw;
}

footer.grid-container {
	grid-row-gap: 1vh;
	padding-top: 6vh;
}

footer ul {
	display: grid;
  	grid-template-rows: repeat(5, min-content);
  	grid-auto-flow: column;
	grid-template-columns: repeat(8, 1fr);
	padding-bottom: 3vh;
}

footer ul li {
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 0;
	display: block;
	height: 2.2rem;
	overflow-wrap: break-word;
	text-align: left;
	text-wrap: nowrap;
	text-overflow: ellipsis;
}

footer .lang-selector {
	margin: 0;
	padding: 0 0 2vh 0;
}

footer li::before {
	content: none;
	margin-right: 0.5em;
}

footer li a {
	font-family: var(--main-font);
	font-size: calc(var(--font-multiplier) * 1.3rem);
	color: var(--link-color);
	text-decoration: none;
}

footer li a.index-items {
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: inline-block;
	width: 20vw;
}

footer a[href]:hover {
	/* background-color: var(--hover-bg-color); */
	text-decoration: underline;
}

footer h2 {
	font-family: var(--main-font);
	font-size: calc(var(--font-multiplier) * 1rem);
	color: var(--link-color);
	text-decoration: none;
	filter: invert(.4);
}

footer p {
	font-size: calc(var(--font-multiplier) * .8rem);
	line-height: calc(var(--font-multiplier) * 1.1rem);
	filter: invert(.6);
	padding:0px 0px 0px 0px;
}

footer > .index {
	grid-area: span 1 / span 8;
}

footer > .brands {
	grid-area: span 1 / span 6;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(25%, 1fr) );
}

.brands > div {
	display: flex;
}
.brands > div > img {
	width: 80%;
	margin: auto;
	filter: grayscale(1) invert(.5);
}

/* tile-gallery */

.tile-gallery {
	display: grid;
	grid-column: 1 / -1;
	/*grid-template-columns: repeat(3, 1fr);*/
	grid-gap: 4vw;
	grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(200px, 1fr);
	margin: 2vw;
}

.tile-gallery > a {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	outline-style: solid;
	outline-color: var(--nav-title-color);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.tile-gallery > a > div {
	/*border-radius: 8px;*/
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: all 0.2s ease-in-out;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.tile-gallery > a > div > div {
	opacity: 1; /* was 0, now always visible */
	transition: all 0.2s ease-in-out;
	overflow: hidden;
	/*background-color: var(--main-bg-color);*/
	position: relative;
	height: 100%;
	padding: 2vh 5vw 0 5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tile-gallery > a > div > div > p {
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 50; /* Number of lines to show */
	-webkit-box-orient: vertical;
	font-size: calc(var(--font-multiplier) * 1.3rem);
	line-height: 1.3;
}

.content p:first-child {
	grid-column: span 2;
}

.content p {
	grid-column: span 2;
}

/* posts */

.content .date {
	font-family: 'Courier New', Courier, monospace, sans-serif;
	font-size: 1rem;
	justify-content: left;
	display: inherit;
	padding-top: 2vh;
}

.post-content {
	border-radius: 0 0 0 0;
	border-width: 2px 2px 2px 12px;
	border-style: solid solid dashed solid;
	border-color: var(--caption-color);
	padding: var(--content-gap);
	max-height: 40vh;
	overflow-wrap: break-word;
	overflow-y: hidden;
	text-decoration: none;
}

/*
#splash-item4  {
	grid-column: 3 / span 1;
	grid-row: 1 / span 2;
	padding: 15px;
	background-image: url('cover_1.jpg');
	background-position: center;
	width: 100%;
	border-radius: 10px;
}
*/

/** Mobile CSS **/

@media all and (max-width: 1200px) {
	.tile-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media all and (max-width: 1000px) {
	video {
		grid-column: 1 / -1;
	}
	body {
		--font-multiplier: 1.5;
	}
	.grid-container {
		grid-row-gap: calc(var(--font-multiplier) * 2rem);
	}
	.grid-container div {
		grid-column: 1 / -1
	}
	.content div, .content .heading-wrapper, .content h1, .content h2, .content h3, .content p, .content iframe {
		grid-column: 1 / -1;
		overflow-x: hidden;
	}
	.content .heading-wrapper + p, .content h1 + p, .content h2 + p, .content h3 + p {
		grid-column: 1 / -1;
	}
	.content p + p {
		grid-column: 1 / -1;
	}
	.content img + p {
		grid-column: 1 / -1;
	}
	.content .video + p {
		grid-column: 1 / -1;
	}
	img {
		grid-column: 1 / -1;
	}
	.left-pane {
		display: none;
	}

	#landing-content {
		grid-column: 1 / -1;
	}
	.content p:first-child {
		grid-column: 1 / -1;
	}
	footer > .index {
		text-align: center;
		padding: calc(var(--font-multiplier) * 2rem) 0 0 0;
		line-height: calc(var(--font-multiplier) * 2rem);
	}
	footer > .brands {
		grid-template-columns: 1fr;
		grid-column: 2 / -2;
		padding: 0;
	}
	footer > .brands > div {
		margin: 2vh 0 2vh 0;
	}
	footer ul {
		padding-bottom: calc(var(--font-multiplier) * 2rem);
		grid-template-columns: 1fr;
		grid-template-rows: repeat(20, min-content);
	}
	footer ul li {
		margin-bottom: 1rem;
        height: auto;
		text-align: center;
		width: auto;
		height: 3rem;
	}
	footer li a.index-items {
		width: 80vw;
	}
	footer {
		margin-top: calc(var(--font-multiplier) * 2rem);
	}
	.nav-items > a, .nav-items > div {
		grid-column: 1 / -1;
		padding: 2vh 0 2vh 0;
	}
	.tile-gallery {
		grid-template-columns: repeat(1, 1fr);
	}
	video {
		width: 100%;
	}
	.content > .heading-wrapper,
	.content > h1,
	.content > h2,
	.content > h3 {
		text-align: center;
	}
	p, ul {
		font-size: calc(var(--font-multiplier) * 1rem);
		line-height: calc(var(--font-multiplier) * 1.4rem);
	}
	.content {
		grid-template-columns: repeat(3, minmax(25vw, min-content));
		padding: 6vw 2vw 5vw 2vw;
		grid-row-gap: calc(var(--content-gap)*5);
	}
	.content li {
		font-size: calc(var(--font-multiplier) * 1rem);
		line-height: calc(var(--font-multiplier) * 1.4rem);
	}
	.content > .heading-wrapper + p, .content > h1 + p, .content > h2 + p, .content > h3 + p, .content > ul {
		grid-area: span 1 / span 3;
	}
	.content .date {
		padding-top: 2vh;
	}
}
@media only screen and (max-device-width: 360px) and (max-device-height: 760px) {
	body {
		--font-multiplier: 1;
	}
}


/* scratch */

.gallery {
	height: 50vh;
	overlow-x: auto;
	overflow-y: hidden;
	z-index: 1000;
	white-space: nowrap;
}

.gallery > div {
	width: 60vw;
	height: 100%;
	display: inline-block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.gallery > div > div {
	position: relative;
	width: 30%;
	height: 50%;
}

.gallery h2 {
	color: var(--main-font-color);
	font-family: var(--main-font);
	font-size: calc(var(--font-multiplier) * 2em);
	text-align: center;
	position: relative;
	top: 10%;
	left: 2%;
}

.gallery p {
	position: relative;
	top: 15%;
	left: 2%;
	white-space: normal;
}

.pitches {
	font-family: 'Josefin Sans', sans-serif;
	color: var(--nav-title-color);
	font-size: calc(var(--font-multiplier) * 2.5em);
	margin: 1vh;
	text-align: center;
}


#cover1 {
	height: 75vh;
}