* { 
  text-decoration: none; /* Unterstreichung entfernen */
	margin: 0;
	padding: 0;
	box-sizing: content-box; 
}

html, body { /* betrifft den Body */
	font-size: 100%; /* Schriftgröße */
	height: 100%;
	margin: 0;
  background: #000000
}

header { /* betrifft den Header */
  height: 100vh; /* macht Vollbild auf Startseite vom oberen bis zum unteren Bildschirmrand */
	width: 100%; /* macht Vollbild auf Startseite vom linken bis zum rechten bildschirmrand */
	background: transparent url(bilder/lilianafrevel.jpg) no-repeat center top; /* Hintergrundbild auf Startseite, horizontal zentriert */
  background-size: cover; /* für Vollbild auf Startseite */
  text-align: right; /* zentriert Inhalte im Header (Logo) */
  font-family: 'arca-majora2-heavy', 'verdana', 'sans-serif'; /* Schriftart */
  color: #33ccff;
  margin-bottom: 0px; /* Abstand unterm Header */
  display: table;
} 

h1{
  flex: 1 1 80%;
  margin: 4%; /* Abstand um den Text */
}

h1 {/* schrift ausrichten */
  color: #fff; /* schriftarbe Weiß */
  font-family: 'arca-majora2-heavy', 'verdana', 'sans-serif'; /* Schriftart */
  margin:10pt;
  width: 50%; /* breite der Überschrift sind 50% der kompletten weite */
  margin-left: 25%
}

p { /* schrift ausrichten */
  color: #fff; /* schriftarbe Weiß */
  font-family: 'arcamajora3_heavy', 'verdana', 'sans-serif'; /* Schriftart */
  margin:12pt;
  width: 50%;
  margin-left: 25%
}

article {
  display: flex; /*ermöglicht flexibles Layout für "body". Alle flexiblen Kind-Elemente werden zu Flex-Items */
  flex-direction: row; /*Anordnung der Flex-Items in Reihen oder Spalten (row/column)*/
  flex-flow: row wrap; /*ermöglicht Umbrüche der Flex-Item-Reihen bei kleineren Bildschirmen*/
  font-family: 'arcamajora3_heavy', 'verdana', 'sans-serif'; /* Schriftart */
  letter-spacing: 0.1rem; /* Buchstabenabstand */
  word-spacing: 0.3rem; /*Abstand der Wörter */
}

body #gallery {  /* Betrifft die Gallerie */
  height: 100%; /* macht Vollbild vom linken bis zum rechten Bildschirmrand */
  margin:12pt;
  width: 50%;
  margin-left: 25%
}

footer { /* Betrifft den Footer */
}

#pfeil{
font-size:70pt;
}

#box4 { /* schrift ausrichten */
	padding: 10%; /* Innenabstand - also Schrift bis Boxrand */
	font-family: 'arcamajora3_heavy', 'verdana', 'sans-serif'; 
}

@font-face { /* einbinden einer eigenen Schrift */
  font-family: 'arca-majora2-heavy'; /* Name der Schrift */
  src:  url('schriften/arcamajora2-heavy-webfont.eot#') format('eot'),
        url('schriften/arcamajora2-heavy-webfont.woff') format('woff'),
        url('schriften/arcamajora2-heavy-webfont.woff2') format('woff2'),
        url('schriften/arcamajora2-heavy-webfont.ttf') format('truetype');

  font-family: 'arcamajora3_heavy'; /* Name der Schrift */      
  src:  url('schriften/arcamajora3_bold.eot#') format('eot'),
        url('schriften/arcamajora3_bold.woff') format('woff'),
        url('schriften/arcamajora3_bold.woff2') format('woff2'),
        url('schriften/arcamajora3_heavy.eot#') format('eot'),
        url('schriften/arcamajora3_heavy.woff') format('woff'),
        url('schriften/arcamajora3_heavy.woff') format('woff2');/* Links zu den Schrift-Dateien in verschiedenen Formaten. Nach der eot steht ein #, so daß der Internet-Explorer nur dieses Format ließt und nicht weiter ließt. */
}