<div>VICELAND</div>

@import "bourbon";
@import "neat";

$base-duration: 200ms;

// Colors
$color-1: #E91E63;
$color-2: #03A9F4;
$color-3: #2ecc71;
$black: #000;

// Breakpoints
$sm: new-breakpoint(min-width 320px);
$med: new-breakpoint(min-width 768px);
$lg: new-breakpoint(min-width 1024px);

*, *:before, *:after {
	box-sizing: border-box;
	outline: none;
}

html {
	font-family: 'Helvetica', sans-serif;
	font-size: 16px;
	font-smooth: auto;
	font-weight: bold;
	line-height: 1.5;
	color: $black;
}

body {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	// background-color:darken($color-1, 4%);
}

div {
	font-size: 108px;
	
	
		
	&:hover {
		&:before, &:after{
			position: absolute;
			content: 'VICELAND';
			transform: translate(-50%,-50%);
			opacity: 0.8;
			z-index: 1;
		}

		&:before {
			top: 49.5%;
			left: 49.5%;
			color: rgba($color-1,0.8);
			animation: distort1 $base-duration linear infinite;
		}

		&:after {
			top: 50.5%;
			left: 50.5%;
			color: rgba($color-2,0.8);
			animation: distort2 $base-duration linear infinite;
		}
	}
	
	@keyframes distort1 {
		0%    { top: 49.5%; left: 49.5%; }
		12.5% { top: 49.5%; left: 50%; }
		25%   { top: 49.5%; left: 50.5%; }
		37.5% { top: 50%; left: 50.5%; }
		50%   { top: 50.5%; left: 50.5%; }
		62.5% { top: 50.5%; left: 50%; }
		75%   { top: 50.5%; left: 49.5%; }
		87.5% { top: 50%; left: 49.5%; }
		100%  { top: 49.5%; left: 49.5%; }
	}
	
	@keyframes distort2 {
		0%    { top: 50.5%; left: 50.5%; }
		12.5% { top: 50%; left: 50.5%; }
		25%   { top: 49.5%; left: 50.5%; }
		37.5% { top: 49.5%; left: 50%; }
		50%   { top: 49.5%; left: 49.5%; }
		62.5% { top: 50%; left: 49.5%; }
		75%   { top: 50.5%; left: 49.5%; }
		87.5% { top: 50.5%; left: 50%; }
		100%  { top: 50.5%; left: 50.5%; }
	}
}