body,html {
	height: 100%;
}

* {
	box-sizing: border-box;
}

body {
	background-image: url("../img/maskandswordv3.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-size: 60%;
	font-family: 'Raleway', sans-serif;
}

header {
	background-color: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

/* description */

.description {
	position: absolute;
	bottom: 30%;
	left: .1%;
	color: #c1c1c1;
	line-height: 1.5rem;
	font-size: 1rem;
	transform: rotate(270deg);
	-webkit-animation: glow 2.8s linear infinite;
}

@keyframes glow {
	0%{color: #c1c1c1;}
	25%{color: #9a9a9a;}
	50%{color: #436363;}
	60%{color: #000;}
	75%{color: #c1c1c1;}
	100%{color: #c1c1c1;}
}

.description h3 {
	margin: 0 0 .7rem 0;
	padding: 0;
}

.description h4 {
	margin: 0;
	padding: 0;
	font-size: 3.4rem;
	line-height: 2rem;
}

@media screen and (min-width:40rem) {
	
	.description {
		font-size: 1rem;
		transform: rotate(270deg);
		bottom: 33.5%;
		left: 68%;
		line-height: 2rem;
	}

	.description h4{
		font-size: 3.4rem;
	}	
}


@media screen and (min-width:80rem) {

	.description {
		left: 70%;
	}

}


/* quotes */

.quote {
	position: absolute;
	bottom: 53%;
	left: 10%;
}

.quote h1 {
	font-size: 2.3rem;
	margin: 0;
	padding: 0;
	font-family: 'Comfortaa', cursive;
}

.quote h3 {
	font-size: 1.2rem;
	padding: 0;
	margin: 0;
}

.quote h4 {
	font-size: 1.2rem;
	padding: 0rem 0rem 0rem 10rem;
	margin: 0;
}

@media screen and (min-width:40rem) {
	
	.quote {	
		bottom: 26%;
		left: 10%;
	}

	.quote h1 {
		font-size: 2rem;
	}

	.quote h3 {
		font-size: 1.5rem;
		margin: 0 0 1.5rem 0;
	}

	.quote h4 {
		font-size: 1.5rem;
		padding: 0rem 0rem 0rem 5rem;
		margin: 1.5rem 0 0 0;
	}

}

@media screen and (min-width:65rem) {

	.quote {
		left: 10%;
	}

	.quote h1 {
		font-size: 3.9rem;
	}

	.quote h3 {
		font-size: 2.3rem;
		margin: 0 0 2rem 0;
	}	

	.quote h4 {
		font-size: 2.3rem;
		padding: 1.7rem 0 0 15rem;
		margin: 0;
	}

}

/* links */

.links {
	position: absolute;
	bottom: 20%;
	left: 36%;
	background-color: rgba(255,255,255,.5);
	border-bottom: .3rem solid #5d7a89;
	padding: 0;
	width: 10rem;
}

.links li {
	list-style: none;
}

.links h2, .links p{
	padding: 0;
	margin: 0;
}

.links a {
	text-decoration: none;
	display: block;
}

.links a:hover h2,
.links a:hover p {
	color: #000000;
}

@media screen and (min-width:40rem) {

	.links {
		bottom: 24%;
		left: 53%;
	}

	.links a:hover h2,
	.links a:hover p {
		color: #BDBDBD;
	}

}

@media screen and (min-width:65rem) {

	.links {
		bottom: 24%;
		left: 81%;
	}

}