/*------ style.css ------*/

@media all {
    html {
        background: url(../img/back.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    body {
        background: transparent;
    }

    .container {
        text-align: center;
    }

    .logo {
        font-family: 'Leckerli One', cursive;
        font-size: 8vw;
        color: #818634;
        opacity: 0.5;
        text-shadow: 5px 5px 15px #FFEE2C;
    }

}

/* min-width = oberhalb einer Breite von XXXpx des Screens sind diese Eigenschaften aktiv.
   min-width => Desktop-Bereich weil größerer Bereich 
   min-width => Mobile-First, weil die Hauptdefinitionen (@media ohne Breite) für kleinere Bildschirme passen.
   ----------------------------------------------------------------------------------------
   max-width = unterhalb einer Breite von XXXpx des Screens sind diese Eigenschaften aktiv.
   max-width => Mobile-Bereich weil kleinerer Bereich 
   max-width => Desktop-First, weil die Hauptdefinitionen (@media ohne Breite) für größere Bildschirme passen.*/

@media screen and (max-width: 600px) {
    .logo {
        font-size: 46px;
    }
    
} /* Ende @media screen min-width 400px */