header {

position: relative;
padding-top: 1.125em;
padding-bottom: 1.125em;
padding-left: 1.5em;
padding-right: 1.5em;

}

nav {

width: 100%;
pointer-events: none;
& ul {
  margin: 0;
  padding-top: 0.2em;
  float: right;
  font-family: "Operator Mono SSm-Light";
}
& li {
  display: inline;
  padding: 0.5em;
  pointer-events: all;
}

}

.header__home {

float: left;
font-family: "Operator Mono SSm-Bold Italic";
text-decoration: none;
color: $white;
pointer-events: all;
transition: color 0.5s;
&:hover {
  color: #343A40;
}

}

.header__link {

text-decoration: none;
color: $white;
transition: color 0.5s;
&:hover {
  color: $outer-space;
}

}

// .header__homepage only renders if on homepage, see liquid in header element header.header__homepage {

position: absolute;
background: transparent;
& ul {
  position: fixed;
  right: 1.5em;
}

}

.header__title {

margin: 2em auto 1.5em auto;
padding-left: 4.5rem;
padding-right: 4.5rem;
text-align: center;
font-family: "Operator Mono SSm-Bold";
font-size: 2.75em;
color: $white;

}

@media all and (max-width: 550px) {

.header__home {
  float: unset;
}
.header__homepage {
  width: 100%;
}
header.header__homepage ul {
  position: unset;
  right: unset;
}
.header__title {
  padding: 0;
}
nav {
  text-align: center;
  & ul {
    padding: 0;
    float: none;
    margin-top: 1em;
  }
}

}