@charset "UTF-8";
/*CSS-Dokument */
/* Der body-Tag-Stil gilt für alle Elemente auf der Seite*/
body{
     background-color:black;
font-family: Geneva, Verdana, Arial, sans-serif;
padding:0px;
margin:0px;
}
/* Der ID-Stil wrapper wird mit einem div-Tag verwendet, um eine 960 Pixel breite Seite zu erstellen */
#wrapper {
width: 960px;
height: 800px;
margin-left: auto;
margin-right: auto;
background-color: #F25F29;
}
/* Derr ID-Stil column-1 ID ist rechtsbündig ausgerichtet*/
#column-1 {
          float: right;
          width: 600px;
          height: 600px;
          background: #55D9D9;
}

/* Der ID-Stil column-2 ID ist linksbündig ausgerichtet */
#colum-2{
          float: left;
          width: 300px;
          height: 600px;
          background: #F2B544;
}

/* Selektor für Tags, durch Komma voneinander getrennt, gilt für den Stil für alle Tags*/

h1, h2, h3, h4, h5, h6, p, li{
   margin-left: 15px;
}

h1 {
    color: white;
    padding-top: 15px;
}

/* Selektor für Tags, nicht durch Komma getrennt, gilt für spezifische Instanzen */

column-1 h1 {
   padding-top: 5px;
   color: black;
   font-size: 36px;
}

/* Modernes Web-Design verwendet Klassen- oder ID-Stil für Felder*/

.box {
    height: 100px;
    width: 100px;
    float: left;
    margin: 15px;
    padding: 25px;
    background-color: #A8D977;
    border: 2px solid gray;
}

/* Die folgende Pseudo-Klasse gilt für die Feldklasse, wenn die Maus über ein Feld geschoben wird*/

.box: hover {
      background-color: #F2B544;
      borde-bottom: 2px solid black;
}



/* Diese Lösch-Klasse beendet das Floating */
.clear {
     clear: both;
}

}
header, footer {
     background-color: #F27830;
     color: red;
     padding-top: 5px;
     padding-bottom: 5px;
}