*{
  margin: 0px ;
  padding: 0px ;
  box-sizing: border-box ;
}
h1{
  margin: 0px;
}
nav h2 {
  color: whitesmoke;
}
/* these are the theme customizations */
/* .nav-links{
  background-color: white;
} */
@media(max-width: 768px){
  .nav-links{
    background-color: #2a2a2a;
    z-index: 10;
    overflow-x: hidden;
  }
}
.active{
  color: red !important; 
}
.nav-links > li > a:hover{
  color: red;
  text-decoration: none;
}
.nav-links li a{
  color: whitesmoke;
  /* background-color: blue; */
  padding: 1.5rem;
}

/* .nav-links li a:hover {
  background-color: #3a3a3f;
} */



nav{
  background-color: #2a2a2e;
}
nav .logo {
  margin-top: 1rem;
}



/* end theme customizations and begin the stuff */

nav a:hover {
  text-decoration: none;
}

#toggler {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  border: solid 2px whitesmoke;
  padding: 3px;
  border-radius: 2px;
}
.patty {
  width: 15px;
  height: 1px;
  background-color: whitesmoke;
}
nav .container{
  display: flex !important;
  justify-content: space-between;
  align-items: center !important;
  min-height: 10vh;
  
  list-style: none;
}
@media (min-width: 991px){
  .nav-links{
    margin-top: 20px;
  }
}

.logo{
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
}
nav ul {
  list-style: none;

}

.nav-links{
  display: flex;
  /* margin-top: 19px; */
  width: max-content;
  justify-content: space-around;
  /* background-color: lightblue; */
  background-color: #2a2a2e;
  font-weight: bold;
  align-items: center;
  z-index: 10;
}

#toggler{
  display: none;
}
@media (max-width: 991px){
  html{
    overflow-x: hidden !important;
  }

  body{
    overflow-x: hidden !important;
  }
  .nav-links{
    position: fixed;
    right: 0px;
    top: 10vh;
    height: 90vh;
    flex-direction: column;
    justify-content: space-around;
    
    align-items: center;
    width: 60vw; 
    transform: translate(100%);
    transition: transform 0.5s ease-in;
    /* transition: ease-in 0.5s; */
    overflow-x: hidden;
  }
  /* .nav-links li a{
    background-color: teal;
    display: inline-block;
    padding-right: 100%;
    padding-left: 100%;
  } */
  .nav-links li{
    opacity: 0;
    font-weight: bold;
  }
  #toggler{
    display: block;
  }

}

.nav-active{
  transform: translateX(0%);
}

/* animation for nav */
@keyframes navLinkFade{
  from{
    opacity: 0;
    transform: translateX(50px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}

/* for the full code with rotatey burger menu go to
 https://www.codeply.com/p/hVa3gv9Umw */