header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 10vh;
  font-size: 1.3em;
  margin: 0 10%;
  z-index: 99999999999999999;
}

#upButton {
  display: none;
  transition: .3s;
  position: fixed;
  bottom: 60px;
  right: 60px;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  background-color: #EEEEEE;
}
#upButton:hover {
  background-color: #AAAAAA;
}
#upButton svg {
  width: 60px;
  height: 60px;
}

#logo {
  display: flex;
  justify-content: center;
  transition: 0.3s;
  display: flex;
  border: 2px solid white;
}
#logo:hover {
  border-bottom: 2px solid red;
}

header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* width: 30vw; */
}

.mainNavPnkt {
  transition: 0.3s;
  border: 2px solid white;
  margin: 1vw;
}
.mainNavPnkt:hover {
  border-bottom: 2px solid red;
}

.social {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 1.5em;
}

footer .social {
  height: 5em;
  justify-content: flex-end;
}
.social a {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 100%;
}
.social a svg {
    height: 1.3em;
    width: 3vw;
    transition: .3s;
}
.social a svg:hover {
    height: 1.5em;
}
footer .social {
  position: absolute;
  right: 10%;
  font-size: 1.3em;
}
footer .social a svg {
    height: 1.3em;
    width: 3vw;
}
footer .social a svg:hover {
    height: 1.5em;
}
.copyright {
  position: absolute;
  left: 10%;
  font-size: 1.3em;
  color: #888888;
  font-size: 1rem;
}
#bulitBy {
  margin-top: 1vh;
}
#bulitBy a{
  color: #AAAAAA;
}
footer {
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 1.3em;

  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  background-color: rgb(30, 30, 30);
  padding: 5vh 0;
}

#footNum {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.8em;
  color: #888888;
}
#footTg {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.8em;
  color: #888888;
}
#footTg svg, #footNum svg {
  margin: 0 1vw;
}
#footNum:hover, #footTg:hover {
  color: #AAAAAA;
}
@media screen and (max-width: 1200px) {
  #logo {
    width: 100%;
    font-size: 1.3em;
  }
}

@media screen and (max-width: 900px) {
  footer .copyright, footer .social  {
    position: relative;
  }
  footer .copyright {
    left: 0;
    text-align: center;
  }
  footer .social {
    right: 0;
    width: 50vw;
    justify-content: space-between;
  }
  footer .social a svg {
    width: 8vw;
  }
}

@media screen and (max-width: 800px) {
  header {
    justify-content: center;
  }
  .mainNavPnkt {
    width: 80%;
    margin: 1vh 10%;
    text-align: center;
  }
  .social {
    justify-content: space-around;
    width: 100%;
    height: auto;
  }
  .social a {
    padding: 10%;
  }
  .social a svg {
      width: 8vw;
      transition: .3s;
  }


}