/* Header */

  #header {
    margin-top: 80px;
    > #logo-container {
      width: max-content;
      margin: auto;
      padding: 20vh 1em;

      > h1 {
        font-size: 77pt;
        display: inline-block;
        color: _palette(accent1);
        margin: 0 0 0 40px;

        &:first-child {
          color: _palette(accent2);
          margin: 0 0 0 10px;
        }
      }

      > #logo > img {
        height: 180pt;
        width: auto;
        display: inline-block;
        float: left;
      }
    }

        @include breakpoint('<=xlarge') {

        }

        @include breakpoint('<=large') {
          > #logo-container {

            > h1 {
              font-size: 60pt;
            }

            > #logo > img {
              height: 140pt;
            }
          }

        }

        @include breakpoint('<=medium') {
          margin-top: 60px;

          > #logo-container {
            padding: 20vh 0.5em;
          }
        }

        @include breakpoint('<=small') {

        }

        @include breakpoint('<=xsmall') {
          > #logo-container {

            > h1 {
              font-size: 40pt;
            }

            > #logo > img {
              height: 93pt;
            }
          }
        }

        @include breakpoint('<=xxsmall') {

        }

  }