body {
  background-color: #262323;
}

header {
  position: fixed;
  margin-block: 15px;
  padding-inline: 15px;
  width: 100%;
  z-index: 1;

  #nav-container {

    nav.navbar {
      .container-fluid {
        display: flex;
        flex-flow: column;
        align-items: center;

        a {
          text-align: center;
          text-decoration: none;
        }

        #navbar-mobile-button {
          margin: 10px 10px 0 10px;
        }

        .navbar-collapse {
          margin-block: 10px;
          margin-inline: 10px;
        }

        #offcanvasNavbar {
          border-radius: 32px;

          .offcanvas-header {
            position: absolute;
            width: 100%;

            button {
              z-index: 1;
            }
          }

          .offcanvas-body {
            position: relative;

            li {
              display: flex;
              justify-content: center;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 500px) {
  header {
    #nav-container {
      nav.navbar {
        .container-fluid {
          flex-flow: row wrap;
          justify-content: space-between;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  header {
    #nav-container {
      #login-container {
        display: none;
      }

      #login-container-desktop {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        a {
          display: flex;
          align-items: center;
          text-decoration: none;
          font-size: 20px;

          svg {
            width: 22px;
            height: 22px;
          }
        }
      }

      #account-menu-mobile {
        display: none;
      }

      #account-menu-desktop {
        display: block;
      }
    }
  }
}