header {
  display:          grid;
  border-radius:    1rem;
  text-align:       center;
  height:           6rem;
  /*min-height:       6rem;*/
  /*max-height:       6rem;*/
  background-image: linear-gradient(to bottom, var(--color-1), var(--color-3));
  color:            var(--color-2);
  font-family:      sans-serif;
  grid-template: "a b" 4rem / auto min-content;
  
  > h1 {
    /* The following two options make sure the text in the header
       is displayed above everything else. */
    /*position:   sticky;*/
    /*z-index:    99;*/
    
    display: inline-block;
    grid-area:  a;
    
    /*display:    inline-block;*/
    /*width: max-content; */
    margin:     0;
    font-size:  2.6rem;
    padding:    1rem;
    padding-left: 7rem;
    height:     4rem;
  }

  .icon {
    grid-area: b;
    display: inline-block;
    padding:1rem;
    text-align: right;
    /*position:   sticky;*/
    /*z-index:    1;*/
    top:        2rem;
    right:      2rem;
    height:     4rem;
    width:      4rem;
  }

  > nav {
    background-image: linear-gradient(to bottom, var(--color-1), var(--color-3));
    border-radius:    1rem;
    display:          block;
    
    text-align: left;
    
    position: fixed;
    z-index:  1;
    top:      0;
    left:     0;
    margin:   1rem;
    
    > .expand-button {
      /*z-index: 100;*/
      display:  flex;
      padding:  0.5rem;
      > * {
        padding:  0.5rem;
      }
      > img {
        order: 0;
        height:   4rem;
        width:    4rem;
      }
      > label {
        order: 1;
        display: none;
        color:          var(--color-2);
        text-align:     center;
        align-content:  center;
      }
    }
    
    > ul {
      display:    block;
      color:      var(--color-4);
      display:    none;
      margin:     0;
      padding:    0 1rem 1rem;
      list-style: none;
      > li:before {
        font-weight:    bolder;
        padding-right:  0.5rem;
        content:        '>';
      }
    }
  }
}