﻿html {
	height: 100%;
	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
	overflow: hidden;
}
body {
	font-family: Consolas;
	background-color: rgba(0, 0, 0, 0.90);
	color: #ffffff;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
.socialmedia {
	margin-top: 1%;
}
.socialmedia .facebook{
	margin-left: 3px;
}

a {
	font-size: 20px;
	margin-left: -10px;
}
a:link{
	text-decoration: none;
	color: #cdcdc5;
}
	a:visited {
		text-decoration: none;
		color: #cdcdc5;
	}
.emoticon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

	.emoticon .olho {
		font-size: 160px;
		margin-bottom: -60px;
		line-height: 140px;
		letter-spacing: 15px;
	}

	.emoticon .boca {
		font-size: 100px;
		margin-top: -60px;
		margin-left: -10px;
	}

.container {
	text-align: center;
	position: absolute;
	top: 30%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: inline-block;
}

	.container .aberation {
		color: rgba(255,255,255,0);
		position: relative;
	}

		.container .aberation::before,
		.container .aberation::after {
			content: attr(data-title);
			position: absolute;
			top: 2px;
			left: -2px;
			right: 0;
			-webkit-animation-iteration-count: 1;
			animation-iteration-count: 1;
			-webkit-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
			mix-blend-mode: lighten;
		}

		.container .aberation::before {
			color: rgba(255,0,50,0.8);
		}

		.container .aberation::after {
			color: rgba(0,255,235,0.8);
		}

	.container:hover .aberation::before {
		-webkit-animation: bounceLeft ease-in 0.25s;
		animation: bounceLeft ease-in 0.25s;
	}

	.container:hover .aberation::after {
		-webkit-animation: bounceRight ease-in 0.25s;
		animation: bounceRight ease-in 0.25s;
	}

	.container p {
		color: #444;
		margin-top: 3vw;
		font-size: 2vw;
		font-family: 'Open Sans', sans-serif;
	}

@-webkit-keyframes bounceLeft {
	0% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		-webkit-filter: blur(0);
		filter: blur(0);
	}

	41% {
		-webkit-transform: translate(-0.5vw, 0px);
		transform: translate(-0.5vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	67% {
		-webkit-transform: translate(0.45vw, 0px);
		transform: translate(0.45vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	88% {
		-webkit-transform: translate(-0.2vw, 0px);
		transform: translate(-0.2vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	100% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		-webkit-filter: blur(0);
		filter: blur(0);
	}
}

@keyframes bounceLeft {
	0% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		-webkit-filter: blur(0);
		filter: blur(0);
	}

	41% {
		-webkit-transform: translate(-0.5vw, 0px);
		transform: translate(-0.5vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	67% {
		-webkit-transform: translate(0.45vw, 0px);
		transform: translate(0.45vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	88% {
		-webkit-transform: translate(-0.2vw, 0px);
		transform: translate(-0.2vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	100% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		-webkit-filter: blur(0);
		filter: blur(0);
	}
}

@-webkit-keyframes bounceRight {
	0% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		-webkit-filter: blur(0);
		filter: blur(0);
	}

	41% {
		-webkit-transform: translate(0.5vw, 0px);
		transform: translate(0.5vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	67% {
		-webkit-transform: translate(-0.45vw, 0px);
		transform: translate(-0.45vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	88% {
		-webkit-transform: translate(0.2vw, 0px);
		transform: translate(0.2vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	100% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		-webkit-filter: blur(0);
		filter: blur(0);
	}
}

@keyframes bounceRight {
	0% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		-webkit-filter: blur(0);
		filter: blur(0);
	}

	41% {
		-webkit-transform: translate(0.5vw, 0px);
		transform: translate(0.5vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	67% {
		-webkit-transform: translate(-0.45vw, 0px);
		transform: translate(-0.45vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	88% {
		-webkit-transform: translate(0.2vw, 0px);
		transform: translate(0.2vw, 0px);
		-webkit-filter: blur(1px);
		filter: blur(1px);
	}

	100% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		-webkit-filter: blur(0);
		filter: blur(0);
	}
}