.header-wrapper{
  background-color: var(--darker-accent-color);
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  padding-top: 1em;
  /*padding-bottom: .2em;*/
}

.header-site-name{
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 1em;
  padding-top: .5em;
}

.header-site-name h1{
  padding: 0;
  margin: 0;
  font-size: var(--default-font-size-h1);
  font-weight: 750;
  color: black;
}

.header-site-name figure{
  padding-bottom: 0;
  margin-bottom: 0;
}

.header-site-name-primary{
  text-align: center;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: medium;
}

.header-imag-wrapper{
  display: flex;
  flex-direction: row;
  column-gap: 1em;
  padding: 7px;
  margin-top: 1em;
  margin-bottom: 1em;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}

.header-imag-wrapper img{
  width: 13em;
}

/*
# Style header bar that is fixed with
# name and icon on the left and menu in center
*/

.header-wrapper.fixed{
  top: 0;
  position: fixed;
  z-index: 200;
  flex-direction: row;
  justify-content: center;
  column-gap: 1em;
}

.header-wrapper.fixed .header-site-name h1{
  font-size: var(--default-font-size-h1-fixed);
}

.header-wrapper.fixed .header-site-name{
  margin: 0;
  padding: 0;
  align-items: end;
  padding-bottom: 5px;
}

.header-wrapper.fixed .header-imag-wrapper{
  align-items: end;
  padding: 0;
  margin: 0;
  padding-bottom: 5px;
}

.header-wrapper.fixed .header-imag-wrapper img{
  width: 5em;
}

.header-wrapper.fixed .site-menu-wrapper{
  align-self: end;
  width: auto;
}

.header-wrapper.fixed .site-menu-ham{
  align-self: flex-end;
}

.site-menu-wrapper-mobile-fixed .site-menu .site-menu-item .site-menu-a{
  font-size: var(--menu-text-size-fixed) !important;
}

@media only screen and (width <= 992px){
  .header-wrapper{
    flex-direction: column;
  }

  .header-wrapper.fixed .site-menu-wrapper{
    top: 2.85em;
    width: 100%;
    align-self: center;
  }

  .header-wrapper.fixed{
    flex-direction: row-reverse;
    align-items: center;
    justify-content: left;
    padding: 0;
    margin: 0;
    padding-top: 1em;
    padding-bottom: .5em;
  }

  .header-wrapper.fixed .header-site-name{
    padding: 0;
    margin: 0;
    flex-grow: .65;
  }

  .header-wrapper.fixed .header-imag-wrapper{
    padding: 0;
    margin: 0;
    display: none;
    visibility: hidden;
  }

  .header-wrapper.fixed .header-imag-wrapper img{
    width: 7em;
    padding: 0;
    margin: 0;
  }
}

@media only screen and (width <= 435px){
  .header-wrapper.fixed{
    flex-wrap: wrap;
  }

  .site-menu-ham{
    margin: 0;
    margin-bottom: 10px;
  }

  .header-wrapper.fixed .site-menu-ham{
    padding-top: .5em;
  }
}