/* site-general.css, bergblick-planai.at, 2024-07-05, gerald petter */

/* Breakpoints

  600px
  900px
  1200px
  1500px
  1800px
  2100px
  
*/

:root {
  
  --fontSansSerif: 'Karla', sans-serif;
  
  --white: rgb(255, 255, 255);
  --whiteTrans: rgba(255, 255, 255, 0.9);
  --color: rgb(254, 18, 18);
  --black: rgb(51, 51, 51);
  
  --hDist: 12px; /* horizontal distance */
  --gapS: 10px; /* vertical gap*/
  
  --gapXS: calc(var(--gapS)/2); 
  --gapM: calc(var(--gapS)*2); 
  --gapL: calc(var(--gapS)*3);
  --gapXL: calc(var(--gapS)*4); 
  
}
  @media screen and (min-width: 600px) {
    :root {
      --hDist: 20px;
      --gapS: 15px;
    }
  }
  @media screen and (min-width: 900px) {
    :root {
      --hDist: 36px;
      --gapS: 18px;
    }
  }
    @media screen and (min-width: 1200px) {
      :root {
        --hDist: 72px;
        --gapS: 20px;
      }
    }
      @media screen and (min-width: 1500px) {
        :root {
          --hDist: 120px;
        }
      }
        @media screen and (min-width: 1800px) {
          :root {
            --hDist: 140px;
            --gapS: 30px;
          }
        }
          @media screen and (min-width: 2100px) {
            :root {
              --hDist: 200px;
              --gapS: 40px;
            }
          }
        
/* Body ==================================================================== */
body {
  font-family: var(--fontSansSerif); 
  color: var(--black);
  font-size: 16px;
}
  @media screen and (min-width: 900px) {
    body {
      font-size: 17px;
    }
  }
    @media screen and (min-width: 1200px) {
      body {
        font-size: 18px;
      }
    }
      @media screen and (min-width: 1800px) {
        body {
          font-size: 22px;
        }
      }
        @media screen and (min-width: 2100px) {
          body {
            font-size: 24px;
          }
        }
      
a {
  color: inherit;
  transition: .2s ease-in-out; 
}

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

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gapL);
  min-height: 100vh;
  width: 100vw;
  text-align: center;
}

/* Header ================================================================== */
header {
  margin: 0 var(--hDist);
}

.header__logo {
  align-self: flex-end;
}

.header__logo img {
  width: auto;
  height: 150px;
  max-width: 100%;
}
    
/* Main ================================================================== */
main {
  margin: 0 var(--hDist);
}

main h1 {
  text-transform: uppercase;
  font-size: 2em;
  font-weight: 600;
}

main p {
  margin-top: var(--gapS);
}

main a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

main a:hover {
  border-bottom: 1px solid var(--color);
}

/* Footer ==================================================================================== */
footer {
  margin: 0 var(--hDist);
}

/* Branding ============================================================ */
#brand {
  background-color: var(--green);
  text-align: center;
  margin: var(--footerOffset) 0 var(--gapS);
}
  
#brand img {
  transition: .2s;
}

#brand img:hover {
  transform: rotate(90deg);
}