:root {
    --header-height: 160px;
    --header-border: 5px;
    --header-content: calc((var(--header-height) - 2)*var(--header-border));
    --header-color: var(--page-color);
    --base-shadow: 8px;
    --base-shadow-color: rgba(0,0,0,0.2);
    --highlight-color: #e4e4e4;
    --text-color: #1a1919;
    --def-margin: 16px;
    --max-width: 1650px;
}

body>header {
  background-color: var(--page-color);
  color: var(--text-color);
  display: flex;
  width: 100%;
  max-width: 100%;
  height: var(--header-height);
  z-index: 3;
}
#header_spacer {
    height: calc(var(--header-height) - 1px);
}

.header_spacer {
    width: 310px;
}

.logo {
    font-family: 'Orchidea Pro', sans-serif!important;
    position: absolute;
    top: 3.6em;
    left: 28.1em;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem!important;
    width: 5em;
    z-index: 4;
    /*transform: rotate(-0.035turn);*/
}

.headline{
    margin-left: auto;
    margin-right: auto;
    padding: 7px;
    border:2px solid black;
    position: relative;
    text-decoration: none;
    color: var(--text-color);
    cursor: pointer;
    /*margin: 20px;*/
    /*box-shadow:
        0 0 0 10px hsla(0, 0%, 0%, 20%),
        0 0 0 15px hsla(0, 0%, 0%, 15%),
        0 0 0 20px hsla(0, 0%, 0%, 12%),
        0 0 0 25px hsla(0, 0%, 0%, 9%),
        0 0 0 30px hsla(0, 0%, 0%, 4%);*/
}

@font-face {
    font-family: 'FlatPack';
    src: url('/static/font/FLATPACK.otf');
}

.headline span {
    font-size: 3.5rem;
    font-family: 'FlatPack', sans-serif;
    color: var(--text-color);
}

.max_width_container {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--header-color);
  color: var(--text-color);
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--max-width);
  height: calc(var(--header-height) - 20px);
  z-index: 5;
}

#header_stripe_red {
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  background-color: var(--base-color);
  height: 14px;
  align-items: center;
  width: 100%;
  z-index: 2;
}

#header_stripe_white {
  margin-top: 14px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  background-color: var(--header-color);
  height: 4px;
  align-items: center;
  width: 100%;
  z-index: 3;
}

#header_stripe_black {
  margin-top: 18px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  background-color: #1a1919;
  height: 2px;
  align-items: center;
  width: 100%;
  z-index: 4;
}

#header_stripe_black_bottom {
  margin-top: 160px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  background-color: #1a1919;
  height: 2px;
  align-items: center;
  width: 100%;
  z-index: 4;
}


@media (max-width: 850px) {
    :root {
        --header-height: 80px;
    }

    .headline span {
        font-size: 1.8rem;
    }

    .header_spacer {
        display: none;
    }

    .max_width_container {
        height: calc(var(--header-height) - 20px);
    }

    #header_spacer {
        height: calc(var(--header-height) - 1px);
    }
    #header_stripe_black_bottom {
       margin-top: var(--header-height);
    }

    body>header {
        height: var(--header-height);
    }

    .logo {
        font-size: .7rem!important;
        top: 3.2em;
        left: 21.3em;
    }

}