
/* Ganze Seite */
body{
    font-family: Roboto, Helvetica, sans-serif;
    line-height: 1.25;
    margin:0;
}

/* Text-Styles */

h1{
    text-align: center;
}

/* Kopf- und Fusszeile */

header, footer{
    background-color: lightgrey;
    text-align: center;
    padding: 1em;
}
header{
    margin-bottom: 30px;
}
footer{
    margin-top: 50px;
}

/* Abschnitt mit drei Karten */

.container{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
@media (max-width: 800px){
    .container{
            display: block;
            max-width: 600px;
    }
}
    
.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;

    flex: 1 1 0;

    margin-left: 1em;
    margin-right: 1em;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}

.card > .text{
    margin: 1em;
}

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