@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/violetspace.gif") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter:blur(0);
}

body {
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
}
	
	#currentgrade{
		position:fixed;
		width:100%;
		height:100%;
		top:0px;
		left:0px;
		background-color:#ce73ff;
		mix-blend-mode:color;
		opacity:.1;
		z-index:-1;
		transition: background-color 2.5s ease-in-out;
	}

#utopiabg{
	position:fixed;
	top: 0px;
	left: 0px;
	width:100%;
	opacity:0;
	transition: opacity 1s ease-in-out;
	z-index: -50;
}

#utopia { 
	position: fixed; 
	visibility: visible; 
	left: 73%; 
	top:55%;  
	color:#ffffff;	 
	z-index:99;
}

#utopia:hover + #utopiabg{
	opacity: 1;
}


#current{
	
}


.utopiavectors{
	
	
}

#metamorabg{
	position:fixed;
	top: 0px;
	left: 0px;
	width:100%;
	opacity:0;
	transition: opacity 1s ease-in-out;
	z-index: -50;
}

#metamora { 
	position: fixed; 
	visibility: visible; 
	left: 74%; 
	top:60%; 
	z-index: 1; 
	color: #ffffff;
z-index:99;}

#metamora:hover + #metamorabg{
	opacity: 1;
}

#gefiltefishbg{
	position:fixed;
	top: -100px;
	left: 0px;
	width:100%;
	opacity:0;
	transition: opacity 1s ease-in-out;
	z-index: -50;
}


#gefiltefish { 
	position: fixed; 
	visibility: visible; 
	left: 77%; 
	top: 65%; 
	z-index: 1; 
	color: #ffffff;
z-index:99;}

#gefiltefish:hover + #gefiltefishbg{
	opacity: 1;
}


#eyeballsbg{
	position:fixed;
	top: 0px;
	left: 0px;
	width:100%;
	opacity:0;
	transition: opacity 1s ease-in-out;
	z-index: -50;
}

#eyeballs { 
	position: fixed; 
	visibility: visible; 
	left: 80%; 
	top: 70%; 
	z-index: 1; 
	color: #ffffff;
z-index:99;}

#eyeballs:hover + #eyeballs{
	opacity: 1;
}



#shortsbg{
	position:fixed;
	top: 0px;
	left: 0px;
	width:100%;
	opacity:0;
	transition: opacity 1s ease-in-out;
	z-index: -50;
}

#shorts { 
	position: fixed; 
	visibility: visible; 
	left: 83%; 
	top: 82%; 
	z-index: 1; 
	color: #ffffff;
z-index:99;}

#shorts:hover + #eyeballs{
	opacity: 1;
}


#patterndbg{
	position:fixed;
	top: 0px;
	left: 0px;
	height:100%;
	opacity:0;
	transition: opacity 1s ease-in-out;
	z-index: -50;
}

#patternd { 
	position: fixed; 
	visibility: visible; 
	left: 82%; 
	top:76%; 
	z-index: 1;
	color: #ffffff;
z-index:99;}

#patternd:hover + #patterndbg{
	opacity: 1;
}

.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(0px);
}

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

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


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

.bio{
	width: 400px;
    border: 0;
    padding: 0;
    margin: 0;
	text-align: left;

}

.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: 16px;
	letter-spacing: 1px;
	opacity:.7;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-variant: small-caps;
	font-size: 16px;
	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: 16px;
	letter-spacing: 1px;
	background-color: #D07EFF;
	opacity:1;
}
a:active {
	color:#00FFBC;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-variant: small-caps;
	font-size: 16px;
	letter-spacing: 1px;
	opacity:1;
}