header{
   position: relative;
   width:100%;
   top:0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   /*background-color: #031203;*/
   padding: 10px 20px;
}
header .navbar .site_title{
   font-family: "Playwrite PL", cursive;
   font-optical-sizing: auto;
   font-size: 3rem;
   font-weight: 800;
   text-decoration: none;
}
header li{ list-style: none; }
header a{  text-decoration: none; }
header .current_menu_item{
   font-size:110%;
   font-style: unset;
   box-shadow: inset 5em 1em #031203;
}


header .navbar .site_title a:active, & .site_title a:visited  {
   text-decoration: none;
}

header .navbar .navbar-menu {
   display: flex;
   margin: 0;
}
header .navbar .navbar-menu .navbar-item {
   margin: 0 10px;
   padding-left: 1rem;
}

@media (max-width: 960px){
   display: none;
   flex-direction: column;
   width: 100%;

   &.active {
      display: flex;
   }

   & .navbar-item {
      margin: 10px 0;
      text-align: center;
   }
}
header .navbar-toggle {
   display: none;
   flex-direction: column;
   cursor: pointer;
}
header .navbar-toggle  .bar1, & .bar2, & .bar3, & .bar4 {
   height: 2px;
   margin: 4px 0;
   transition: all 0.3s ease;
}
header .navbar-toggle  .bar1{
   display:inline-block;
   width: 25px;
}
header .navbar-toggle  .bar2{
   display:inline-block;
   width: 20px;
}
header .navbar-toggle .bar3{
   display:inline-block;
   width: 15px;
}
header .navbar-toggle  .bar4{
   display:inline-block;
   width: 10px;
}

@media (max-width: 768px){
   display: flex;
   align-self: baseline;

   header .active span:nth-child(1){
      transform: rotate(45deg) translate(10px, 5px);
      width: 20px;
   }
   header .active  span:nth-child(2){
      opacity: 0;
   }
   header .active  span:nth-child(3){
      transform: rotate(-45deg) translate(8px, -5px);
      width: 20px;
   }
   header .active  span:nth-child(4){
      opacity: 0;
   }
}
header p{
   margin: 0;
}