/* style.css, biobaeckerei.at, 2026-01-23, gerald petter */

html {
  
  --font: 'Open Sans', sans-serif;
  --fontHeading: 'Libre Baskerville', serif;
  
  --white: rgb(255, 255, 255);
  --greyLighter: rgb(245, 245, 245);
  --greyLight: rgb(236, 236, 236);
  --color: rgb(240, 137, 16);
  --black: rgb(20, 20, 20);
  
  --hDist: 4vw; /* horizontal distance between content and window */
  
  --gapS: .6rem; /* vertical gap */
  --gapXXS: calc(var(--gapS)/4);
  --gapXS: calc(var(--gapS)/2); 
  --gapM: calc(var(--gapS)*2); 
  --gapL: calc(var(--gapS)*3);
  --gapXL: calc(var(--gapS)*4); 
  --gapXXL: calc(var(--gapS)*5); 
  
  font-size: 1em;
  
}
  @media screen and (min-width: 37.5em) { /* 600px */
    html {
      --gapS: .8rem;
    }
  }
    @media screen and (min-width: 56.25em) { /* 900px */
      html {
        --gapS: .9rem;
        font-size: 1.1em;
      }
    }
      @media screen and (min-width: 75em) { /* 1200px */
        html {
          --gapS: 1.0rem;
          --hDist: 6vw;
          font-size: 1.2em;
        }
      }
        @media screen and (min-width: 93.75em) { /* 1500px */
          html {
            --hDist: 8vw;
            font-size: 1.3em;
          }
        }
          @media screen and (min-width: 112.5em) { /* 1800px */
            html {
              font-size: 1.4em;
            }
          }
            @media screen and (min-width: 131.25em) { /* 2100px */
              html {
                --hDist: 10vw;
                font-size: 1.5em;
              }
            }
            
/* Body ==================================================================== */
body {
  font-family: var(--font); 
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Links */
a {
  color: inherit;
  transition: .2s ease-in-out; 
  text-decoration: none;
}

a:hover {
  color: var(--color);
}

/* Main ==================================================================== */
main {
  max-width: 25em;
  margin: auto var(--hDist);
  background-color: var(--greyLight);
  display: flex;
  flex-direction: column;
  gap: var(--gapL);
}
  @media screen and (min-width: 56.25em) {
    main {
      flex-direction: row;
      max-width: none;
      max-height: 37.5em;
    }
  }
  
@media screen and (min-width: 56.25em) {
  main > * {
    flex: 1;
  }
}

.main__contact {
  border-top: var(--gapL) solid var(--greyLighter);
  padding: var(--gapL) var(--gapM);
}
  @media screen and (min-width: 56.25em) {
    .main__contact {
      border-top: none;
      border-left: var(--gapL) solid var(--greyLighter);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: var(--gapM) var(--gapL);
      gap: var(--gapS);
    }
  }
  
h1 {
  font-family: var(--fontHeading);
  font-weight: 700;
  font-size: 1.6em;
}

main p {
  margin-top: var(--gapM);
  line-height: 1.5;
} 
  @media screen and (min-width: 56.25em) {
    main p {
      margin-top: 0;
    }
  }