html {
	font-size: 1em;
}

body {
	font-family: 'Poiret One';
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
}

canvas {
	display: block;
	z-index: -1;
	position: absolute;
	left: 0;
	top: 0;

	width: 100%;
	height: 100%;
}

.subtitle {
	font-size: 1rem;
}

.title {
	display: block;
	margin-top: 24px;
	text-decoration: none;
	font-weight: 700;
	font-size: 2rem;
	text-shadow: 2px 2px 1px #FF00FF, -2px -2px 1px #00FFFF;
	color: #ccc;
	animation-name: glitch;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-delay: 3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

section.content {
	padding-top: 80px;
	margin: 0 auto;
	width: 80%;
	font-size: 1em;
	/*border: 2px solid tomato;*/
}

@media (width <= 650px) {
	section.content {
		padding-top: 8px;
		margin: 0 16px;
		font-size: 0.8em;

		/*border: 2px solid green !important;*/
	}
}

section.content p {
	color: transparent;
	text-shadow: 0 0 1px rgba(255,255,255,1.0);

	font-weight: bold;
	font-style: italic;
	opacity: 0.2;
}

section.links {
	font-size: 1.5rem;
	color: #fafafa;
	display: block;
	position: fixed;
	top: 80px;
	right: 10%;
	width: 256px;
	/*border: 1px solid yellow;*/
}

@media (width <= 650px) {
	section.links {
		top: 8px;
		right: 4px;
		width: 128px;
		/*border: 2px solid green !important;*/
	}
}

section.links ul {
	list-style: none;
}

section.links li {
	margin-bottom: 1em;
}

section.links a {
	color: #fafafa;
	font-weight: bold;
	display: grid;
}

section.links span.blur {
	grid-column: 1;
	grid-row: 1;
	z-index: 1;
	filter: blur(0.2em);
}

section.links span.blur:hover {
	font-weight: bolder;
	filter: blur(0.6em);
}

section.links span.text {
	grid-column: 1;
	grid-row: 1;
	z-index: 2;
	pointer-events: none;
}

article {
	color: #dadada;
	text-shadow: 0 0 0.1em #dadada;

	font-family: monospace;
	/*font-size: 1rem;*/
	font-weight: normal;
	clear: both;
	padding-top: 4rem;

	width: 100%;
	display: block;
	white-space: pre-wrap;

	/* border: 1px solid tomato; */
}

article a {
	/* line-height: 1.5em; */
	color: #dadada;
	/* text-shadow: none; */
	text-decoration: none;
	/* text-decoration: underline; */
	/* text-decoration-color: #4d4d4d; */
}

article a:hover {
	text-decoration: underline;
}

h2 {
	color: #fafafa;
	text-shadow: 0 0 0.1em #dadada;
}

@keyframes glitch {
	0% {
		text-shadow: 2px 2px 1px #FF00FF, -2px -2px 1px #00FFFF;
	}
	20% {
		text-shadow: 2px 2px 1px #FF00FF, -2px -2px 1px #00FFFF;
	}
	21% {
		text-shadow: 4px 2px 1px #FF00FF, 2px -2px 1px #00FFFF;
	}
	22% {
		text-shadow: 2px 2px 1px #FF00FF, -2px -2px 1px #00FFFF;
	}
	99% {
		text-shadow: 2px 2px 1px #FF00FF, -2px -2px 1px #00FFFF;
	}
	100% {
		text-shadow: 4px 2px 1px #FF00FF, -2px -2px 8px #00FFFF;
	}
}

.left {
	float: left;
}

.right {
	float: right;
}

.logo {
	background-image: url('intfish.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 256px;
	height: 256px;
}

.humour {
	display: inline-block;
	width: 4.2em;
	/* border: 1px solid tomato; */
}

.humour span.secondary {
	display: none;
}

.humour:hover span.primary {
	display: none;
}

.humour:hover span.secondary {
	display: inline;
}

/* .humour:hover:before {
	content: "test"
} */
/* .humour .secondary {
	grid-column: 1;
	grid-row: 1;
	z-index: 1;
	color: red;
}

.humour .primary {
	grid-column: 1;
	grid-row: 1;
	z-index: 2;
	color: yellow;
}

.humour .primary:hover {
	display: none;
} */