* { 
  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%; /* macht Vollbild vom linken bis zum rechten Bildschirmrand */
    margin: 0;
    background: #000000;; /* schwarzer Hintergrundbild, horizontal zentriert*/
}

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/akt_schulter_sw.jpg) no-repeat center top; /* schwarzer Hintergrundbild, 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;
    position:relative;
}

 #gallery {  /* Betrifft die Gallerie */
  vertical-align: middle;
  padding: 6%; /* Innenabstand */
}

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%
}

div {
  margin: 15%;
}

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

footer { /* betrifft den footer */
    height: 10vh; /* 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/schwarz.jpg) no-repeat center top; /* Hintergrundbild, horizontal zentriert */
    margin-bottom: 0px; /* Abstand unterm Header */
    display: table;
    position:relative;
    font-size: 100%; /* Schriftgröße */


/* Einbindung der Schrift */

@font-face { /* einbinden einer eigenen Schrift */
font-family: genome-thin; /* Name der Schrift */
src: url(schriften/genome-thin.otf); /* Link zur Schrift */
}

@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'),
        url('schriften/arcamajora2-heavy-webfont.svg#arca-majora2-heavy') format('svg'); /* 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. */
}