@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Space+Mono&display=swap');


.testButton{height:100px; width:100px;
background:green;}

::selection {
  background: black;
	color:white;
	mix-blend-mode: lighten;
	-webkit-text-stroke-width:0px!important;
 	-webkit-text-stroke-color: black;
	
}
::-moz-selection {
  background: black;
	color:white;
	mix-blend-mode: multiply;
	-webkit-text-stroke-width:0px!important;
 	-webkit-text-stroke-color: black;
}


::-webkit-scrollbar {
  width: 20px;
}


/* Track */
::-webkit-scrollbar-track {
  background: white;
	border-left:1px solid black;
}


::-webkit-scrollbar-track:hover {
  background: white;
	border-left:1px solid black;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: black;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: black;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
/*for firefox*/


	}
html{
	overflow-x:hidden;
	cursor: crosshair;
	scrollbar-color: black white;
	scrollbar-width: 20px;

}

body {font-size:12px;
}


nav{
	top:0;
	right:0;
	width:75vw;
	height:100vh;
	position:fixed;
	background-color:black;
	z-index:7;
	mix-blend-mode:normal;
	overflow-y:scroll;
	overflow-x:hidden;
	overscroll-behavior: contain;
}


a {
  color: red;
	text-decoration: none;
}

.nav::-webkit-scrollbar {
  width: 0px!important;
height: 0px!important;
}


/* Track */
.nav::-webkit-scrollbar-track {
width:0px;
}


.nav::-webkit-scrollbar-thumb {
 width:0px;
}

.navClose{
	position:fixed;
	top:3.5vh;
	right:4.5vw;
	font-size:10em;
	color:white;
	z-index:6;
	
}
.navMenu{
	position:absolute;
	top:25vh;
	display:grid;
	width:100%;
	padding-bottom:300px;
	
}


.navMenu article{
	height:16vh;
	min-height:100px;
	width:100%;
	font-size:9em;
	padding-left:35px;
	padding-right:35px;
	line-height:15vh;
	color:white;
	border-bottom:1px solid white;
	overflow-x:scroll;
	overflow-y:hidden;
	

	
}

.navMenu article:hover{
	color:black;
	background-color:white;
}

.navMenu article::-webkit-scrollbar {
	width:0;
	height:0;}

.navMenuDiv{
	width:100%;
}

.workInfo{}

.menuFixedPages{
	
	height:15vh;
	width:100%;
	font-size:9em;
	padding-left:35px;
	padding-right:35px;
	line-height:15vh;
	color:white;
	border-bottom:1px solid white;
}


.menuPS{
	color:white;
	position:absolute;
	width:75%;
	bottom:5%;
	padding-left: 35px;
    padding-right: 35px;
	
	font-size:1.5em;
	font-weight:400;
}






.font1{font-family:"Space Mono";}
.font2{font-family:"Open Sans";
font-weight:500;}

.font3{font-family:"Playfair Display";
font-weight:500;}



.font4{font-family:"Playfair Display";
	font-style: italic;
	
font-weight:500;}

.font5{font-family:"Playfair Display";
font-weight:700;}

.font6{font-family:"Playfair Display";
	font-style: italic;
font-weight:700;}


.followCursor{
	position:absolute;
	width:800px;
	height:500px;
	transition-duration: 100ms!important;
	z-index:1;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	left:0;
	top:0;
}

.hudWrapper{
	width:100%;
	height:200vh;
	position:absolute;
	top:0;
}

.Outline{
	position: -webkit-fixed;
	position:fixed;
	width:95vw;
	height:90vh;
	margin-left:2.5vw;
	margin-top:2.5vh;
	border:2px solid black;
	color:black;
	top:2.5vh;
	mix-blend-mode:normal;
	z-index:-1;
}


.navwrapper{
	position: -webkit-fixed;
	position:fixed;
	width:90%;
	margin-left:5vw;
	top:5vh;
	z-index:5;

}

.menuIcon{
	position:relative;
	float:right;
	top:0;
	right:0;
	font-size:8em;
}


.websiteIcon{
	font-size:12em;
}

.websiteLogo{
	font-size:12em;
	position:relative;
	top:0;
	float:left
}

.coordinates{
	position:fixed;
	font-size:2em;
	line-height:0.9em;
	bottom:5vw;
	left:5vw;
	
}

.contactInfo{
	position:fixed;
	font-size:2em;
	line-height:0.9em;
	bottom:5vw;
	right:5vw;
	
}
.coordinateX{
	font-size:1em;
	display:inline-block;
	
}
.coordinateY{
	font-size:1em;
	display:inline-block;
}



.titleText{
	font-size:6em;
	line-height:1.3em;
	hyphens: auto!important;
	-webkit-hyphens: auto;
	width:90%;
	max-width:1500px;
	color:black;
	
	z-index:11;
}





.heroText{
	margin-left:5%;
	margin-right:auto;
	margin-top:30vh;
	margin-bottom:50px;

}

.heroText2{
	margin-left:5%;
	margin-right:auto;;
	margin-top:70px;
	margin-bottom:150px;
}






/*this is for the main page*/
/*these are for the entries in the grid section*/
.date{
	grid-column:1/3;
	height:100%;
	line-height:80px;
	font-size:1.1em;
}

.title{
	grid-column:3/10;
	height:100%;
	line-height:75px;
	font-size:2em;
	
}


.introSection{
}

.description{
	grid-column:10/13;
	height:100%;
	font-size:1em;
}





/*for the text that scrolls when you scroll*/
.scrollingTextContainer{
	font-size:12em;
	height:200px;
	overflow-x:scroll;
	overflow-y:hidden;
}


.scrollingTextContainer::-webkit-scrollbar {height:0;}

.scrollingText{
	color:transparent;
	padding-right:100px;
	padding-left:100px;
	overflow-x:scroll;
	overflow: auto; 
	mix-blend-mode: darken;
	-webkit-text-stroke-width: 2px;
  	-webkit-text-stroke-color: black;

}

/*for the text that scrolls by itself*/
.animatedScrollingTextContainer{
	font-size:20em;
	line-height:1.5em;
	mix-blend-mode: darken;
	height:350px;
	overflow-x:scroll;
	overflow-y:hidden;
}
.animatedScrollingText{
	color:white;
	background-color:black;
	padding-right:100px;
	padding-left:100px;
	animation: autoScroll;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration:60s;
}
.animationSpeed1 {
	animation: autoScroll;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 40s;}
.animationSpeed2 {
	animation: autoScroll;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 70s;}
.animationSpeed3 {
	animation: autoScroll;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 80s;}

@keyframes autoScroll {
  0% {transform: translateX(20%);}
  100% {transform: translateX(-100%);}
}

.animatedScrollingTextContainer::-webkit-scrollbar {height:0;}

.scrollSize1{width:450%;}
.scrollSize2{width:550%;}
.scrollSize3{width:950%;}
.scrollSize4{width:1150%;}






.entriesSection{
	display:grid;
	grid-template-columns:repeat(12, 1fr);
	grid-template-rows:repeat(12, auto);
	grid-column-gap:20px;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:100px;
	margin-bottom:100px;
}



article:hover{
	background-color:black;
	transition-duration:550ms;
}


.entriesSection article{
	grid-column:1/13;
	border-bottom:1px solid black;
	min-height:80px;
	height:auto;
	display:grid;
	grid-template-columns:repeat(12, 1fr);
	grid-column-gap:20px;
	
	mix-blend-mode:lighten;
	
	z-index:2;
}

/*modifiers*/
strong{
	z-index:11;
}

strong:hover{
	color:red!important;
}

.background{
	position:fixed;
	z-index:-1;
	background-color: black;
	width:100vw;
	height:100vh;
	top:0;
	opacity:0;
	transition-duration:200ms;
	cursor: zoom-out;
}

.opaque{
	opacity:100;
	z-index:6;
	transition-duration:200ms;
}


.appearWhenReached{
	transition-duration:400ms;
}
.hidden{opacity:0;
		transition-duration:400ms;
		transition-timing-function:ease-in;
		z-index:-10!important;
}

.collapsed{
	width:0px!important;
	transform:translateX(100px);
	z-index:-2!important;
	

}

.highlighted .date{ 
	color:white;
	padding-left:20px;
	transition-duration:200ms;
	transition-timing-function:ease-in;

	
}

.highlighted .title{ 
	color:white;
	transition-duration:200ms;
	transition-timing-function:ease-in;
	
}

.highlighted .description{ 
	color:white;
	transform:translateX(100px);
	transform:translateY(10px);
	transition-duration:200ms;
	transition-timing-function:ease-in;

	
}


.toFront{
}


.transparent{
	opacity:0;
	height:0;
	transition-duration:200ms;
}
.focused{
	z-index:10;
	
}

.focused img{
	position: fixed;
	height:90vh;
	width:auto!important;
	display: block;
	
	top:5vh;
	right:0;
	left:0;
	
    margin-left: auto;
    margin-right: auto;
	
	z-index:10;
	mix-blend-mode:normal!important;
	transition-duration:300ms;
	
	cursor:crosshair;
	
}

/*for mobile*/

@media only screen and (max-width: 700px) {

	
	
    .followCursor{
	display:none;

  	}
	.websiteContainer{
		overflow:hidden;
	}
	.Outline{
		border:none;
	}
	
	.contactInfo{
		display:none;
		
	}
	
	
	.navwrapper{

}
	
.menuIcon{
	position:relative;
	float:right;
	top:0;
	right:0;
	font-size:4em;
	z-index:5;
	
}

.websiteIcon{
	font-size:4em;
}

.websiteLogo{
	font-size:4em;
	position:relative;
	top:0;
	float:left;
}
.navClose{
	position:fixed;
	top:3.5vh;
	right:4.5vw;
	font-size:4em;
	color:white;
	z-index:11;
	
}
	.coordinates{
	display:none;
}
	
	.titleText{
		font-size:2em;
		width:80%;
		z-index:12;
	}
	
	.heroText{
	margin-left:10%;
	margin-right:auto;
	margin-top:15vh;
	margin-bottom:20px;
}

	

	.navMenuDiv{
	width:100%;
	}
	
	
	.navMenu{
	position:absolute;
	top:25vh;
	display:grid;
	width:100%;
	padding-bottom:300px;
	
}

	.nav{
		width:100vw;
	}
	
.navMenu article{
	height:10vh;
	min-height:70px;
	width:100%;
	font-size:2em!important;
	line-height:10vh;

}


.navMenuDiv{
	width:100%!important;
}

.menuFixedPages{
	height:10vh;
	min-height:70px;
	width:100%;
	font-size:2em!important;
	line-height:10vh;

}
	
.heroText2{
	margin-left:10%;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:50px;
	text-align:left;
}
	.entriesSection{
		width:100%;
	}
	
	.description{
		display:none;
	}
	.title{
		
		font-size:1.3em;
		grid-column:2/12;
		padding-top:25px;
		padding-bottom:25px;
		line-height:1.2em;
	}
		.description{
		display:none;
	}
		.date{
		display:none;
	}
	
	.introSection{
		display:none;
	}
	
	
	.hidden{opacity:100;
		transition-duration:400ms;
		transition-timing-function:ease-in;
		z-index:-10;
}
	.focused img{
		width:90%!important;
		height:auto!important;}

	
}


@media only screen and (max-width: 1500px) {
	.navMenuDiv{
}
	.navMenu article{
	height:10vh;
	min-height:70px;
	width:100%;
	font-size:5em;
	line-height:10vh;

}
	.menuFixedPages{
	height:10vh;
	min-height:70px;
	width:100%;
	font-size:5em;
	line-height:10vh;

}
}