@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/pelvis.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter:brightness(140%);

}

#utopia { 
	position: fixed; 
	visibility: visible; 
	right: 160px; 
	bottom: 270px; 
	z-index: 1; }

#metamora { 
	position: fixed; 
	visibility: visible; 
	right: 10%; 
	bottom: 40%; 
	z-index: 1; 
	color: darkslategray;}


#gefiltefish { 
	position: fixed; 
	visibility: visible; 
	right: 5%; 
	bottom: 31%; 
	z-index: 1; 
	color: darkslategray;}

#patternd { 
	position: fixed; 
	visibility: visible; 
	right: 20%; 
	bottom: 10%; 
	z-index: 1;
	color: darkslategray;}

.utopialogo{
 	position: fixed;
    top: 50px;
    left: 70px;
    border: 0px;
	z-index: 2;
	filter:blur(0px);


}

.cryinghiheels{
 	position: fixed;
    top: -40px;
    left: 0px;
    border: 0px;
	z-index: -1;
	
}

.wellscape{
 	position: fixed;
	width:"100%";
    top: 0px;
    left: 0px;
    border: 0px;
	z-index: -2;
	mix-blend-mode: multiply;
	opacity: 0.85;
	filter:blur(1px);
}

.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: .7;

}

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

#metamoratitle{
	position:absolute;
	top:360px;
	right:160px;
	color: #00F5FF;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-size: 30px;	
	letter-spacing: 16px;
	z-index: 99;
	opacity: .3;
	transition: color 3s ease-in-out, opacity 3s ease-in-out, letter-spacing 3s ease-in-out;
	
}

#metamoratitle:hover{
	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;
	
}


#metamoratitle:hover + #froms{
	opacity: .13;
	mix-blend-mode: screen;
}

#froms{
	position:fixed;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
	opacity: 0;
	
	transition: opacity 1.5s ease-in-out;
	z-index: -1;
	filter: blur(1px);
}


h1{
	color: #FFFFFF;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-size: small;
	font-variant: small-caps;
	letter-spacing: 11px;
	padding-left:90px;
}

#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: .25;
	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;
}