@media only screen and (max-width:960px){

/* styles for nav-bar */
#navbar{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index: 1;
  width:100%;
  display: flex;
  justify-content: space-around;
  align-items:center;
  height: 60px;
  background:var(--mainRed);
  /* opacity: 0.9; */
}
.navbar-center{
  display: flex;
  width:100%;
  justify-content: space-around;
  align-items: center;
}
#logo{
  color:var(--mainBlack);
  letter-spacing: var(--mainDarkBlue);
  font-size: 1.7rem;
  cursor: pointer;
  text-decoration:none;
}
.nav-link{
  list-style-type: none;
  display: inline-block;
  margin:10px;
  font-size:1.3rem;
  padding:.5em;
  transition:var(--mainTransition);
  border-radius:5px;
}
.nav-link:hover{
  background:var(--mainBlue);
}
.nav-link a{
  text-decoration:none;
  color:var(--mainWhite);
  letter-spacing: var(--mainSpacing);
}

/* styles for responsive nav bar */
.navigation{
  position: absolute;
  top:60px;
  background:var(--mainDarkBlue);
  width:100%;
  height: 50vh;
  display: flex;
  flex-direction:column;
  justify-content: space-around;
  align-items: center;
  transform:translateY(-150%);
  transition:var(--mainTransition);
  opacity: none;
}
.burger{
  width:45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  transition: var(--mainTransition);
}
.line1,.line2,.line3{
  width:35px;
  background:var(--mainGrey);
  height:5px;
  margin:2.5px;
  transition: var(--mainTransition);
}
.line2{
  align-self: flex-start;
  width:20px;
}
.toggle .line1{
  transform:rotate(-45deg) translate(-10px,6px);

}
.toggle .line2{
  opacity:0;
}
.toggle .line3{
  transform:rotate(45deg) translate(-10px,-6px);
}
.nav-active{
  transform:translateY(0%);
}
.navigation li{
  opacity:0;
}
@keyframes navLinkFade{
  from{
    opacity:0;
    transform:translateX(200px);
  }
  to{
    opacity:1;
    transform:translateX(0px);
  }
}
/* end of styles for responsive nav bar */
/* ============================== */
/* end of nav bar */
/* ================== */
  #welcome-section {
    height: 50vh;
  }
}