body{
    display: flex;
    justify-content: center;
}
#jpg{
    width: 100px;
}
#png{
    width: 150px;
}

.container{
    width: 800px;
    display: grid;
    grid-column: auto auto auto auto auto auto;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
    "header header header header header header"
    "rastergrafik rastergrafik rastergrafik rastergrafik rastergrafik rastergrafik"
    "jpg jpg gif gif png png"
    "vektorgrafik vektorgrafik vektorgrafik vektorgrafik vektorgrafik vektorgrafik"
    "emf emf emf svg svg svg"
    "footer footer footer footer footer footer";
    div{
        outline: 1px solid black;
        padding-left: 1%;
    }
}
.header{
    grid-area: header;
    background-color: rgb(120, 120, 120);
    color: white;
    text-align: center;
}
.rastergrafik{
    grid-area: rastergrafik;
    background-color: rgb(200, 200, 200);
}
.jpg{
    grid-area: jpg;
    background-color: rgb(225, 225 ,225);
}
.gif{
    grid-area: gif;
    background-color: rgb(225, 225 ,225);
}
.png{
    grid-area: png;
    background-color: rgb(225, 225 ,225);
}
.vektorgrafik{
    grid-area: vektorgrafik;
    background-color: rgb(200, 200, 200);
}
.emf{
    grid-area: emf;
    background-color: rgb(225, 225 ,225);
}
.svg{
    grid-area: svg;
    background-color: rgb(225, 225 ,225);
}
.footer{
    grid-area: footer;
    background-color: rgb(160, 160, 160);
    text-align: center;
    display: flex;
    justify-content: center;
    p{
        font-size: 15px;
    }
    p::first-letter{
        font-size: 45px;
    }
}