@font-face {
font-family: 'InterBold';
src: url("Inter-Bold.ttf") format("truetype");
}

@font-face {
font-family: 'InterMed';
src: url("Inter-Medium.ttf") format("truetype");
}

@font-face {
font-family: 'InterReg';
src: url("Inter-Regular.ttf") format("truetype");
}

@font-face {
font-family: 'InterLight';
src: url("Inter-Light.ttf") format("truetype");
}

@font-face {
font-family: 'InterThin';
src: url("Inter-Thin.ttf") format("truetype");
}

:root {
	--w: 80%;
	--body: 16px/24px InterLight;
	--bodysp: 18px/28px InterMed;
	--header: 16px/24px InterMed;
	--caption: 14px/16px InterLight;
	--slidew: 400px;
}


@media only screen and (max-width: 1024px) {
	:root {
		--w: 95%;
	}
	
	.header .bodycopy {
		font: 28px/40px InterMed;
	}
	
	.header-links {
		display: none;
	}
	.intro {
		margin: 0px 0 100px;
        margin-bottom: 100px;
	}
	
	.intro .intro-grid {
		display: block;
	}
		
	.intro-grid .para {
		margin-bottom: 100px;
        
    
    }
	
	.map {
		margin: 100px 0;
	}
	
	.map .map-grid {
		display: block;	
	}
	
	.map .map-embed {
		height: 400px;
	}
	
	.map .para {
		margin-bottom: 100px;
	}
	
	.workshop .w-grid {
		display: block;
	}
	
	.w-grid .tools {
		margin-bottom: 100px;
	}
	
	.project-grid .project {
		display: block;
	}
	.project .para {
		margin-bottom: 50px;
        margin-top: 150px;
	}
	.exhibition .exhibition-grid {
		display: block;
	}
	.exhibition-grid .para {
		margin-bottom: 50px;
	}
	.about .about-grid {
		display: block;
	}
	.about-grid .para {
		margin-bottom: 50px;
	}
}

@media only screen and (max-width: 1280px) {
	:root {
		--w: 90%;
		--body: 14px/20px InterLight;
		--bodysp: 16px/24px InterMed;
		--caption: 12px/15px InterLight
	}
	
	.intro {
		margin: 0px 0 100px;
	}
	
	.intro .intro-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 10%;
		grid-row-gap: 30%;
	}
	
	.map {
		margin: 100px 0;
	}
	
	.map .map-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 3%;
		grid-row-gap: 10%;
	}
	
	.workshop {
		margin: 100px 0;
		display: block;
	}
	.exhibition .exhibition-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 3%;
		grid-row-gap: 10%;
	}
	.exhibition .yt-video {
	height: 400px;
	}
	.about {
		margin: 100px 0 50px;
	}
}

html, body {
	/*height: 100%;*/
	margin: 0;
}

.x0, .y0, .z0 {
	display: inline;
}

.x1, .y1, .z1 {
	display: inline;
	text-decoration: underline;
}

.header {
/*    position: fixed;*/
    width: 100%;
	margin-left: auto;
	margin-right: auto;
    margin-bottom: 10vh;
	height: 100vh;
	overflow: hidden;
    color: white;
}

.bodycopy {
	/*transition: transform 0.9s cubic-bezier(.50, .08, 0, .99);*/
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	transform: translate(-50%, -50%);
	font: 35px/50px InterMed;
}

.header-description {
    position: fixed;
	width: 100%;
	overflow: hidden;
}

.header-logo {
    margin: 15px;
  float: left;
}


.header-description h2 {
	color: white;
    font-family: InterReg;
	font-size: 18px;
    
	/*margin: 0px;*/
}

.header-links {
	float: right;
}

.header-description a {
	float: left;
	color: black;
	text-align: center;
	text-decoration: none;
	font: var(--body);
	padding: 12px;
}

.header-description a:hover {
	text-decoration: underline;
}

.header-description span {
	font: 16px/20px InterReg;
}


/*ABOUT SECTION*/

.intro {
	width: var(--w);
	margin-left: auto;
	margin-right: auto;
}

.intro-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 3%;
	height: 100%;
}

.para p {
    margin-top: 0px;
	font: var(--body);
    font-size: 10pt;
}

.para pp {
	font: var(--body);
    font-size: 10pt;
    margin-right: 100px;
}

.para p span {
	font: var(--bodysp);
}

.slide-image {
margin-left: 200px;
	grid-column-start: 2;
	grid-column-end: 3;
    float: right;
}

.image-center {
    margin: 30px;
    
    
}

.caption {
	font: var(--caption);
	float: right;
}

.intro .para {
	grid-column-start: 1;
	grid-column-end: 2;
}

.intro .slide-image {
	width: 130%;
}

.para a {
	text-decoration: underline;
	color: black;
}

.para a:hover {
	text-decoration: underline;
	background: black;
	color: white;
}


/*MAP SECTION*/

.map {
	width: var(--w);
	margin: 200px 0;
	margin-left: auto;
	margin-right: auto;
}

.map-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 6%;
	height: 100%;
}

.map-embed {
	width: 100%;
	grid-column-start: 2;
	grid-column-end: 4;
}


/*WORKSHOP SECTION*/


.workshop {
	width: var(--w);
	margin: 200px 0;
	margin-left: auto;
	margin-right: auto;
	}
	
	.w-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 15%;
}


.workshop-grid {
	margin-top: 50px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 3%;
	grid-row-gap: 10%;
	width: 100%;
	height: 100%;
}

.tools p span {
	font: var(--bodysp));
}

.workshop p span {
	font: var(--bodysp);
}

.workshop h2 {
	font: 16px/40px InterBold;
	margin: 0;
	padding: 0;
}

.workshop p {
	font: var(--body);
	margin: 0;
}


/*EMOJI*/
.workshop h2 span {
	font: 30px/40px InterReg;
	margin: 0;
	padding: 0;
}

/*PROJECT SECTION*/

.project-section {
	margin: 200px 0;
	width: var(--w);
	margin-left: auto;
	margin-right: auto;
}


.project-section h2 {
	margin-top: 100px;
	font: var(--bodysp);
}


.project {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 3%;
	margin-bottom: 100px;
}

.project .slides {
	width: 100%;
	height: 100%;
}

/*EXHIBTION*/
.exhibition {
	margin: 200px 0;
	width: var(--w);
	margin-left: auto;
	margin-right: auto;
}
.exhibition-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 3%;
}
.exhibition-grid .para {
	grid-column-start: 1;
	grid-column-end: 2;
}
.exhibition-grid .yt-video {
		grid-column-start: 1;
	grid-column-end: 5;
}
.yt-video {
	height: 500px;
}

.exhibition p  {
	font: var(--body);
}
.exhibition a {
	color: black;
}

.exhibition p span {
	font: var(--bodysp);
}

.final-presentation {
	/*height: 570px;*/
	grid-column-start: 1;
	grid-column-end: 4;
}


/*ABOUT SECTION*/
.about {
	margin: 150px auto 100px;
	width: var(--w);
}
.about p span {
	font: var(--bodysp);
}
.about-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 3%;
}


text {
    color: black;
    font-family: 'Caladea';
    font-size: 12px;
    line-height: 16px;
    padding-right: 0px;
    background: white;
}


a.text{
    color: black;
    font-family: 'Caladea';
    font-size: 12px;
    line-height: 16px;
    padding-right: 0px;
    background: white;

    
}
a:visited {
    color: black;
}
a:link {
    color: black;
}

a:hover {
    color: white;
    background: black;
}

.botCenter {
    position: fixed;
    text-align: center;
    bottom: 3vh;
    transform: translate(-50%);
    left: 50%;
    width: 400px;

}

.Center {
    position: relative;
    margin-top: 10vh;
    text-align: center;
    bottom: 3vh;
    transform: translate(-50%);
    left: 50%;
    width: 400px;

}


/*P5.js*/
canvas {
  display: block;
}