/*TOP BAR*/
header.top-bar{
	background: url("https://www.transparenttextures.com/patterns/stardust.png"),
	linear-gradient(
	240deg,
	rgba(164,88,255,1) 0%,
	rgba(53,68,255,1) 40%,
	rgba(10,47,158,1) 80%
	);
	color:gold;
	padding:1rem 4rem;
	text-align:center;
	z-index:2;
	position:fixed;
	top:0;
	width:100%;
	height:36px;
	display:flex;/*this function makes the text in the header fit inside it*/
	justify-content:space-between;/*this just adds space between the text so it doesnt look like eveything i stuck together*/
	align-items:center;
}
header.top-bar p{
	/*line-height:36px;
	margin-bottom:0;*/
}

header.top-bar a{
	color:white;
}
/*HERO*/
.hero{
	height:100vh;
	background: url(https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80);
	background-position:center;
	background-size:cover;
	perspective: 400px;
}

.hero-content{
	position:absolute;
	top:40%;
	left:30%;
	transform:  translate(-50% -50%);
	z-index:2;
	text-align:center;
	width:50%;
	transition: all 0.3s cubic-bezier(.75,-0.5,1,1.75);
	color:#050060;
	transform-style: preserve-3d;
}
.hero-content:hover{
	cursor:pointer;
	transform: scale(1.1) translate(-5%,-20%) rotateY(15deg) rotateX(-10deg);
	
}
.hero-content:hover .site-under-title{
	transform: rotateY(-30deg) rotateZ(-5deg) translate(-20%,0) scale(1.1);
}
.hero-content span{
	display:inline-block;
}
.hero-content:hover span{
	animation-name:wiggle;
	animation-duration:0.3s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
}
@keyframes wiggle{
	0%{
		transform:translate(0,0) rotate(-5deg);
		text-shadow: 10px 10px 3px rgba(0,0,0,0.1);
	}
	50%{
		transform:translate(0,10px) rotate(5deg);
		text-shadow: -10px -10px 3px rgba(0,0,0,0.1);
	}
	100%{
		transform:translate(0,0) rotate(-5deg);
		text-shadow: 10px 10px 3px rgba(0,0,0,0.1);
	}
}
.space{
	width:2rem;
}
.hero a:visited,
.hero a:hover,
.hero a:focus,
.hero a:active{
	color:purple;
}
.site-subtitle{
	padding: 2rem ;
	margin: 1rem auto ;
	width: 80%;
}
.site-subtitle:before{
	content:'';
	position: absolute;
	top:0;
	left:0;
	right:0;
	height:2px;
	background: white;
	
}
.site-subtitle:after{
	content:'';
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	height:2px;
	background: white;
	
}