/* Allgemeine Stile */
body {
 margin: 0;
 padding: 0;
 text-align: center;
 font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, Tahoma, sans-serif;
 font-weight: 400;
 background-image: url("ziege-klein.jpg");
 background-repeat: repeat;
 background-position: right top;
 background-color: white;
 background-size: cover;
 background-attachment: fixed;
}

#container {
 margin: 20px auto;
 width: 90%;
 max-width: 1200px;
 background-color: white;
 border-radius: 10px;
 box-shadow: 2px 2px 10px white;
}

/* Text- und Absatzstile */
p, #center, #footer {
 text-align: left;
}

p {
 hyphens: auto;
 margin-bottom: 2px;
}

#center {
 margin: 20px;
 font-size: 1.6em;
}

#footer {
 margin: 10px 20px;
 font-size: 1.2em;
}

h1 {
 font-size: 2.4em;
 text-align: left;
 margin: 0;
 color: #111037;
}

h2 {
 font-size: 1.8em;
 text-align: left;
 margin: 0;
}

em {
 font-style: normal;
 color: red;
}

/* Links */
a {
 color: gray;
 text-decoration: none;
}

a:hover {
 color: #68469D;
}

a.navi {
 color: #7A8FB4;
 text-decoration: none;
}

a.navi:hover {
 color: #68469D;
}

/* Zitate */
q {
 quotes: "\00AB" "\00BB" "\2039" "\203A";
}

/* Linien */
hr {
 border: none;
 height: 1px;
 background-color: #7A8FB4;
 margin: 15px 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
 #center {
  margin: 10px;
  font-size: 1.4em;
 }

#footer {
  margin: 10px;
  font-size: 1.0em;
 }
@media (max-width: 768px) {
 body {
  background-position: center;
  background-size: cover;
 }

 #container {
  width: 95%;
 }

 h1 {
  font-size: 2em;
 }

 h2 {
  font-size: 1.6em;
 }

 #center {
  margin: 5px;
  font-size: 1.2em;
 }


 #footer {
  margin: 5px;
  font-size: 0.8em;
 }

@media (max-width: 480px) {
 h1 {
  font-size: 1.8em;
 }

 h2 {
  font-size: 1.4em;
 }

 #center {
  font-size: 1em;
  margin: 5px;
 }

#footer {
  font-size: 0.6em;
  margin: 5px;
 }