header {
  background-color: #b52828;
  width: 100%;
  padding: 0 5rem 0 15rem;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
  text-shadow: rgb(40, 0, 0) 3px 3px 3px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  h1 {
    font-size: 2em;
    font-family: "Century Schoolbook", "Palatino Linotype", Georgia, Times, serif;
    font-weight: normal;
    padding: .2em 1em .2em .5em;
    text-shadow: rgb(40, 0, 0) 4px 4px 3px;
  }

  a {
    color: white;
    text-decoration: none;
    transition: all .5s;
    svg {
      position: relative;
      top: .2em;
    }
    &:hover{
      cursor: pointer;
      text-shadow: rgb(0, 0, 0) 8px 8px 5px;
      color: #fdeba8;
    }
  }

  nav {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    ul {
      display: flex;
      list-style-type: none;
      margin-right: 5em;
      margin-top: 2em;
      margin-bottom: 0;
      @media (min-width: 1025px) {
        margin-right: 8em;
      }
      @media (min-width: 1421px) {
        margin-right: 9em;
      }
      @media (min-width: 1881px) {
        margin-right: 12em;
      }

      li {
        background-color: #b52828;
        color: white;
        margin: 0 .5em;
        display: inline-block;
        position: relative;
        padding: 0 1em 1em 0;
        ul {
          display: none;
          margin:0;
          padding: .5em 0 0 0;
          top: 1em;
          left: -.5em;
          position: absolute;
          flex-direction: column;
          list-style-type: none;
          z-index: 110;
          box-shadow: 8px 8px 4px rgba(0,0,0,.2);

          li {
            background-color: #b52828;
            font-size: .95em;
            padding: .03em .5em;
            white-space: nowrap;
            margin: 0;

            ul {
              position: static;
              box-shadow: none;
              padding: 0;
              margin: .03em -.5em 0;

              li {
                font-size: 1em;
                padding-left: 1.5em;
              }
            }
          }
        }

        &:hover{
          > ul {
            display: flex;
          }
        }
      }
    }
  }

}