/* === [IMPORTS] === */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:600&display=swap');

/* === [GLOBAL] === */
body {
	margin: 0;
	position: fixed;
}

canvas {
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#footer {
	position: absolute;
	display: flex;
	align-items: center;
	right: 4vw;
	bottom: 5vh;
	user-select: none;
	z-index: 10;
}

.footers {
	font-weight: 600;
	display: block;
	color: #e4e5e6;
	font-size: 14px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 1.1px;
	user-select: none;
	margin: auto 5px;
	z-index: 10;
}

a.footers {
	pointer-events: all;
}

#twitter {
	display: block;
	height: 16px;
	aspect-ratio: 1;
	background-color: #e4e5e6;
	mask-image: url(../images/twitter.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url(../images/twitter.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

#mastodon {
	display: block;
	height: 16px;
	aspect-ratio: 1;
	background-color: #e4e5e6;
	mask-image: url(../images/mastodon.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url(../images/mastodon.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

#github {
	display: block;
	height: 16px;
	aspect-ratio: 1;
	background-color: #e4e5e6;
	mask-image: url(../images/github.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url(../images/github.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}