.header {
  background: linear-gradient(
    -0.5deg,
    var(--theme-primary-1-dark),
    var(--theme-primary-1-light),
    var(--theme-primary-1-dark)
  );

  max-width: calc(100vw - 16px);

  border-bottom: 2px var(--theme-primary-1-light) solid;
  padding-left: 16px;
}

#navbar {
  flex-grow: 1;

    & nav {      
      & ul {
        display: flex;
        flex-wrap: wrap;

        width: 100%;

        border-radius: 4px;

        margin: 0 0 0 0;
        padding: 0 0 0 0;

        list-style: none;

        & li {
          display: block;
          flex-grow: 1;
          position: relative;
          
          letter-spacing: 0.1rem;
          font-size: 1.2rem;
          vertical-align: bottom;

          padding: 0 0 0 0;

          & a {
            display: flex;
            flex-grow: 1;
            align-items: center;

            min-width: 8rem;
            height: 48px;
        
            border-radius: 16px;
            
            color: var(--theme-white);
            text-decoration: none;
            font-family: "BW";
            font-size: 32px;

            padding: 0 1.25rem 0 1.45rem;
            transition: linear 0.1s;

            &:hover {
              transition: linear 0.25s;
              background-color: rgba(255, 0, 220, 0.30);
            }
          }
          
          & .dropdown {
            display: none;
            position: absolute;
            z-index: 50;  
            flex-grow: 1;
            flex-direction: column;

            width: 99%;
            
            transform: translate(-5px, 1.5px);
            border: solid 3px var(--theme-primary-1-dark);
            border-top: 0;

            background: black;

            & a {
              display: flex;
              flex-grow: 1;

              border-top: solid 3px var(--theme-primary-1-base);  
              border-radius: 0px;
              
              background: radial-gradient(
                var(--theme-gray-base),
                var(--theme-gray-dark)
              );

              &:hover {
                transition: linear 0.25s;

                background: radial-gradient(
                  rgb(141, 68, 131),
                  rgb(61, 30, 57)
                );

                background-color: rgba(255, 0, 220, 0.30);
              }

              &:last-child {
                border-bottom-left-radius: 16px;
                border-bottom-right-radius: 16px;
              }
            }

            &:last-child {
              border-bottom-left-radius: 16px;
              border-bottom-right-radius: 16px;
            }
          }
          
          &:hover .dropdown {
            display: flex;
          }
        } 
      }
    }
}