body {
  margin: 0;
  overflow: hidden;
}

canvas {
  display: block;
}

#particles-js {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to right, #13547a, #80d0c7);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;

}

.page-navigation {
  list-style-type: none;
}
#menubar, #closebar {margin-top: 1rem;float: right; margin-right:1.5rem; cursor: pointer;}
.menulist { width: 100%; height: 100vh; z-index:2; position:relative; background-color:#fff; }
.menulist ul { padding:0; display:flex; flex-direction:column; background:#fff; margin-top:5vh; }
.menulist ul li { padding:5vh 0; text-align:center; background:#fff; z-index:2; border-bottom:1px solid #e5e5e5; } 
.menulist ul li a { text-decoration:none; color:#333; }
.menulist ul li a:hover { text-decoration:underline; }
.btn {

  cursor: pointer;
  margin: 15px;
  height: 10px;
  width: 10px;
  display: block;
  border-radius: 50%;
  background-color: gray
}

.btn:hover {
  background-color: white;
}



.section2 {
  height: 100vh;
  background-image: linear-gradient(to right, #a3bded, #6991c7);
  position: relative;



}

.section3 {
  height: 100vh;
  background-image: linear-gradient(to top, #48c6ef, #6f86d6);
  position: relative;

}

.content {
  width: 70%;
  position: absolute;
  margin-left: 15%;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-family: "Helvetica", sans-serif;

}

.logo {margin-top: 10px; margin-left: 20px; }

@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }

  #logo {
    width: 125px;
    height: 75px;
  }

  #menubar {
    width: 28px;
    height: 28px
  }

  #closebar {
    width: 28px;
    height: 28px
  }

}

@media screen and (min-width: 1000px) {
  html {
    font-size: 28px;
  }

  #logo {
    width: 150px;
    height: 100px;
  }

  #menubar {
    width: 40px;
    height: 40px
  }

  #closebar {
    width: 35px;
    height: 35px
  }

}

.main {
  position: relative;
  height: 100vh;
}

.listclass {
  position: fixed;
  z-index: +1;
  top: 50%;
  right: 1.5rem;
}

.header {
  position: fixed;
  width: 100%;
  z-index: +1;
}

::-webkit-scrollbar {
  width: 0px;
}

#menubar:hover {
  transform: rotate(180deg);
  transition-duration: 1s;
}

#menulist {
  display: none;

}

#closebar:hover {
  transform: rotate(180deg);
  transition-duration: 1s;
}