body {
  background-color: #2a9df4;
}

.navigation {
  display: flex;
  justify-content: space-between;
  height: fit-content;
  background-color: #152238;
}

.navigation h4 {
  padding-left: 5px;
  margin-top: 10px;
  float: right;
  color: white;
}

.navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navigation li {
  float: left;
}

.navigation li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navigation li a:hover {
  background-color: #111;
}

.active {
  background-color: #740874;
}

.hamburger-icon {
  display: none;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: rgb(238, 216, 216);
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

footer{
  position: relative;
  bottom: 0;
  margin-top: 2%;
  text-align: center;
  height: 1.5rem;
  width: 100%;
  color: white;
  background-color: #152238; 
}

footer span{
  font-weight: bolder;
}

footer p{
  display: inline;
}


@media screen and (max-width: 800px) {
  .hamburger-icon {
    display: flex;
  }

  .navigation {
    height: 40px;
    justify-content: flex-start;
    transition: height ease 1s;
  }

  .navigation h4 {
  padding-left: 5px;
  margin-top: 7px;
  margin-left: 7px;
  color: white;
}

  .hamburger-icon{
    margin-left: 10px;
  }

  .navigation li {
    /* display: none; */
    padding-right: 10px;
    float: none;
  }
}