/* Animations */
@keyframes logo {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(180deg)}
}

/* Styles */

header {
  width: 100%;
}

header .top-bar {
  background-color: #00D0AE;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
  width: 100%;
}


header .logo {
  height: 60px;
  width: 60px;
}

header .logo img {
  height: 60px;
  width: 60px;
}

header .logo img:hover {
  animation-name: logo;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

nav {
  height: 100%;
}

nav a {
  display: inline-block;
  text-decoration-line: none;
  color: white;
  padding: 10px 30px;
}

nav a:hover {
  background-color: #7EFFDE;
  border-radius: 5px;
}

header .banner {
  width: 100%;
}
header .banner img {
  width: 100%;
  vertical-align: top;
}


/* Responsive */
@media screen and (max-width:800px) {
  header .top-bar {
    flex-direction: column;
  }
  header .logo {
    margin-bottom: 15px;
  }
  nav a{
    padding: 10px;
    margin: 0;
  }
}