/* ------------- FONTS ------------- */ 
@font-face {
  font-family: 'test';
  src: url('test.woff') format('woff');
}

/* ------------- STARTER ------------- */ 

*{
  margin:0;
  padding:0;
}

body {
	background-color: #252934;
	color: white;
}

/* ------------- TRANSITIONS AND SHADOWS ------------- */

a, a:visited, a:hover, .box .box-container:hover, .box .box-container {
	-webkit-transition: all 150ms ease-in-out;
	-moz-transition: all 150ms ease-in-out;
	-ms-transition: all 150ms ease-in-out;
	-o-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;
}

.box .box-container:hover {
	-webkit-box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75);
	-moz-box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75);
	box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.75);
}

.container form, .box .box-container {
	-webkit-box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.25);
	-moz-box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.25);
	box-shadow: 4px 4px 15px -5px rgba(0,0,0,0.25);
}

/* ------------- CONTAINER STYLING ------------- */ 

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 100vh;
}

/* ------------- LINK STYLING ------------- */ 

a, a:visited {
	color: #6C7789;
}

a:hover {
	color: white;
}

a, a:visited, a:hover {
	text-decoration: none;
	
}

.box .box-container .link {
	font-family: 'test';
	font-size: 28px;
	padding: 20px 0 0 15px;
	text-align: left;
}

/* ------------- TIME STYLING ------------- */ 

.container .time {
	font-family: 'test';
	font-size: 120px;
	margin-bottom: 20px;
}

/* ------------- BOX STYLING ------------- */ 

.box {
	width: 950px;
}

.box .box-container {
	background-color: #2E3441;
	width: 200px;
	height: 220px;
	float: left;
	border-radius: 5px;
}

.box .box-container:not(:last-child) {
	margin-right: 50px;
}

.box .box-container .heading {
	margin: 25px 0 9px 15px;
	font-family: 'test';
	font-size: 33px;
	text-align: left;
}

/* ------------- SEARCH STYLING ------------- */ 

.container form {
	background-color: #2E3441;
	border-radius: 5px;
	width: 450px;
	margin-bottom: 80px;
}

.container form .search-field, .container form .search-submit {
	background: none;
	outline: none;
	border: none;
	line-height: 40px;
	position: relative;
}

.container form .search-field {
	width: 89%;
	padding-left: 15px;
	color: white;
	font-size: 30px;
	font-family: 'test';
	bottom: -1px;
}

.container form .search-submit {
	width: 10%;
	top: 5px;
}

.container form .search-submit:hover {
	cursor: pointer;
}

.container form .search-submit::before {
	background-image:url(google1.svg);
	background-position:center center;
	fill: white;
	content:"";
	width:23px;
	height:23px;
	position:absolute;
	right:15px;
	bottom: -3px;
}

/* ------------- WAVE ANIMATION ------------- */ 

.wave-container .wave{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:100px;
	background:url('wave.svg');
	background-size:990px 100px;
	background-repeat: repeat-x;
}

.wave-container .wave.wave1{
	animation:animate 30s linear infinite;
	z-index:1000;
	opacity:1;
	animation-delay:0s;
	bottom: 0;
}
.wave-container .wave.wave2{
	animation:animate2 15s linear infinite;
	z-index:999;
	opacity:0.5;
	animation-delay:-5s;
	bottom: 10px;
}
.wave-container .wave.wave3{
	animation:animate 30s linear infinite;
	z-index:998;
	opacity:0.2;
	animation-delay:-2s;
	bottom: 15px;
	
}
.wave-container .wave.wave4{
	animation:animate2 5s linear infinite;
	z-index:997;
	opacity:0.7;
	animation-delay:-5s;
	bottom: 20px;
}
@keyframes animate{
	0%{
		background-position-x: 0;
	}
	100%{
		background-position-x: 990px;
	}
}
@keyframes animate2{
	0%{
		background-position-x: 0;
	}
	100%{
		background-position-x: -990px;
	}
}

/* ------------- MEDIA QUERY ------------- */ 

@media only screen and (max-width: 985px) {
	.box-container:nth-child(4), .box-container:nth-child(3) {
		margin-top: 50px;
	}
	.box .box-container:nth-child(2), .box .box-container:nth-child(4) {
		margin-right: 0;
	}
	.box {
		width: 450px;
	}  
}