@charset "UTF-8";

/* CSS Document */

@media all {

    body {
        font-size: 110%;
        font-family: Arial;
        background: #DDDDDD;
    }

    #alles {
        width: 80%;
        margin: 0 auto;
        /* Trick zum Zentrieren */
    }

    nav {
        text-align: center;
    }

    .menulinks {
        list-style: none;
    }

    .menulinks a {
        color: #FFFFFF;
        text-decoration: none;
    }

    .menulinks a:hover {
        color: #222222;
    }

    .menulinks li {
        display: inline;
        margin-right: 1%;
    }

    #liebling {
        /* background: #fa9206; */
        text-align: center;
    }

    .klein {
        width: 40%;
        float: left;
        background: #777777;
    }

    .gross {
        float: left;
        background: #999999;
        width: 60%;
    }

    #alles {
        background: #777777;
        overflow: hidden;
        /* CSS Hack: damit passt sich das div-Element
        dem größten Element an */
    }

    img {
        max-width: 100%;
        height: auto;
    }

    #ich {
        /* background: #d2dae3; */
        text-align: center;
    }

    #mein-bild {
        /* border: 4px solid #FF0000; */
    }

    footer {
        clear: both;
        text-align: center;
    }

    #copyright {
        font-style: italic;
        font-size: 80%;
        padding: 1%;
        color: #eeeeee;
    }

    #mein-bild,
    #liebling img {
        margin: 0;
    }

    #ich h3 {
        display: none;
    }

}

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

    .klein,
    .gross {
        display: block;
        float: none;
        width: 100%;
    }

    .menulinks li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
    }

    #mein-bild,
    #liebling img {
        margin: 2% 0;
    }

    #ich h3 {
        display: block;
        margin-bottom: 0;
        padding-top: 15px;
    }


}