@charset "UTF-8";


@font-face{
	font-family:caslonantique;
	src:url(../webfonts/CaslonAntique.ttf);  
}

@font-face{
	font-family:oratorstd;
	src:url(../webfonts/OratorStd.otf)
}

@font-face{
	font-family:acid;
	src:url(../webfonts/acid.otf)
}

html { 
  background: url("http://www.hyphaltrelli.net/2018/img/blackpalaces.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	overflow: hidden;
  

}

#paradigm{
	position:absolute;
	width: 350px;
	left: 15%;
	top:13%;
	opacity: .8;
	z-index: 99;
}

.bodycopy{
	color: #FFFFFF;
	text-decoration: none;
	font-family: "acid", arial;
	font-size: x-small;
	font-variant: small-caps;
	line-height: 1.6;
		letter-spacing: 4px;
	opacity: .8;

}

.bodycopy2{
	color: #FFFFFF;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-size: small;	
	opacity: .7;
}

#metamoratitle{
	
	color: #956FFB;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-variant: small-caps;
	text-align: center;
	font-size: 80px;	
	letter-spacing: 65px;
	line-height: .2;
	z-index: 99;
	opacity: .8;
	transition: color 3s ease-in-out, opacity 8s ease-in-out, letter-spacing 20s ease-in-out, filter 25s ease-in-out;
	
}

#metamoratitle:hover{
	color: #ffffff;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-variant: small-caps;
	text-align: center;
	font-size: 80px;	
	letter-spacing: 300px;
	line-height: .2;
	z-index: 99;
	opacity: 0.1;
	filter: blur(100px);
	transition: color 3s ease-in-out, opacity 20s ease-in-out, letter-spacing 40s ease-in-out, filter 40s ease-in-out;
	
}


#metamoratitle:hover + #array{
	opacity: .5;
	mix-blend-mode: multiply;
}



#array{
	position:fixed;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
	opacity: 0;

	transition: opacity 5s ease-in-out;
	z-index: -2;
	filter: blur(1px);
}

#thesis:hover + #chime{
	opacity: .5;
	
}

#chime{
	position:fixed;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
	opacity: 0;
	mix-blend-mode: multiply;

	transition: opacity 5s ease-in-out;
	z-index: -2;
	filter: blur(1px);
	
}

#ring{
	position:fixed;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
	opacity: 0;
	mix-blend-mode: multiply;
	transition: opacity 5s ease-in-out;
	z-index: -2;
	filter: blur(1px);
}

#realization:hover + #ring{
	opacity: .4;
	
}


#thornz{
	position:absolute;
	left:53%;
	top:22%;
	opacity: .2;
	z-index:100;
	mix-blend-mode: lighten;
	filter: blur(2px);
	transition: opacity 5s ease-in-out, filter 5s ease-in-out;
}
#thornz:hover{
	position:absolute;
	left:53%;
	top:22%;
	opacity: 0;
	
	mix-blend-mode: lighten;
	filter: blur(20px);
	transition: opacity 8s ease-in-out, filter 8s ease-in-out;
}


h1{
	color: #FFFFFF;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-size: small;
	font-variant: small-caps;
	letter-spacing: 11px;
	text-align: justify;
	opacity: .8;
	transition: opacity 5s ease-in-out, filter 5s ease-in-out, letter-spacing 10s ease-in-out;
	
}

h1:hover{
	color: #FFFFFF;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-size: small;
	font-variant: small-caps;
	letter-spacing: 40px;
	text-align: justify;
	opacity: 5;
	filter: blur(20px);
	transition: opacity 25s ease-in-out, filter 10s ease-in-out, letter-spacing 20s ease-in-out;
	
}

#metagrade{
	position:fixed;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	background-color:#0F291E;
	z-index:1;
	mix-blend-mode: multiply;
	opacity: .5;
}


#pendant{
	position:fixed;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
	opacity: 0;
	mix-blend-mode: multiply;
	transition: opacity 6s ease-in-out;
	z-index: 1;
	filter: blur(0px);
	
}


.bio{
	position:absolute;
	right:40px;
	top: 450px;
	width: 400px;
    border: 0;
    padding: 0;
    margin: 0;
	text-align: left;
	z-index: 99;

}

.bio:hover + #pendant{
	opacity: .35;
	transition: opacity 6s ease-in-out;
	
}

.bio:hover + #metamoratitle{
	position:absolute;
	top:360px;
	right:160px;
	color: #956FFB;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-size: 30px;	
	letter-spacing: 18px;
	z-index: 99;
	opacity: 1;
	transition: color 3s ease-in-out, opacity 3s ease-in-out, letter-spacing 10s ease-in-out;
	
}

.carder{
	opacity:.7;

}

.continue{
	width: 400px;
    border: 0;
    padding: 0;
    margin: 0;
	text-align: right;
}

a:link{
	color: #FFFFFF;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-variant: small-caps;
	font-size: small;
	letter-spacing: 1px;
	opacity:.7;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-variant: small-caps;
	font-size: small;
	letter-spacing: 1px;
	opacity:.7;
}

a:hover
{
	color: #D07EFF;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-style: normal;
	font-variant: small-caps;
	font-size: small;
	letter-spacing: 1px;
	background-color: #FFFFFF;
	opacity:1;
}
a:active {
	color:#00FFBC;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-variant: small-caps;
	font-size: small;
	letter-spacing: 1px;
	opacity:1;
}