/* NAV *********************/
.fixed-nav-links, li{
  margin:0;
  padding:0;
} 

nav {
  position:sticky;
  top:0px;
  padding:0px;
  height:30px;
  display:flex;
  flex-direction:row-reverse;
  background-color:#f7786b;
  background-color:#564946;
  background-color:#242424;
  z-index:10;
}

/* NAV *********************/

/* buttons ************/
.dropdown-wrapper{
  width:30px;
  height:30px;
  position:relative;
}
.nav-button{
  background-color:#f7786b;
  background-color:#564946;
  background-color:#242424;
  width:30px;
  height:30px;
  padding-top:4px;
  z-index:20;
}
.nav-button:hover{
  background-color: rgb(87, 87, 87);
}

.bar-for-nav-button{
  margin-left:2px;
  margin-right:2px;
  width:26px;
  height:5px;
  background-color: #FDFFFC;
  margin-bottom:3px;
}
/*buttons********************/

/**NAV-links*****************/
.fixed-nav-links{
  list-style-type:none;
  transition:max-height 1.5s ease-out;
  position:absolute;
  top:30px;
  right:0px;
  width:120px;
  display:flex;
  flex-direction:column;
  list-style-type:none;
  justify-content: space-around;
  text-align:center;
  border-left:1px solid gray;
  border-bottom:1px solid gray;
  opacity:0;
}
.activated{
  pointer-events: auto;
  opacity: 1;/* 
  transform: scale(1); */
  transition: 1s;
}
.deactivated{
  pointer-events: none;
  opacity: 0;/* 
  transform: scale(1); */
  transition: 1s;
}

.fixed-nav-links li{
  background-color:#68CCD1;
  z-index:10;
  font-size:22px;
}

.fixed-nav-links li a{
  text-decoration: none;
}

.fixed-nav-links li:hover{
  opacity: .8;
}

.fixed-nav-links li a:hover{
}
/**NAV-links*****************/