/* ____________ FONTS _____________*/

@font-face {
  font-family: GT America Reg;
  src: url(fonts/GTAmericaRegular.otf);
  font-weight: sans-serif;
}

@font-face {
  font-family: GT America Bold;
  src: url(fonts/GTAmericaBold.otf);
  font-weight: bold;
}

@font-face {
  font-family: GT America Italic;
  src: url(fonts/GTAmericaBoldItalic.otf);
  font-weight: italic;
}

@font-face {
	font-family: Resist Sans;
	src: url(fonts/ResistSansTextLight.otf);
	font-weight: sans-serif
}


@font-face {
  font-family: Xanh Mono Reg;
  src: url(fonts/XanhMono-Regular.ttf);
  font-weight: italic;
}

@font-face {
	font-family: Xanh Italic;
	src: url(fonts/XanhMono-Italic.ttf);
	font-weight: italic;
}


/* ______________ INDEX ______________ */

html {
	scroll-behavior: smooth;
}

body {
	background-color: #111;
	display: flex;
	overflow-y: hidden;
}

#cover {
	position: relative;
	top: 20vh;
	left: 5vw;
	z-index: 3;
}

#cover img {
	width: 60vw;
	height: auto;
	filter: drop-shadow(0 0 0.5px #eee);
}

#home-body {
	width: 800vw;
	height: 100vh;
}

#nav-home {
	display: inline;
	width: 80vw;
	left: 15vw;
	z-index: 289;
}

nav a {
	display: inline;
	font-family: "Xanh Mono Reg";
	font-size: 15pt;
	margin: 1em;
	color: #574aff;
	text-decoration: none;
	text-shadow: 0 0 1.5px #eee;
	-o-transition:.2s;
  -ms-transition:.2s;
  -moz-transition:.2s;
  -webkit-transition:.2s;
  transition:.2s;
}

ul {
	display: inline;
	position: fixed;
	list-style: none;
	left: 10vw;
	top: 3vh;
}

li {
	display: inline;
}

#dissectlink, #eritreanlink, #playgroundlink {
	display: inline;
	position: fixed;
	top: 4vh;
}

#typesofmelink, #helveticalink, #paradoxlink {
	display: inline;
	position: fixed;
	top: 0vh;
}

#translink {
	display: inline;
	position: fixed;
	top: 8vh;
}
#typesofmelink {
	left: 40vw;
}

#helveticalink {
	left: 60vw;
}

#dissectlink {
	left: 5vw;
}

#eritreanlink {
	left: 45vw;
}

#playgroundlink {
	left: 70vw;
}

#translink {
	left: 80vw;
}

li a:hover {
	font-family: "Resist Sans";
	width: 800vw;
	color: white;
}

li a:active {
	font-family: "Resist Sans";
	width: 800vw;
	text-decoration: underline;
	transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.home-map {
	display: flex;
	position: absolute;
	margin-top: 4vw;
}

.home-map div {
	display: inline;
	position: relative;
	z-index: 1;
}

.home-map img {
	display: inline;
	position: relative;
	width: 20vw;
	height: auto;
	z-index: 1;
	transition: transform 400ms 0ms, z-index 0ms 400ms;
}


#dissect-to-reinforce {
	position: relative;
	left: 100vw;
	width: 100vw;
}

#dissect-to-reinforce img {
	position: relative;
	width: 30vw;
	height: auto;
	left: 40vw;
	top: 45vh;
	z-index: 2;
}

#dissect-to-reinforce img:nth-of-type(2) {
	position: relative;
	width: 25vw;
	height: auto;
	left: -10vw;
	top: 10vh;
	z-index: 7;
}

#dissect-to-reinforce img:nth-of-type(3) {
	position: relative;
	width: 25vw;
	height: auto;
	left: -40vw;
	top: 40vh;
	z-index: 7;
}

#dissect-to-reinforce iframe:nth-of-type(1) {
	position: relative;
	width: 50vw;
	height: 50vh;
	top: -30vh;
	z-index: 2;
	left: 50vw;
}

#dissect-to-reinforce iframe:nth-of-type(2) {
	position: relative;
	width: 40vw;
	height: 40vh;
	z-index: 2;
	left: 5vw;
	top: -10vh;
	z-index: 4;
}

#dissect-to-reinforce p {
	position: relative;
	top: -80vh;
	left: 2vw;
	z-index: 15;
}

#dissect-to-reinforce h2 {
	position: relative;
	z-index: 15;
	top: -100vh;
	left: 70vw;
}

#the-paradox-of-choosing {
	position: relative;
	left: 200vw;
	width: 100vw;
}

#the-paradox-of-choosing img:nth-of-type(1) {
	width: 30vw;
	height: auto;
	left: 30vw;
	z-index: 2;
	top: 20vh;
}

#the-paradox-of-choosing iframe:nth-of-type(1) {
	position: relative;
	left: -10vw;
	top: 20vh;
	z-index: 3;
}

#the-paradox-of-choosing iframe:nth-of-type(2) {
	position: relative;
	left: -20vw;
	top: 40vh;
	z-index: 3;
}

#the-paradox-of-choosing p {
	position: relative;
	left: 70vw;
	top: -30vw;
}

#the-paradox-of-choosing h2 {
	position: relative;
	top: -50vh;
	left: 40vw;
	z-index: 3;
}

#eritrean-utopia {
	position: relative;
	left: 300vw;
	width: 100vw;
}


#eritrean-utopia h2 {
	position: relative;
	top: -125vh;
	left: 25vw;
	z-index: 200;
}

#eritrean-utopia p {
	position: relative;
	top: -140vh;
	left: 75vw;
	z-index: 200;
}

#eritrean-utopia img:nth-of-type(2) {
	position: relative;
	top: 35vh;
	left: 10vw;
	z-index: 2;
}

#eritrean-utopia img:nth-of-type(6) {
	position: relative;
	top: -50vh;
	left: 10vw;
	z-index: 2;
}

#eritrean-utopia img:nth-of-type(3) {
	position: relative;
	top: 40vh;
	left: 10vw;
	z-index: 2;
}

#eritrean-utopia img:nth-of-type(5) {
	position: relative;
	top: -15vh;
	left: 10vw;
	z-index: 2;
}

#eritrean-utopia img:nth-of-type(4) {
	position: relative;
	top: 1vh;
	left: 10vw;
	z-index: 2;
}

#eritrean-utopia img:nth-of-type(1) {
	position: relative;
	top: -15vh;
	left: 10vw;
	z-index: 2;
}

#eritrean-utopia img:nth-of-type(7) {
	position: relative;
	top: -60vh;
	left: 10vw;
	z-index: 2;
}

#eritrean-utopia img:nth-of-type(8) {
	position: relative;
	top: -30vh;
	left: 10vw;
	z-index: 2;
}


#helvetica-baked {
	position: relative;
	left: 400vw;
	width: 100vw;
	height: 100vh;
}

#helvetica-baked iframe {
	position: relative;
	width: 60vw;
	z-index: 3;
	left: 40vw;
}

#helvetica-baked img:nth-of-type(1) {
	position: relative;
	width: 12vw;
	z-index: 2;
	top: 30vh;
	left: -25vw;
}

#helvetica-baked img:nth-of-type(2) {
	position: relative;
	width: 25vw;
	left: -60vw;
	top: -10vh;
	z-index: 1;
}#helvetica-baked img:nth-of-type(3) {
	position: relative;
	width: 20vw;
	z-index: 2;
	top: 0vh;
	left: 15vw;
}

#helvetica-baked img:nth-of-type(4) {
	position: relative;
	width: 25vw;
	left: -20vw;
	top: 0vh;
	z-index: 1;
}#helvetica-baked img:nth-of-type(5) {
	position: relative;
	width: 25vw;
	left: 10vw;
	top: 5vh;
	z-index: 1;
}

#helvetica-baked p {
	position: relative;
	left: 60vw;
	top: -85vh;
	z-index: 4;
}

#helvetica-baked h2 {
	position: relative;
	top: -70vh;
	left: 20vw;
}

#types_of_me {
	position: relative;
	left: 500vw;
	width: 100vw;
height: 100vh;
}

#types_of_me h2 {
	position: relative;
	z-index: -1;
	font-size: 64pt;
	font-family: 'Xanh Mono Reg';
	color: #fff;
	text-shadow: 3px 3px 8px #574aff;
	left: 40vw;
	top: -60vh;
}

#types_of_me p {
	top: -30vh;
	left: 70vw;
}

#types_of_me img {
	position: relative;
	top: 30vh;
	left: 20vh;
}

#types_of_me img:nth-of-type(1) {
	top: 30vh;
}
#types_of_me img:nth-of-type(2) {
	top: 35vh;
}
#types_of_me img:nth-of-type(3) {
	top: 45vh;
}

#types_of_me img:nth-of-type(6) {
	top: 10vh;
}

#playground {
	position: relative;
	left: 600vw;
	width: 100vw;
}

#playground img {
	width: 27vw;
	height: auto;
}

#playground img:nth-of-type(1) {
	position: relative;
	height: auto;
	top: 15vh;
	z-index: 2;
	left: 30vw;
}


#playground img:nth-of-type(2) {
	position: relative;
	top: -15vh;
	left: -15vw;
	z-index: 2;
}

#playground img:nth-of-type(3) {
	position: relative;
	top: 15vh;
	left: -55vw;
	z-index: 2;
}

#playground p {
	position: relative;
	left: 70vw;
	top: -70vh;
}

#playground h2 {
	position: relative;
	top: -75vh;
	left: 45vw;
	z-index: 3;
}
#transition {
	position: relative;
	left: 700vw;
	width: 100vw;
}

#transition h2 {
	position: relative;
	top: -135vh;
	left: 50vw;
}

#transition p {
position: relative;
top: -100vh;
left: 10vw;
z-index: 10;
}


#transition img {
	position: relative;
	left: -5vw;
	top: 5vh;
}

#transition img:nth-of-type(2) {
	left: 45vw;
	top: 50vh;
}

#transition img:nth-of-type(3) {
	left: 15vw;
	top: -10vh;
}

#transition img:nth-of-type(4) {
	left: -20vw;
	top: 0vh;
}

#transition img:nth-of-type(5) {
	left: 5vw;
	top: 0vh;
}

#transition img:nth-of-type(6) {
	left: 0vw;
	top: -25vh;
}

#transition img:nth-of-type(7) {
	left: 10vw;
	top: -25vh;
}
#transition img:nth-of-type(8) {
	left: 0vw;
	top: -30vh;
}
#transition img:nth-of-type(9) {
	left: 30vw;
	top: -30vh;
}

#dissect-to-reinforce img:hover,
#dissect-to-reinforce iframe:hover,
#the-paradox-of-choosing iframe:hover,
#the-paradox-of-choosing img:hover,
#the-paradox-of-choosing a:hover,
#helvetica-baked img:hover,
#playground img:hover,
#playground iframe:hover,
#transition img:hover,
#transition iframe:hover{
	z-index: 289;
	transition: transform 400ms 0ms, z-index 0ms 0ms;
}

.info-text {
	display: inline-flex;
	color: white;
	position: relative;
	z-index: 1;
	top: 10vh;
}

.info-textpar {
	position: relative;
	width: 20vw;
	z-index: 10;
	font-family: 'Resist Sans';
	font-size: 12pt;
	text-shadow: 3px 3px 8px #574aff;
	top: 10vh;
}



#types_of_me .info-textpar:hover {
	color: white;
}

.info-text h2 {
	position: relative;
	z-index: -1;
	font-size: 54pt;
	font-family: 'Xanh Mono Reg';
	color: #fff;
	text-shadow: 3px 0px 3px #574aff;

}


p::selection,
a::selection,
h2::selection,
h1::selection {
	color: #FFF;
  	background: #574aff;
}


/*____________ABOUT_______________*/

#about_cursor h1 {
	display: inline-flex;
	width: 65vw;
	color: white;
	font-family: "Xanh Mono Reg";
	margin-left: 5vw;
	margin-top: 8.2vh;
	margin-bottom: 3vh;
	font-size: 5em;
	text-shadow: 0px 0px 5px #574aff;
}

#about_cursor p {
	display: inline-flex;
	position: relative;
	top: -10vh;
	width: 40vw;
	color: white;
	font-family: "Xanh Mono Reg";
	font-size: 1.5em;
	margin-left: 10vw;
	text-shadow: 0 0 3px #574aff;
}

#about_winta {
	margin-left: 10vw;
}

#about_winta img {
	width: 30vw;
	top: 15vh;
	filter: drop-shadow(0 0 0.5px #eee);
	position: relative;
}

#contact {
	display: inline-grid;
	left: 40vw;
	font-family: "Xanh Mono Reg";
	font-size: 3em;
	text-decoration: none;
	text-shadow: 0 0 1.2px #FFF;
}

#contact a {
	display: inline-grid;
	color: #574aff;
	position: relative;
	margin-bottom: 3vh;
	top: -27.8vh;
	-o-transition:.2s;
  -ms-transition:.2s;
  -moz-transition:.2s;
  -webkit-transition:.2s;
  /* ...and now for the proper property */
  transition:.2s;
}

#contact a:hover {
	display: inline-grid;
	font-family: "Resist Sans";
	-webkit-transition: 0.3s;
	color: white;
}


/*___________TYPES OF ME__________*/

#typesofme {
	display: inline;
	position: absolute;
	width: 100vw;
	height: 100vh;
}

#typesexplain {
	display: flex;
	position: absolute;
	left: 10vw;
	top: 10vh;
}

#typesofme h1 {
	display: inline-flex;
	position: absolute;
	font-family: "Xanh Mono Reg";
	font-size: 5em;
	color: #FFF;
	text-shadow: 0px 0px 1px #574aff;
	width: 40vw;
}

#typesofme p {
	display: inline-flex;
	position: absolute;
	color: white;
	font-family: "Resist Sans";
	width: 40vw;
	margin-top: 7em;
	margin-left: 4em;
	font-size: 16pt;
	text-shadow: 3px 3px 8px #574aff;
}


.image {
	position: absolute;
	width: 10%;
	height: auto;
	z-index: -1;
}