@import url(normalize.css);


/*Universal-Selektor, für alle HTML-Elemente soll das Box-Model von content-box auf border-box umgestellt werden*/
*{ 
 box-sizing: border-box; 
}

/* Allgemeine Formatierungen /////////////////////*/
body{
}


h1,h2,h3,h4,h5,h6{
}

a{
    text-decoration: none;
}

ul,ol{
    list-style-type:none;
    padding:0;
    margin:0;
}

/*Fläche mit mittig platziertem Logo*******************************/

.grueneflaeche{
    position:fixed;/*postion relativ zum Browserfenster*/
    top:0;/*Über Höhe und Breite spannen*/
    bottom:0;
    left:0;
    right:0;
    background-color: rgb(0,163,149);
}

.grueneflaeche.anderefarbe{
    background-color: rgb(162,198,19);

}

.logoflaeche{
    position:absolute;/*relativ zur Klasse .grueneflaeche*/
    top:46%;/*Versatz der .logoflaeche von oben und links*/
    left:50%;
    transform: translate(-50%, -50%);/*Versatz um die Hälfte der eigenen Höhe und Breite zurück*/
    width:40%;
    padding:15px;
    border-radius: 50%;
    /*Transition Zeitverzögerter Effekt beim Mouseover************/
    -webkit-transition: all 0.8s ease-in-out 0.7s;
    -moz-transition: all 0.8s ease-in-out 0.7s;
    -ms-transition: all 0.8s ease-in-out 0.7s;
    -o-transition: all 0.8s ease-in-out 0.7s;
    transition: all 0.8s ease-in-out 0.7s;}

.logoflaeche:hover{/*Effekt beim Mouseover*/
    background-color: rgba(255,255,255,0.2);
}

.logoflaeche img{/*Bild nimmt 100% von Klasse .logoflaeche ein*/
    width: 100%;
}

/*Media-Querie bei 1000 Pixel//////////////////////////////////////////*/

@media screen and (max-width: 1000px) {

.logoflaeche{
    width:70%;
    padding:12px;
}
}

/*Media-Querie bei 500 Pixel//////////////////////////////////////////*/

@media screen and (max-width: 750px) {

    .logoflaeche{
        width:85%;
        padding:10px;
    }
    }


/* Ganz am Ende: Schriften, wenn Sie mit dem Projekt zusammen im Projektordner abgelegt wurden */