html {
	color: #ECF0F1;
	border-top: 10px solid #51287a;
}

body {
    margin: 0 auto;
}

.title {
	color: white;
}

a {
	 color: rgba(255,255,255,0.4);;
	 text-decoration: none;
}

nav {
	font-size: 9pt;
}

nav a {
	color: #CCC;
}

footer p {
	color: #929597;
}

#logo {
	width: 300px;
    position: relative;
    min-height: 300px;
	
    background: linear-gradient(200deg, #663399, #38135d, #51287a);
    background-size: 600% 600%;
	animation: brandex 5s ease infinite;
		
	margin: 10rem auto;
	text-align: left;
	vertical-align: bottom;
	
}

@keyframes brandex { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#logo h1 {
    position: absolute;
	padding: 10px 15px;
	margin: 0;
    bottom: 0;
    left: 0;
	word-spacing: 100vw;
}

header {
    text-align: center;
}

footer {
    font-size: 8pt;
	position: fixed; 
	bottom: 0;
	left: 50%;
	width: 100%;
	text-align: center;
	transform: translate(-50%, 0);
}

header h1 {
    filter: drop-shadow(0 0 5px #666);
}

#logo img {
    -webkit-filter: drop-shadow(0 0 5px black);
    filter: drop-shadow(0 0 5px black);
}

.main article {
	background-color: rgba(255,255,255,0.1);
}