/* Variablen Projekt tablat */

:root {
  --color-primary: #8CC63F;
  --color-secondary: #FFFFFF;
  --color-tertiary: #808080;
  --bgcolor-footer: #1C1C1C;
  --text-color-light: rgba(255,255,255,0.8);
  --text-color-dark: rgba(0,0,0,0.8);
  --text-color-medium: rgba(48,48,48,0.8);
  --border-radius: .15rem;
  --icon-color: white;
  --container-padding: 3rem 5rem 3rem 5rem;
  --line-height: 1em;
  --margin-standard: 3rem;
  --margin-small: 1rem;
  --margin-big: 5rem;
  --padding-standard: 3rem;
  --padding-small: 1rem;
  --padding-big: 5rem;
  --font-zoom-animation: font-size 0.5s ease-in-out;
  --text-shadow-light: 1px 1px 2px rgba(0,0,0,0.9);
  --box-shadow-light: 1px 1px 2px rgba(0,0,0,0.9);
}

/* Grundeinstellungen */

* {
  margin: 0;
  padding: 0;
  font-weight: 300;
  /*font-family: 'Roboto';*/
  /*font-family: 'Lato';*/
  font-family: 'Open Sans';
  letter-spacing: .036rem;
}

a, a:hover, .link-standard, .link-standard:hover {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

html {
  font-size: 100%;
  letter-spacing: .02rem;
}

@media (min-width: 576px) {
  html {
    font-size: 90%;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 90%;
  }
}

@media (min-width: 992px) {
  html {
    font-size: 90%;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 100%;
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 110%;
  }
}

@media (min-width: 1600px) {
  html {
    font-size: 120%;
  }
}

@media (min-width: 1800px) {
  html {
    font-size: 130%;
  }
}

@media (min-width: 2000px) {
  html {
    font-size: 140%;
  }
}