@media screen and (max-width: 800px) {
  /* NavBar */
  #hamburger_menus {
    display: inline-block;
  }

  #hamburger_menus:hover {
    color: var(--pricol);
  }

  .navbar .navbar-nav {
    position: absolute;
    top: 100%;
    right: -100%;
    background-color: var(--whcol);
    border-radius: 0.4rem;
    box-shadow: 1px 1px 5px var(--tricol);
    width: 25rem;
    height: 100vh;
    transition: 0.3s;
  }

  .navbar .navbar-nav.active {
    right: 0;
  }

  .navbar .navbar-nav a {
    color: var(--silcol);
    display: block;
    margin: 1.5rem;
    padding: 0.5rem;
    font-size: 1.2rem;
  }

  .navbar .navbar-nav a::after {
    transform-origin: 0 0;
    transition: 0.2s;
  }

  .navbar .navbar-nav a:hover::after {
    transform: scaleX(1);
  }
}