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

body {
  font-family: 'Century Gothic', sans-serif;
}

header {
	width: 100%;
	padding: 0px;
	color: white;
	text-align: center;
	background: #0627ef;
}

nav ul {
	text-align: center;
	list-style: none;
	overflow: hidden;
	background-color: #3394CC;
}

ul li {
  display: inline-block;
  padding: 20px;
  transition: all ease-in-out 250ms;
}

ul li:hover {
	background-color: #0066CC;
}

ul li a {
  color: white;
  text-decoration: none;
}

.hide {
  padding: 16px;
  font-size: 22px;
  background: #0627ef;
  color: white;
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  ul li {
    width: 100%;
    padding: 15px;
    text-align: left;
  }

  .hide {
    display: block;
  }

  nav ul {
  display: none;

  }
}