.header{
  position: fixed;
  width: 100%;
  z-index: 1000;
}
header{
  height: 10vh;
  display: flex;
  align-items: center;
  position: relative;
}
#content{
  padding-top: 10vh;
}
.cover-mode{
  width: 45px;
  height: 20px;
  padding: 2px;
  position: relative;
}
.button-mode{
  height: 16px;
  width: 16px;
  border-radius: 50%;
  margin-left: 2px;
  animation: togglemodedark .3s 1;
}
.button-mode.on{
  height: 16px;
  width: 16px;
  border-radius: 50%;
  margin-left: 2px;
  animation: togglemode .3s 1;
  margin-left: 24px;
}
ul.cover-menu li{
  display: inline-block;
}
a.menu-item{
  font-size: 110%;
}
.toggle-button{
  margin-top: 1vh;
}
#bar1{
  animation: moveTop .3s 1;
}
#bar2{
  animation: moveMiddle .3s 1;
}
#bar3{
  animation: moveBottom .3s 1;
}
.menu-fix{
  margin-top: 15%;
}
#bar1.on{
  animation: goTop .3s 1;
  margin-top: 9px;
  transform: rotate(45deg);
}
#bar2.on{
  animation: goMiddle .3s 1;
  opacity: 0%;
}
#bar3.on{
  animation: goBottom .3s 1;
  margin-top: -10px;
  transform: rotate(-45deg);
}
.header .menu-responsive.on{
  animation: offRes .3s 1;
  margin-left: 0%;
}
.header .menu-responsive.off{
  animation: onRes .3s 1;
  margin-left: -100%;
}
.cover-mode{
  cursor: pointer;
}
@keyframes onRes{
  from{
    margin-left: 0%;
  } to {
    margin-left: -100%;
  }
}
@keyframes offRes{
  from{
    margin-left: -100%;
  } to {
    margin-left: 0%;
  }
}
@keyframes moveTop{
  from {
    margin-top: 9px;
    transform: rotate(45deg);
  } to {
    margin-top: 0;
    transform: rotate(0);
  }
}
@keyframes moveMiddle{
  from{
    opacity: 0%;
  } to {
    opacity: 100%;
  }
}
@keyframes moveBottom{
  from{
    transform: rotate(-45deg);
    margin-top: -9px;
  } to {
    margin-top: 0;
    transform: rotate(0);
  }
}
@keyframes goTop{
  from{
    transform: rotate(0);
  } to {
    margin-top: 9px;
    transform: rotate(45deg);
  }
}
@keyframes goMiddle{
  from{
    opacity: 100%;
  } to {
    opacity: 0%;
  }
}
@keyframes goBottom{
  from{
    transform: rotate(0);
  } to {
    margin-top: -10px;
    transform: rotate(-45deg);
  }
}
@keyframes togglemode{
  from{
    margin-left: 2px;
  }
  to{
    margin-left: 24px;
  }
}
@keyframes togglemodedark{
  from{
    margin-left: 24px;
  } to {
    margin-left: 2px;
  }
}

.header.dark header{
  transition: .5s;
  background-color: #03192e;
}
.header.dark h2 a{
  text-decoration: none;
  transition: .5s;
  color: #ffa84a;
  font-weight: bold;
  text-shadow: 2px 2px 10px #ffa84a;
}
.header.dark a.text-contact,
section.dark .text-contact{
  transition: .5s;
  background-color: #ffa84a;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: .5s ease;
}
.header.dark a.text-contact:hover,
section.dark .text-contact:hover{
  transition: .5s;
  filter: contrast(80%);
}
.header.dark .cover-mode{
  transition: .5s;
  background-color: #fff;
}
.header.dark .button-mode{
  transition: .5s;
  background-color: #ffa84a;
}
.header.dark a.menu-item{
  transition: .5s;
  color: #fff;
  text-decoration: none;
}
.header.dark a.menu-item:hover{
  transition: .5s;
  opacity: 80%;
}
.header.dark .bars{
  transition: .5s;
  width: 30px;
  height: 4px;
  background-color: #fff;
  margin-top: 2.2px;
  border-radius: 10px;
}
.header.dark .menu-responsive{
  transition: .5s;
  height: calc(100vh - 10vh);
  width: 100%;
  top: 10vh;
  background-color: #03192e;
  font-size: 120%;
  color: #fff;
}



.header.light header{
  transition: .5s;
  background-color: #ffffff;
}
.header.light h2 a{
  text-decoration: none;
  transition: .5s;
  color: #35bab2;
  font-weight: bold;
  text-shadow: 2px 2px 10px #35bab2;
}
.header.light a.text-contact,
section.light .text-contact{
  transition: .5s;
  background-color: #35bab2;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: .5s ease;
}
.header.light a.text-contact:hover,
section.light .text-contact:hover{
  transition: .5s;
  filter: contrast(80%);
}
.header.light .cover-mode{
  transition: .5s;
  background-color: #878787;
}
.header.light .button-mode{
  transition: .5s;
  background-color: #fff;
}
.header.light a.menu-item{
  transition: .5s;
  color: #878787;
  text-decoration: none;
}
.header.light a.menu-item:hover{
  transition: .5s;
  opacity: 80%;
}
.header.light .bars{
  transition: .5s;
  width: 30px;
  height: 4px;
  background-color: #03192e;
  margin-top: 2.2px;
  border-radius: 10px;
}
.header.light .menu-responsive{
  transition: .5s;
  height: calc(100vh - 10vh);
  width: 100%;
  top: 10vh;
  background-color: #35bab2;
  font-size: 120%;
  color: #fff;
}
.header.light .menu-responsive a{
  transition: .5s;
  color: #000;
}