.account__button--container {
   padding: .5rem;
   color: #fafafa;
   background-color: #262d2b;
   z-index: 5;
}

.menu__container {
   list-style: none;
   padding: 1rem;
   margin: 1rem 0 0 0;
   height: 300px;
}

.main__menu {
   position: fixed;
   padding: 10px;
   top: 0;
   left: -100%;
   display: flex;
   flex-flow: column;
   width: 40%;
   height: calc(100% - 0px);
   background-color: #262d2b;
   transition: left .5s;
   z-index: 110;
   justify-content: space-between;
   box-shadow: 2px 2px 2px rgba(100, 100, 100, .7);
   user-select: none;
}

.main__menu--active {
   left: 0px;
}

.menu__container>ul {
   list-style: none;
   padding: 1rem;
   margin: 0;
   height: 300px;
}

.menu__container>ul li {
   position: relative;
   display: block;
   padding: .1rem;
}

.main__menu--btn {
   display: block;
   font-size: 1rem;
   color: #fafafa;
   height: 100%;
   text-decoration: none;
   margin: 2.5px;
   padding: 6px 5px;
   border: 1px solid var(--cL);
   border-width: 0 0 .5px 0;
   cursor: pointer;
}

.main__menu--sub {
   position: relative;
   top: 0;
   display: none;
   align-items: center;
   justify-content: center;
   flex-flow: column;
   background-color: rgb(107, 107, 117);
   z-index: 100;
   margin: .5rem 0;
   padding: 0;
   border-top: 1px solid rgba(93, 179, 159, 0.733);
   border-bottom: 1px solid rgba(93, 179, 159, 0.733);
}

.block {
   display: block !important;
}

.main__menu--sub>li {
   display: block;
   font-size: 1.2em;
   width: 100%;
   margin: .5rem 0;
   padding: 1rem 0;
   text-align: center;
}

.main__menu--arrow {
   margin-left: .4rem;
   display: inline-block;
   color: var(--cL);
}

.main__menu--userName {
   display: flex;
   padding: .5rem;
   flex-flow: column;
   justify-content: center;
   align-items: center;
   color: #27ff00;
   background-color: black;
   border-radius: .3rem;
}

svg {
   fill: #fff;
}

.main__menu--hamburger-raw {
   position: relative;
   width: 100%;
   height: 5px;
   margin-top: 3.5px;
   border-radius: 1px;
   background-color: var(--headerText2);
   transition: transform .4s, opacity .8s;
}

.main__menu--hamburger-active div:first-child {
   transform: translate(0, 8px) rotate(45deg);
}

.main__menu--hamburger-active div:nth-child(2) {
   opacity: 0;
}

.main__menu--hamburger-active div:last-child {
   transform: translate(0, -9.5px) rotate(-45deg);
}

.main__menu--hamburger {
   position: fixed;
   display: block;
   width: 30px;
   height: 30px;
   padding: 0 2px;
   top: 1rem;
   right: 2rem;
   align-content: center;
   border-radius: 3px;
   z-index: 120;
}

@media screen and (min-width: 1350px) {
   .main__menu {
      left: 0;
      top: 55px;
      height: calc(100% - 55px);
      width: 260px;
   }

   .main__menu--btn {
      display: inline-block;
      font-size: .97rem;
      color: var(--headerText2);
      border: 0;
      text-decoration: none;
      margin: 0;
      padding: .3rem;
      width: 100%;
      text-align: left;
      justify-content: center;
   }

   .main__menu--btn:hover {
      background-color: rgba(100, 100, 100, .5);
      border-radius: .2rem;
   }

   .main__menu--hamburger {
      display: none;
   }

   .menu__container>ul li {
      padding: .3rem;
   }

   .main__menu--sub>li {
      font-size: 1rem;
      margin: .2rem 0;
      padding: 0;
   }

   .main__menu--sub {
      display: none;
      position: relative;
      top: 0;
      transform: translate(0, .5rem);
      min-width: 6rem;
      width: auto;
      padding: 0;
      margin: 0 0 1rem 0;
      height: initial;
      border-radius: 3px;
      border-top: 1px solid rgba(93, 179, 159, 0.733);
      border-bottom: 1px solid rgba(93, 179, 159, 0.733);
   }

   .main__menu--userName {
      color: #fff;
      background-color: initial;
      border-radius: initial;
      padding: .7rem;
   }

}