@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: 'Nolan';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/312465/Nolan-Regular.ttf') format('truetype');
}

$background-color: #edeff0;

$bluegrey-50: #ECEFF1;
$bluegrey-100: #CFD8DC;
$bluegrey-200: #B0BEC5;
$bluegrey-300: #90A4AE;
$bluegrey-400: #78909C;
$bluegrey-500: #607D8B;
$bluegrey-600: #546E7A;
$bluegrey-700: #455A64;
$bluegrey-800: #37474F;
$bluegrey-900: #263238;

*, *:before, *:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	padding: 20px;
	display: flex;
	min-height: 80vh;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background-color: #edeff0;
	font-family: 'Nolan', sans-serif;
}

.logo {
	top: 150px;
	width: 300px;
	margin-top: -50px;
	position: relative;
	animation-name: dips;
	animation-duration: 12s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
}

.wave-wrapper {
	position: relative;
	
	animation-name: wave;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
}

.wave {
	width: 340px;
	position: relative;
}

.cover-up {
	height: 95px;
	margin-top: -6px;
	background-color: #edeff0;
}

@keyframes dips {
	0% {
		transform: rotate(-5deg);
  }

  10% {
		transform: translateY(-3px) rotate(5deg);
  }
	
	20% {
		transform: translateY(-10px) rotate(3deg);
	}
	
	30% {
		transform: rotate(-5deg);
	}

  50% {
		transform: translateY(-10px) rotate(5deg);
  }
	
	60% {
		transform: translateY(-5px) rotate(3deg);
	}
	
	70% {
		transform: rotate(-5deg);
	}
	
	80% {
		transform: translateY(-10px) rotate(5deg);
  }
	
	90% {
		transform: translateY(-25px) rotate(3deg);
	}
	
	100% {
		transform: rotate(-5deg);
	}
}

@keyframes wave {
	0% {
    transform: translateX(0);
  }
	
	20% {
    transform: translateX(10px);
  }

  60% {
    transform: translateX(0);
  }

	80% {
		transform: translateX(-10px);
	}
	
	100% {
		transform: translateX(0);
	}
}

.text {
	z-index: 5;
	margin-top: 5px;
	position: relative;
	color: $bluegrey-400;
}

.logo-text {
	width: 64px;
	margin-top: 10px;
}

.copyright {
	font-size: 12px;
	margin-top: 10px;
	color: $bluegrey-400;
}

.wave-break {
	width: 174px;
	margin-top: -2px;
}