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

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

#utopiatitle{
	width:400px;
	position:fixed;
	top:60px;
	left:100px;
	opacity:1;
}

#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: 20%; 
	font-size: 30px;
	top:40%;  
	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;
}

#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: 80%; 
	top:70%; 
	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: #7C00FF;
	text-decoration: none;
	font-family: "acid", arial;
	font-size: small;
	font-variant: small-caps;
	letter-spacing: 3px;
	line-height: 1.6;
}

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






#magi1{
	position:fixed;
	left:60%;
	top:40%;
	opacity:0;
	color: #ffffff;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-size: large;
	letter-spacing:normal;
	transition: opacity 5s ease-in-out, letter-spacing 20s ease-in-out, color 8s ease-in-out, filter 8s ease-in-out;
	z-index:99;
	filter: blur(10px);
}

#magi2{
	position:fixed;
	left:63%;
	top:47%;
	opacity:0;
	color: #ffffff;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-size: x-large;
	letter-spacing:normal;
	transition: opacity 9s ease-in-out, letter-spacing 20s ease-in-out, color 8s ease-in-out, filter 8s ease-in-out;
	transition-delay: 1s;
	z-index:99;
	filter: blur(20px);
}

#whence{
	position:fixed;
	left:55%;
	top:54%;
	opacity:0;
	color: #ffffff;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-size: small;
	letter-spacing:normal;
	transition: opacity 13s ease-in-out, letter-spacing 20s ease-in-out, color 8s ease-in-out, filter 8s ease-in-out;
	transition-delay: 2s;
	z-index:99;
	filter: blur(20px);
}

#window{
	position:fixed;
	left:75%;
	top:64%;
	opacity:0;
	color: #ffffff;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-size: large;
	letter-spacing:20px;
	transition: opacity 17s ease-in-out, letter-spacing 20s ease-in-out, color 8s ease-in-out, filter 8s ease-in-out;
	transition-delay: 4s;
	z-index:99;
	filter: blur(10px);
	
}

#appear:hover + #magi1 {
	opacity:.7;
	color:#FEBEFF;
	letter-spacing:20px;
	transition: opacity 3s ease-in-out, letter-spacing 15s ease-in-out, color 8s ease-in-out, filter 5s ease-in-out;
	transition-delay: 0s;
	filter: blur(0px);
}

#appear:hover ~ #magi2 {
	opacity:.7;
	color:#FEBEFF;
	letter-spacing:20px;
	transition: opacity 2s ease-in-out, letter-spacing 15s ease-in-out, color 8s ease-in-out, filter 4s ease-in-out;
	transition-delay: 4s;
	filter: blur(0px);
}

#appear:hover ~ #whence {
	opacity:.7;
	color:#FEBEFF;
	letter-spacing:4px;
	transition: opacity 3s ease-in-out, letter-spacing 15s ease-in-out, color 8s ease-in-out, filter 8s ease-in-out;
	transition-delay: 8s;
	filter: blur(0px);
}

#appear:hover ~ #window {
	opacity:.7;
	color:#FEBEFF;
	letter-spacing:44px;
	transition: opacity 3s ease-in-out, letter-spacing 15s ease-in-out, color 8s ease-in-out, filter 8s ease-in-out;
	transition-delay: 14s;
	filter: blur(0px);
}


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

.bio{
	width: 400px;
    border: 0;
    padding: 0;
    margin: 0;
	text-align: left;
	position:fixed;
	left:100px;
	top:340px;

}

.carder{
	opacity:.7;

}

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

a:link{
	color: #7C00FF;
	text-decoration: none;
	font-family: "caslonantique", arial;
	font-variant: small-caps;
	font-size: small;
	letter-spacing: 1px;
	opacity:.7;
}
a:visited {
	color: #7C00FF;
	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;
	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;
}