@import "../assets/scss/variables";

.header {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  height: $header-height-mobile;
  width: 100%;
  background: $dark-gray;
  background-color: rgb(32, 32, 32);
  background-image: linear-gradient(45deg, $dark-gray 25%, transparent 25%, transparent 75%, $dark-gray 75%, $dark-gray),
                    linear-gradient(45deg, $dark-gray 25%, transparent 25%, transparent 75%, $dark-gray 75%, $dark-gray),
                    linear-gradient(to bottom, $black-alpha, $dark-gray);
  background-size: 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 5px 5px, 0px 0px;
  z-index: 100;

  @media (min-width: map-get($grid-breakpoints, 'md')) {
    height: $header-height;
  }

  .title {
    display: block;
    padding: 0 50px;
    font-family: $font-serif;
    font-size: $font-30;
    font-weight: bold;
    color: $white-alpha;
    margin: auto auto 15px auto;
    text-shadow: 0 0 2px $black;
  }

  .menu {
    position: absolute;
    top: 20px;
    right: 20px;
    height: $hamburger-layer-width;
    width: $hamburger-layer-width;
    overflow: visible;
  }

  .menu-items {
    position: absolute;
    display: block;
    top: $header-height-mobile;
    left: 0;
    width: 100%;
    height: calc(100vh - $header-height-mobile);
    background: $white;
    overflow: hidden;

    @media (min-width: map-get($grid-breakpoints, 'md')) {
      top: $header-height;
      height: calc(100vh - $header-height-mobile);
    }

    .item {
      display: block;
      background: $white;
      padding: 20px;
      font-size: $font-34;
      font-family: $font-serif;
      text-align: center;
      text-transform: uppercase;
      color: $dark-gray;
      border-bottom: 1px dotted $black-alpha;
      cursor: pointer;
    }
  }
}