/* Page Styles */

* {
	box-sizing: border-box;
}

body {
	font-size: 1.4em;
	font-family: "Varela Round", sans-serif;
	font-weight: bold;
	color: #6e859c;
	padding: 0;
	margin: 0;
	background: #126969;
}

.search-box {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2f3640;
	height: 40px;
	padding: 10px;
}

.search-box:hover > .search-text {
	width: 240px;
	padding: 0 6px;
}

.search-btn {
	color: #126969;
	float: right;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	background: #2f3640;
}

.search-text {
	border: none;
	background: none;
	outline: none;
	float: left;
	padding: 0;
	color: white;
	font-size: 16px;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
	-o-transition: 0.4s;
	line-height: 20px;
	width: 0;
}

.grid {
	margin: 100px auto;
}