*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
} /* Bewirkt, dass alle Prozentangaben inklusive Padding berechnet werden */

#inhalt {
    height: auto;
    width: 720px;
    margin-top: 0px; 
    margin-left: -360px;    /* Damit der "Ausrichtungspunkt" in der Mitte der Box liegt */
    position: absolute;     /* positionieren */
    top: 0%;                /* in die Mitte verschieben */
    left: 50%;
    
    border-left:1px black solid;     /* Rahmen Auflistungspunkt links */
    border-right:1px black solid;     /* Rahmen Auflistungspunkt links */
    
    background-image: url(bilder/hintergrund_normal.jpg);
    background-repeat: repeat;
    background-position: left top;
}

h1 {
    width: 700px;
    
    font-family:fantasy;
    font-size:2.8em;
    font-weight:normal; 
    font-style:normal;
    
    color:red;
    text-shadow: 3px 4px 10px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
    background-color:transparent;
    
    text-align:left;                /* Textausrichtung */
    text-indent:0em;                /* Einrückung der ersten Zeile eines Textblockes */
    letter-spacing:normal;          /* Standardzeichenabstand */
    word-spacing:normal;            /* Standardwortabstand */
    line-height: 3em;
    
    padding-top:24px;                 /* Innenabstand oben  */
    padding-bottom:8px;              /* Innenabstand unten */
    padding-left:0px;                /* Innenabstand links */
    padding-right:0px;               /* Innenabstand rechts */
    
    margin-top:0px;                 /* Außenabstand oben   */
    margin-bottom:0px;              /* Außenabstand unten  */
    margin-left:0px;                 /* Außenabstand links  */
    margin-right:0px;                /* Außenabstand rechts */
}

h2 {
    width:  700px;
    
    font-family:sans-serif;
    font-size:1.5em;
    font-weight:normal; 
    font-style:normal;
    
    color:orange;
    text-shadow: 3px 4px 10px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
    background-color:transparent;
    
    text-align:left;                /* Textausrichtung */
    text-indent:0em;                /* Einrückung der ersten Zeile eines Textblockes */
    letter-spacing: 0.05em;          /* Standardzeichenabstand */
    word-spacing: 0.05em;            /* Standardwortabstand */
    line-height: 1.4em;
    
    padding-top:8px;                 /* Innenabstand oben  */
    padding-bottom:8px;              /* Innenabstand unten */
    padding-left:24px;                /* Innenabstand links */
    padding-right:16px;               /* Innenabstand rechts */
    
    margin-top:0px;                 /* Außenabstand oben   */
    margin-bottom:0px;              /* Außenabstand unten  */
    margin-left:0px;                 /* Außenabstand links  */
    margin-right:0px;                /* Außenabstand rechts */
}

p {
    width:  700px;
    
    font-family:sans-serif;
    font-size:1.3em;
    font-weight:normal;             /* normal, bold, bolder und lighter */
    font-style:normal;              /* italic = kursiv / oblique = schräggestellt */
    
    color:gainsboro;
    background-color:transparent;
    
    text-align:left;                /* Textausrichtung */
    text-indent:0em;                /* Einrückung der ersten Zeile eines Textblockes */
    letter-spacing:normal;          /* Standardzeichenabstand */
    word-spacing:normal;            /* Standardwortabstand */
    line-height: 1.4em;
    
    padding-top:8px;                 /* Innenabstand oben  */
    padding-bottom:8px;              /* Innenabstand unten */
    padding-left:24px;                /* Innenabstand links */
    padding-right:16px;               /* Innenabstand rechts */
    
    margin-top:0px;                  /* Außenabstand oben   */
    margin-bottom:0px;               /* Außenabstand unten  */
    margin-left:0px;                /* Außenabstand links  */
    margin-right:0px;                /* Außenabstand rechts */   
}

#nav {
width:  99.999%;
height: 55px;
text-align:center;               /* Textausrichtung     */

margin-top:0px;                 /* Außenabstand oben   */
margin-bottom:0px;              /* Außenabstand unten  */
margin-left:0px;                 /* Außenabstand links  */
margin-right:0px;                /* Außenabstand rechts */

font-family:sans-serif;
font-size:1em;
font-weight:normal; 
font-style:normal;
    
background: rgb(200 200 200/0.2);
}

    #nav ul {
       list-style:none;                 /* none keine Aufzählungspunkte */
    }
    #nav li { 
        float:left;                      /* Anordnung links   */                 
        width:33.333%;                       /* Breite des Links  */

        margin-left:0px;                 /* Außenabstand links */
        margin-top:10px;                 /* Außenabstand oben  */    

        border-left:0px black solid;     /* Rahmen Auflistungspunkt links */
        border-right:0px black solid;    /* Rahmen rechts  */
        border-top:1px black solid;      /* Rahmen Auflistungspunkt oben */
        border-bottom:1px black solid;   /* Rahmen unten  */

        padding-top:8px;                 /* Innenabstand oben  */
        padding-bottom:8px;              /* Innenabstand unten */
        padding-left:0px;                /* Innenabstand links */
        padding-right:0px;               /* Innenabstand rechts */
    } 
    #nav a:link { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:normal;              /* italic = kursiv / oblique = schräggestellt */
        color:gainsboro;
        text-shadow: 2px 3px 8px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }
    #nav a:visited { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:normal;              /* italic = kursiv / oblique = schräggestellt */
        color:gainsboro;
        text-shadow: 2px 3px 8px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }
    #nav a:hover { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:normal;              /* italic = kursiv / oblique = schräggestellt */
        color:red;
        text-shadow: 3px 4px 10px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }
    #nav a:active { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:normal;              /* italic = kursiv / oblique = schräggestellt */
        color:black;
        text-shadow: 2px 3px 8px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }

#footer {
        width:  100%;
        height: 55px;
        text-align:center;               /* Textausrichtung     */

        margin-top:0px;                 /* Außenabstand oben   */
        margin-bottom:0px;              /* Außenabstand unten  */
        margin-left:0px;                 /* Außenabstand links  */
        margin-right:0px;                /* Außenabstand rechts */

        font-family:sans-serif;
        font-size:1em;
        font-weight:normal; 
        font-style:normal;

        background: rgb(200 200 200/0.2);
}

    #footer ul {
        list-style:none;                 /* none keine Aufzählungspunkte */
    }
    #footer li { 
        float:left;                      /* Anordnung links   */                 
        width:50%;                       /* Breite des Links  */

        margin-left:0px;                 /* Außenabstand links */
        margin-top:10px;                 /* Außenabstand oben  */    

        border-left:0px black solid;     /* Rahmen Auflistungspunkt links */
        border-right:0px black solid;    /* Rahmen rechts  */
        border-top:1px black solid;      /* Rahmen Auflistungspunkt oben */
        border-bottom:1px black solid;   /* Rahmen unten  */

        padding-top:8px;                 /* Innenabstand oben  */
        padding-bottom:8px;              /* Innenabstand unten */
        padding-left:0px;                /* Innenabstand links */
        padding-right:0px;               /* Innenabstand rechts */
    } 
    #footer a:link { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:normal;              /* italic = kursiv / oblique = schräggestellt */
        color:gainsboro;
        text-shadow: 2px 3px 8px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }
    #footer a:visited { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:normal;              /* italic = kursiv / oblique = schräggestellt */
        color:gainsboro;
        text-shadow: 2px 3px 8px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }
    #footer a:hover { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:normal;              /* italic = kursiv / oblique = schräggestellt */
        color:red;
        text-shadow: 3px 4px 10px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }
    #footer a:active { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:normal;              /* italic = kursiv / oblique = schräggestellt */
        color:black;
        text-shadow: 2px 3px 8px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }

#main {
    border-style: solid;
    border: 0px;
    background-color:transparent;
    width: 700px;
}

#section {
    width: 700px;
    height: 700px;
    background-color:transparent;
    background: url(bilder/hintergrund_spotlight.jpg);
    background-position: left;
    background-repeat: no-repeat;
}

#article
{
    border-style: solid;
    border: 10px;
    width: 700px;
    background-color:black;
    background: transparent;
    background-position: center;
}

    #article a:link { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:italic;              /* italic = kursiv / oblique = schräggestellt */
        color:gainsboro;
        text-shadow: 2px 3px 8px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }
    #article a:visited { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:italic;              /* italic = kursiv / oblique = schräggestellt */
        color:gainsboro;
        text-shadow: 2px 3px 8px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }
    #article a:hover { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:italic;              /* italic = kursiv / oblique = schräggestellt */
        color:red;
        text-shadow: 3px 4px 10px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }
    #article a:active { 
        font-family:sans-serif;
        font-size:1em;
        font-weight:normal;             /* normal, bold, bolder und lighter */
        font-style:italic;              /* italic = kursiv / oblique = schräggestellt */
        color:black;
        text-shadow: 2px 3px 8px black; /* X-Versatz Y-Versatz Schattenhärte Schattenfaerbe */
        text-decoration: none;
    }

#picture {       
   margin-left: 100px;           /* Außenabstand links  */
}


#space-50 {
    width: 700px;
    height: 50px;
}
#space-100 {
    width: 700px;
    height: 100px;
}
#space-200 {
    width: 700px;
    height: 200px;
}

html, body {
    background-color: black;
    background-image: url(bilder/hintergrund_dunkel.jpg);
    background-repeat: repeat;
    background-position: left top;
}