/* Background */
html {
	background-color: #030325;
	animation-name: bgChange;
	animation-duration: 15s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
	animation-delay: 2s;
	overflow: hidden;
}

@keyframes bgChange {
	0% {background-color: #030325;}
	100% {background-color: #002936;}
}

#particles {
    position: absolute;
    z-index: -1;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
}

/* Header */
#header {
	color: #FFFFCC;
	text-align: center;
	white-space: nowrap;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
}

h1 {
	font-family: 'Spectral', serif;
	font-weight: normal;
	font-size: 3.1rem;
	margin: 0;
}

/* Links container */
#links-container {
	margin-top: 1.5em;
	margin-bottom: 3em;
}

.button-common:hover {
	transition: 0.5s ease;
	color: #FFFFCC;
}

.button-common {
	color: #46C6F5;
}

.contact-links:hover {
	border-bottom: 1px solid #FFFFCC;
}

.contact-links {
	outline: none;
	padding: 0.8em;
	font-size: 1.2rem;
	font-family: 'Inconsolata', monospace;
	text-decoration: none;
}

/* Mobile layout adjustment */
@media (max-width: 550px) {
	
	h1 {
		transition: 0.5s;
		font-size: 13vw;
	}

	#links-container > a {
		display:block;
	}

	.showhide-button {
		display: none;
	}
}