:root {
  --block-background:#423226bf;
  --a: rgba(107, 94, 81, 0.5);
  --color-primary: #3F7373;
  --color-gray: #BABDBF;
  --page-background: #4c392e url('/images/wood.webp') repeat center/1250px auto;
  --font-color: rgb(255, 243, 230);
  --c1: #56abc9;
  --color-info: var(--c1);

  --color-gray: #BABDBF;
  --color-teal: #3F7373;
  --color-orange: #BF754B;
  --color-brick: #A64826;
  --color-brown: #732B1A;
}

section.contact {
  background: var(--a);
}

body form button {
  color: var(--font-color);
}

header.page-header {
  backdrop-filter: blur(10px);
}

header.page-header {
  > a > picture > img {
    transform: scale(1.5) !important;
  }
}

body[data-path="/"] header.page-header {
  
  > a > picture > img {
    transition: transform 0.75s !important;
  }

  &:not(.--sticky) > a > picture > img {
    transform: scale(3) !important;

    @media (max-height: 400px) {
      transform: scale(1.5) !important;
    }
  }
}

section.bg-dotted {
  background-image: radial-gradient(var(--block-background) 1px, rgba(0, 0, 0, 0.1) 1px) ;
}

@media (max-width: 640px) {
  div.hero > div {
    padding-bottom: 12rem !important;
  }
}

@media (max-height: 400px) {
  div.hero > div {
    padding-bottom: 6rem !important;

    button {
      width: unset !important;
    }

    .__teaser {
      margin-top: 0rem !important;
    }
  }
}

html[lang="de"] > body > header a[href="/"] img,
html[lang="de"] > body > footer a[href="/"] img {
  content: url('/images/guitarhelp.eu/logo.de.png?type=webp&width=256');
}

html[lang="en"] > body > header a[href="/"] img,
html[lang="en"] > body > footer a[href="/"] img {
  content: url('/images/guitarhelp.eu/logo.en.png?type=webp&width=256');
}

html[lang="fr"] > body > header a[href="/"] img,
html[lang="fr"] > body > footer a[href="/"] img {
  content: url('/images/guitarhelp.eu/logo.fr.png?type=webp&width=256');
}

html[lang="it"] > body > header a[href="/"] img,
html[lang="it"] > body > footer a[href="/"] img {
  content: url('/images/guitarhelp.eu/logo.it.png?type=webp&width=256');
}