/* Typography */
html {
	font-family: brother-xs;
	font-weight: 300;
	font-size: 18px;
	color: #1a1a1a;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
}

h1 {
	font-size: 5em;
	display: none;
}

h2 {
	font-size: 2em;
	text-transform: uppercase;
	font-family: brother-xl;
	font-weight: 800;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1.1em;
}

h5 {
	font-size: 1em;
}

a {
	text-decoration: none;
	color: inherit;
	font-weight: 500;
	cursor: pointer;
}

b, strong {
	font-weight: 500;
}

i, em {
	font-style: italic;
}


/* Site Layout */
body, html {
	height: 100%;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

#wrapper, .scroll-content {
	height: 100%;
	display: flex;
	flex-direction: row;
}

.scroll-content {
	position: relative;
	background:
        linear-gradient(orange, rgba(255,255,255,.35)),
        linear-gradient(to top left, red, transparent),
        linear-gradient(to top right, blue, transparent);
    background-blend-mode: screen;
}

#background {
	height: 100vh;
	width: 100vw;
	background:
        linear-gradient(orange, rgba(255,255,255,.35)),
        linear-gradient(to top left, red, transparent),
        linear-gradient(to top right, blue, transparent);
    background-blend-mode: screen;
}

.scroll-content::after {
	content: '';
	display:block;
	position:absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40%;
}

.horizontal section, .horizontal section#title-section {
	vertical-align: top;
	height: 100%;
}

nav {
	position: fixed;
	left: 0;
	bottom: 30px;
	z-index: 999;
	color: #1a1a1a;
	letter-spacing: 1px;
	font-size: 1.1em;
	font-weight: 300;
	display: flex;
	flex-direction: row;
	width: 100%;
}

nav img {
	width: 20px;
}

#openNav {
	position: relative;
	z-index: 998;
	margin-left: 50px;
	flex-shrink: 0;;
	height: 60px;
	width: 60px;
	background-color:rgba(255, 255, 255, 0.4);
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .3s ease;
	box-shadow:
	0px 0px 2.2px rgba(255, 255, 255, 0.4),
	0px 0px 5.3px rgba(255, 255, 255, 0.45),
	0px 0px 10px rgba(255, 255, 255, 0.55),
	0px 0px 17.9px rgba(255, 255, 255, 0.65),
	0px 0px 33.4px rgba(255, 255, 255, 0.75),
	0px 0px 80px rgba(255, 255, 255, .8);
	text-transform: uppercase;
	font-size: .75em;
}

#openNav:hover {
	background-color:rgba(255, 255, 255, .8);
	box-shadow:
	0px 0px 15px 10px rgba(255, 255, 255, 0.6),
	0px 0px 25px 10px rgba(255, 255, 255, 0.65),
	0px 0px 50px 10px rgba(255, 255, 255, 0.75),
	0px 0px 80px 10px rgba(255, 255, 255, 0.85),
	0px 0px 100px 10px rgba(255, 255, 255, 0.95),
	0px 0px 200px 10px rgba(255, 255, 255, .1)
  ;
}

#nav {
	transition: all .4s ease-out;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	overflow: hidden;
	list-style: none;
	position: relative;
	transform:scaleX(0);
	transform-origin: left;
	z-index: 997;
	padding: 0;
	margin-left: 25px;
	width: 100%;
}

#nav a {
	color: #1a1a1a;
	text-decoration: none;
	transition: all .4s ease;
	font-weight: 300;
	margin-right: 15px;
}

#nav a:hover {
	color: #fff;
}

#nav img:hover {
	fill: #fff;
}

section {
	position: relative;
	margin: 0;
}

/* Title Section & Credits */
#title-section {
	width: 80vw;
	height: 100%;
}

#credits {
	width: 50vw;
	display: flex;
	align-items: center;
}

#credits .description {
	width: 75%;
	position: relative;
	top: -50px;
}

#title-section h1, #title-section h2, #title-section img, #title-section p {
	position: absolute;
	right: 0;
	width: 80%;
	text-align: center;
}

#title-section h2 {
	top: 25%;
	font-family: brother-xl;
	font-weight: 800;
	font-size: 1.85vw;
}


#text-horizon text {
	font-size: 11vw;
	font-family: brother-xl;
	font-weight: 800;
	overflow: visible;
}

.cls-2 {
	font-size: 11vw;
	font-family: Enchanted;
	fill: white;
} 

#title-section img, #credits img {
	top: 38.85%;
	pointer-events: none;
	z-index: 0;
}

#title-section p  {
	bottom: 20%;
	font-size: 1.4em;
	text-align: right;
	z-index: 999;
	line-height: 1.25;
}

#title-section svg {
	pointer-events: none;
}

svg {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: visible;
}

@media only screen and (max-width: 1500px) {
	.mask-rect {
		height: 2.75%;
		transform: translateY(.6%);
	}

	#text-horizon text {
		transform: translateY(-1.15%);
	}

  }

@media only screen and (max-width: 1200px) {
	.mask-rect {
	
	}

  }

  @media only screen and (max-width: 1025px) {
	.mask-rect {
		height: 1.35%;
	}

	#text-horizon text {
		transform: translate(0px, -44px);
	}

	#text-insight {
		transform: translateY(-105px);
	}

	nav {
		flex-direction: column-reverse;
	}

	#nav {
		flex-direction: column;
		margin-left: 60px;
	}

	#title-section h2 {
		top: 35%;
	}

	#title-section p  {
		bottom: 30%;
	}

	#credits {
		width: 80vw;
	}
	
  }

  @media only screen and (max-width: 800px) {
	.mask-rect {
		height: 1%;
	}

	#text-horizon text {
		transform: translateY(-4.25%);
	}
  }

  @media only screen and (max-width: 450px) {
	.mask-rect {
		height: 1%;
	}

	#text-horizon text {
		transform: translateY(-4.25%);
	}
	
	.cls-2 {
	} 
  }

/* Exhibition */
.period {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	padding: 0;
}

#begin-exhibition {
	padding-left: 10vw;
}

#end-exhibition {
	padding-right: 30vw;
}

.period-intro {
	display: inline-block;
	position: relative;
	padding: 30px;
	margin: auto 125px auto 375px;
	word-wrap: break-word;
	width: 550px;
	opacity: 0;
	transform: translateY(-125px);
}

.period-intro h3 {
	font-family: enchanted;
	font-size: 3em;
	line-height: 1;
	margin-bottom: 0;
	white-space: nowrap;
}

.period-intro aside {
	font-family: brother-xl;
	position: relative;
	top: 175px;
	font-size: 7em;
	font-weight: 800;
	color: #d891d0;
	opacity: .35;
	white-space: nowrap;
}

.luese-work {
	display: inline-block;
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 100%;
	margin: auto 120px auto 120px;
	background-color: lightgrey;
	background-size: cover;
	background-position: center;
	transform: scale(0);
	opacity: 0;
	z-index: 3;
	box-shadow:
	0px 0px 2.2px rgba(255, 255, 255, 0.4),
	0px 0px 5.3px rgba(255, 255, 255, 0.45),
	0px 0px 10px rgba(255, 255, 255, 0.55),
	0px 0px 17.9px rgba(255, 255, 255, 0.65),
	0px 0px 33.4px rgba(255, 255, 255, 0.75),
	0px 0px 80px rgba(255, 255, 255, .8);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.luese-work:hover {
	animation: pulse 2.5s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
}

@keyframes pulse {
	0% {
		box-shadow:
	0px 0px 2.2px rgba(255, 255, 255, 0.4),
	0px 0px 5.3px rgba(255, 255, 255, 0.45),
	0px 0px 10px rgba(255, 255, 255, 0.55),
	0px 0px 17.9px rgba(255, 255, 255, 0.65),
	0px 0px 33.4px rgba(255, 255, 255, 0.75),
	0px 0px 80px rgba(255, 255, 255, .8);
	}

	50% {
		box-shadow:
		0px 0px 15px 30px rgba(255, 255, 255, 0.6),
		0px 0px 25px 30px rgba(255, 255, 255, 0.65),
		0px 0px 50px 30px rgba(255, 255, 255, 0.75),
		0px 0px 80px 30px rgba(255, 255, 255, 0.85),
		0px 0px 100px 30px rgba(255, 255, 255, 0.95),
		0px 0px 200px 30px rgba(255, 255, 255, .1);	
	}

	100% {
		box-shadow:
	0px 0px 2.2px rgba(255, 255, 255, 0.4),
	0px 0px 5.3px rgba(255, 255, 255, 0.45),
	0px 0px 10px rgba(255, 255, 255, 0.55),
	0px 0px 17.9px rgba(255, 255, 255, 0.65),
	0px 0px 33.4px rgba(255, 255, 255, 0.75),
	0px 0px 80px rgba(255, 255, 255, .8);
	}
}

.luese-work article {
	position: relative;
	left: 230px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 300px;
}

.luese-work h4 {
	margin: 0;
	margin-bottom: 5px;
	font-size: 1.25em;
	line-height: 1.1;
}

.luese-work h5 {margin: 0;
	font-family: brother-xl;
	font-size: 1.1em;
	font-weight: 400;
}

.luese-work p {
	margin: 0;
	font-weight: 300;
}


/* Animations */
#animate1, #animate2, #animate3, #animate4, #animate5, #animate6, #animate7, #animate8, #animate9, #animate10, #animate11, #animate12, #animate13, #animate14, #animate15, #animate16, #animate17, #animate18, #animate19, #animate20, #animate21, #animate22, #animate23, #animate24, #animate25, #animate26, #animate27 {
	transition: all 0.5s ease-in-out,
				background-color .3s;
}

.zap {
	transform: scale(1);
}

.up {
	transform: scale(1) translateY(-200px);
	opacity: 1;
}

.down {
	transform: scale(1) translateY(200px);
	opacity: 1;
}

.down article, .up article {
	opacity: 0;
	animation: textIn .7s linear .5s;
	animation-fill-mode: forwards;
}

@keyframes textIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


#hypertext-narratives, #interactive-novels, #flash-net-art, #excel-video-fiction {
	transition: opacity 1s ease-in;
}

.fadeIn {
	opacity: 1;
}


/* Curatorial Statement & Opening Remarks */
#curatorial-statement, #opening-remarks {
	position: fixed;
	top: 0;
	display: block;
	height: 100vh;
	width: 100vw;
	background:
        linear-gradient(rgb(251,171,96), rgba(255,255,255,.6)),
        linear-gradient(to top left, red, transparent),
        linear-gradient(to top right, blue, transparent);
    background-blend-mode: screen;
	color: 1a1a1a;
	transition: all .4s ease-in-out;
	z-index: 999;
	overflow-y: scroll;
	box-sizing: border-box;
	padding: 50px;
}

#curatorial-statement > *, #opening-remarks > * {
	width: 90%;
	max-width: 900px;
	margin: auto;
}

#curatorial-statement button, #opening-remarks button {
	position: sticky;
	top: 50px; 
	left: 80%;
	width: 100px;
}

#curatorial-statement h3, #opening-remarks h3 {
	margin-bottom: 25px;
}

#curatorial-statement p, #opening-remarks p {
	margin-bottom: 25px;
}

#curatorial-statement ul, #opening-remarks ul {
	margin: 5px auto;
}

#curatorial-statement ul li, #opening-remarks ul li {
	margin-left: 25px;
}

#curatorial-statement a:hover, #opening-remarks a:hover {
	transition: color .4s ease;
	color: #fff;
}


