@keyframes namecolor {
	to {    
		background-position: 200% center;
	}
}

body{
    font-family: 'Oswald', 'Arial', sans-serif;
    color: #9a918c;
    text-align: center;
    background-color: #343231;
}

a{
    color: #ffa200;
    font-weight: 200;
	text-decoration: none;
	font-size: 1.2rem;
}
	
	a span{
		border-bottom: 2px solid #ffa200;
		display: inline-block;
		line-height: 1;
		text-shadow:
		2px 2px #343231,
		2px -2px #343231,
		-2px 2px #343231,
		-2px -2px #343231;
	}

	a:active, a:focus{
		outline: 0;
	}

	a:hover:before{
		margin-right: 1.6rem;
	}
	
	a:hover:after{
		margin-left: 1.6rem;
	}
	
	a:before, a:after{
		font-size: 130%;
		color: #857d79;
		position: relative;
		top: 4px;
		transition: margin-left .6s ease-in-out, margin-right .6s ease-in-out;
	}
	
	a:before{
		content: '[';
		margin-right: .8rem;
	}
	
	a:after{
		content: ']';
		margin-left: .8rem;
	}

h1{
    padding-top: 2em;
    font-size: 3em;
	background: linear-gradient(to right, #ff8a00 0%, #eb5b05 50%, #ffa200 75%, #ff8a00 100%); 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 200% auto;
	background-position: center center;
    font-weight: 500;
	animation: namecolor 6s alternate-reverse infinite; 
}

	.no-backgroundcliptext h1{
		background: none; 
		color: #ffa200;
	}
	
	h1:before, h1:after{
		font-size: 130%;
		position: relative;
		-webkit-background-clip: none;
		-webkit-text-fill-color: #9a918c;
		font-weight: 200;
		top: 4px;
		transition: margin-left .6s ease-in-out, margin-right .6s ease-in-out;
	}
	
	h1:before{
		content: '[';
		margin-right: .8rem;
	}
	
	h1:after{
		content: ']';
		margin-left: .8rem;
	}

p{
    margin: 1em auto;
}

@media (min-width: 768px) { 
    body{
        font-size: 1.6em;
    }
}

@media (min-width: 992px) { 
    body{
        font-size: 1.8em;
    }
}

@media (min-width: 1200px) { 
    body{
        font-size: 2em;
    }
}