/* MAIN CSS Document */
/* AUTHOR RENEE CARMICHAEL 


/*FONT IMPORT GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@1,100&family=Yantramanav:wght@100&display=swap');

/* MiniPax, Copyright (c) 2019 — Raphaël Ronot // ronotypo.com 
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/
@font-face {
  font-family: 'Minipax';
  src: url('https://renee-carmichael.com/fonts/Minipax-Medium.eot');
  src: url('https://renee-carmichael.com/fonts/Minipax-Medium.woff') format('woff'), 
   url('https://renee-carmichael.com/fonts/Minipax-Medium.woff2') format('woff2');
  
} 

/* 	Copyright (c) 2012, Tyler Finck <hello@sursly.com>, with Reserved Font Name: "Blackout".
	This Font Software is licensed under the SIL Open Font License, Version 1.1.
	This license is copied below, and is also available with a FAQ at:
	http://scripts.sil.org/OFL
	Version 2.0 - 18 March 2012 */
@font-face {
    font-family: 'terminal_grotesque';
    src: url('https://renee-carmichael.com/fonts/terminal-grotesque-webfont.eot');
    src: url('https://renee-carmichael.com/fonts/terminal-grotesque-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://renee-carmichael.com/fonts/terminal-grotesque-webfont.woff2') format('woff2'),
         url('https://renee-carmichael.com/fonts/terminal-grotesque-webfont.woff') format('woff'),
         url('https://renee-carmichael.com/fonts/terminal-grotesque-webfont.ttf') format('truetype'),
         url('https://renee-carmichael.com/fonts/terminal-grotesque-webfont.svg#terminal_grotesqueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body, html {
	width:200vw;
	height:100%;
	overflow:auto;
}

p {
	padding-bottom:10px;
}

#credits {
	position:fixed;
	left:20px;
	bottom:20px;
	font-family: 'terminal_grotesque';
	font-size:14px;
}
#menu{
	position:fixed;
	left:20px;
	top:20px;
	font-family: 'terminal_grotesque';
	font-size:14px;
	display:block;
	line-height:20px;
}

#menu a {
	display:block;
	color:magenta;
}

#credits a {
	color:magenta;
}

#open-credits {
	display:block;
	width:300px;
}

#above-the-fold {
	position:absolute;
	left: 100%;
	top:5%;
	transform: translate(-100%);
	width:50vw;
}

#below-the-fold {
	display:none;
	position:absolute;
	left: 100%;
	transform: translate(-100%);
	width:50vw;
}

#below-the-fold-again {
	display:none;
	position:absolute;
	left: 100%;
	top:450%;
	transform: translate(-100%);
	width:50vw;
}

#below-the-fold-again .read  {
	font-family: 'Yantramanav', sans-serif;
	font-size:20px;
	font-weight:400px;
}

#JumpBelowTheFoldFooter {
	display:none;
	position:absolute;
	transform: translate(-100%);
	left: 100%;
	width:50vw;
}

#JumpBelowTheFoldFooter .read {
	font-family: 'Minipax';
	font-size:16px;
}


#variable, .code {
font-family: 'terminal_grotesque';
font-size:25px;
}

.scroll, .scroll-again, .scroll-again-again {
	font-family: 'terminal_grotesque';
	display:none;
	font-size:25px;
	color:magenta;
}

.read {
	font-family: 'Minipax';
	font-size:16px;
	line-height:26px;
	text-align:justify;
	padding-left:50px;
}

.machine-text {
	font-family: 'IBM Plex Mono', monospace;
	padding-right:50px;
	line-height:26px;
}

#variable a {
	color:blue;
}

.indent {
	margin-left:50px;
}

.hyperlink. .hyperlink-text, .hyperlink-function {
	font-family: 'terminal_grotesque';
	font-size:20px;
	color:blue;
}

.hyperlink {
white-space:nowrap;
}

.hyperlink-function {
	display:none;
}

.special-hyperlink {
font-family: 'terminal_grotesque';
font-size:25px;
color:black;
text-decoration:none;
animation-name: breathe;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes breathe {
  0% {
    font-size: 25px;
  }
  
  50% {
    font-size: 28px;
  }
  
  100% {
    font-size: 30px;
  }
}

.number-line, .bio-line, .flee-line, .liminal-line, .academic-line, .dance-line, .code-line, .feeling-line, .blockchain-line {
	opacity:0.3;
}

#biography {
	display:none;
	position:absolute;
	left:105%;
	top:75%;
	width:500px;
}

#flee {
	display:none;
	position:absolute;
	margin-left:9%;
	margin-top:25%;
	width:500px;
	overflow:auto;
	z-index:1;
}
#mirror {
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:-10;
	opacity:0.3;
}

#number {
	color:grey;
	display:none;
	position:absolute;
	font-size:500px;
	width:100%;
	height:50%;
	left:70%;
	top:-50%;
	z-index:-1;
	opacity:0.1;
}

#liminal {
	display:none;
	position:absolute;
	margin-left:2%;
	margin-top:55%;
	width:500px;
	overflow:auto;
}

#academic {
	display:none;
	position:absolute;
	margin-left:112%;
	margin-top:75%;
	width:500px;
	overflow:auto;
}

#dance {
	display:none;
	position:absolute;
	margin-left:115%;
	margin-top:95%;
	width:560px;
	overflow:auto;
}

#code {
	display:none;
	position:absolute;
	margin-left:118%;
	margin-top:120%;
	width:560px;
	overflow:auto;
}
#code h1 {
	font-family: 'Minipax';
	font-size:20px;
}
#MyFirstFeeling {
	display:none;
	position:absolute;
	margin-left:110%;
	margin-top:250%;
	width:560px;
	overflow:auto;
}

#blockchain {
	display:none;
	position:absolute;
	margin-left:2%;
	margin-top:125%;
	width:560px;
	overflow:auto;
}

.footnote {
	font-family: 'terminal_grotesque';
	font-size:10px;
}

.footnotes {
	font-family: 'terminal_grotesque';
	font-size:10px;
}

.authors {

	font-family: 'terminal_grotesque';
	font-size:14plongerx;
}

.authors h1 {
font-family: 'terminal_grotesque';
	font-size:20px;	
}

.spatial-read {
	font-family: 'Quicksand', sans-serif;
	font-size:14px;
	line-height:20px;
}

.magenta {
	color:magenta;
}

.orange {
	color:orange;
}

.red {
	color:red;
}

.purple {
	color:purple;
}

.pink {
	color:pink;
}

.blue {
	color:blue;
}

.close-number {
	color:grey;
}
@media screen and (max-width: 1080px) {
#academic {
  display:none;
  position:absolute;
  margin-left:162%;
  margin-top:65%;
  width:500px;
  overflow:auto;
}
#open-credits {
  display: block;
  width: 100px;
}
#liminal {
  width: 350px;
}
#blockchain {
  width:350px;
  margin-top:215%;
}

#dance {
  display:none;
  position:absolute;
  margin-left:175%;
  margin-top:95%;
  width:560px;
  overflow:auto;
}

#code {
  display:none;
  position:absolute;
  margin-left:118%;
  margin-top:235%;
  width:560px;
  overflow:auto;
}
#MyFirstFeeling {
  display:none;
  position:absolute;
  margin-left:110%;
  margin-top:500%;
  width:560px;
  overflow:auto;
}
#biography {
  display:none;
  position:absolute;
  left:105%;
  top:105%;
  width:500px;
}
#below-the-fold-again {
	display:none;
	position:absolute;
	left: 100%;
	top:530%;
	transform: translate(-100%);
	width:50vw;
}
}
@media screen and (max-width: 930px) {
#academic {
  display:none;
  position:absolute;
  margin-left:172%;
  margin-top:65%;
  width:500px;
  overflow:auto;
}
#flee {
  display: none;
  position: absolute;
  margin-left: 9%;
  margin-top: 25%;
  width: 350px;
  overflow: auto;
  z-index: 1;
}
#below-the-fold-again {
	display:none;
	position:absolute;
	left: 100%;
	transform: translate(-100%);
	width:50vw;
}
}
@media screen and (max-width: 700px) {
#above-the-fold {
	position:absolute;
	left: 120%;
	top:5%;
	transform: translate(-120%);
	width:50vw;
	}
  #below-the-fold {
  display:none;
  position:absolute;
  left: 120%;
  transform: translate(-120%);
  width:50vw;
}

#below-the-fold-again {
  display:none;
  position:absolute;
  left: 120%;
  transform: translate(-120%);
  width:50vw;
}
#liminal {
margin-top:75%;
  width: 150px;
}
#flee {
  display: none;
  position: absolute;
  margin-left: 9%;
  margin-top: 25%;
  width: 150px;
  overflow: auto;
  z-index: 1;
}
#blockchain {
  width:150px;
  margin-top:455%;
}
#academic {
  display:none;
  position:absolute;
  margin-left:172%;
  margin-top:35%;
  width:500px;
  overflow:auto;
}
#biography {
  display:none;
  position:absolute;
  left:125%;
  top:125%;
  width:500px;
}
#dance {
  display:none;
  position:absolute;
  margin-left:175%;
  margin-top:95%;
  width:560px;
  overflow:auto;
}

#code {
  display:none;
  position:absolute;
  margin-left:138%;
  margin-top:635%;
  width:560px;
  overflow:auto;
}
#MyFirstFeeling {
  display:none;
  position:absolute;
  margin-left:120%;
  margin-top:1300%;
  width:560px;
  overflow:auto;
}
}