:root {
  --charcoal: #333333;
  --chalk: #fafafa;
  --red: #aa0000;
}

html {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

body {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-size: 1em;
  color: var(--charcoal);
  background-color: var(--chalk);
  background-image: linear-gradient(
    90deg,
    hsla(208, 41%, 92%, 1) 0%,
    hsla(210, 60%, 98%, 1) 50%,
    hsla(45, 40%, 96%, 1) 100%
  );
  position: relative;
  font-family: Saira, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Saira, sans-serif;
  margin-bottom: 0.5em;
}

* + h2,
* + h3,
* + h4,
* + h5,
* + h6 {
  margin-top: 1em;
}

h2 {
  font-size: 1.25em;
  text-transform: uppercase;
  font-weight: 500;
}

p {
  line-height: 1.5;
  font-size: 1rem;
}

* + p {
  margin-top: 1em;
}

.block {
  display: block;
}

.block + .block {
  margin-top: 0.25em;
}

.bold {
  font-weight: bold;
}

section {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 2em;
  border-radius: 0.2em;
  box-shadow: 3px 3px 15px 0 hsla(209, 40%, 20%, 15%), -3px 3px 5px 0 hsla(209, 40%, 20%, 15%), inset 2px 2px 5px hsla(46, 41%, 92%, 38%);
}

section:first-child {
  margin-top: 2em;
}

section + section {
  margin-top: 2em;
}

section:last-child {
  padding-bottom: 1.5em;
}

section.light {
  background-color: white;
  background-image: linear-gradient(
    110deg,
    hsla(208, 41%, 92%, 1) 0%,
    hsla(210, 60%, 98%, 1) 50%,
    hsla(45, 40%, 96%, 1) 100%
  );
  color: var(--charcoal);
}

section.dark {
  background-color: var(--charcoal);
  color: var(--chalk);
}

section.red {
  background-color: var(--red);
  color: var(--chalk);
}

.stripe {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  height: 100%;
  width: 16em;
  background-color: var(--charcoal);
}

section.intro {
  width: 20em;
  padding: 0;
}

#ving-tsun-banner-area {
  display: flex;
  justify-content: center;
}

#ving-tsun-banner {
  width: 9em;
}

#kung-fu-nahkampfschule-osnabrück-logo {
  margin: 5em 2.5em;
  fill: var(--charcoal);
}

section.stil {
  margin-top: 2em;
  width: 20em;
}

section.training {
  width: 20em;
}

section.kontakt {
  width: 20em;
}

section.impressum {
  padding: 5px 10px;
  width: 100%;
}

#impressum-wrapper {
  margin-top: auto
}

#impressum {
  margin-top: 4rem;
  background-color: var(--charcoal);
  color: var(--chalk);
  font-size: 12px;
  text-align: center;
  padding: 1em;
}

.nb {
  white-space: nowrap;
}

@media (min-width: 36em) {
  section.intro {
    width: 22em;
  }

  section.stil {
    width: 24em;
    transform: translateX(calc(-50% + 10em));
  }

  section.training {
    width: 22em;
    transform: translateX(calc(50% - 7em));
  }

  section.kontakt {
    width: 18em;
    transform: translateX(calc(-50% + 6em));
  }
}

@media (min-width: 50em) {
  body {
    font-size: 1.33em;
  }
}