body {
    background: linear-gradient(to top, rgb(137, 137, 207), rgb(255, 200, 200));
    justify-content: center;
}
img {
    width: 100px;
    height: auto;
}
div {
    border: 1px solid black;
    background-color: rgba(157, 224, 255, 0.564);
}
#grid1 {
    display: grid;
    grid-template-columns: 100px;
    grid-template-areas: 
    "header header header header header header"
    "title title title title title title"
    "jpg jpg gif gif png png"
    "vektor vektor vektor vektor vektor vektor"
    "wmf wmf wmf svg svg svg";
    gap: 0px;
    padding: 0px;
    width: 800px;
    border: 1px solid black;
    align-self: center;
    margin: 0 auto;
}
.end {
    text-align: center;
    font-size: 24px;
    margin-top: 20px;
    color: rgb(35, 35, 35);
    width: 800px;
    border: 0px solid black;
}
.stor {
    font-size: 36px;
}
.header {
    grid-area: header;
    background-color: rgb(212, 246, 255);
    text-align: center;
    font-size: 30px;
    padding: 10px;
}
.title {
    grid-area: title;
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
    background-color:rgb(170, 167, 244)
}
.jpg {
    grid-area: jpg;
    padding: 10px;
}
.gif {
    grid-area: gif;
    padding: 10px;
}
.png {
    grid-area: png;
    padding: 10px;
}
.vektor {
    grid-area: vektor;
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
    background-color: rgb(170, 167, 244);
}
.wmf {
    grid-area: wmf;
    padding: 10px;
}
.svg {
    grid-area: svg;
    padding: 10px;
}
#grid2 {
    display: grid;
    grid-template-columns: 150px;
    grid-template-areas: 
    "header1 header1 header1 header1 header1"
    "rastergrafik rastergrafik rastergrafik vektor1 vektor1"
    "jpg1 gif1 png1 wmf1 svg1"
    "end end end end end";
    gap: 0px;
    padding: 0px;
    width: 800px;
    border: 1px solid black;
    margin: 0 auto;
}
.end1 {
    text-align: center;
    font-size: 24px;
    margin-top: 0px;
    color: rgb(35, 35, 35);
    width: 800px;
    border: 0px solid black;
    background-color: rgb(102, 128, 206);
}
.stor1 {
    font-size: 36px;
}
.header1 {
    grid-area: header1;
    background-color: rgb(212, 246, 255);
    text-align: center;
    font-size: 30px;
    padding: 10px;
}
.title1 {
    grid-area: rastergrafik;
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
    background-color:rgb(170, 167, 244)
}
.jpg1 {
    grid-area: jpg1;
    padding: 10px;
}
.gif1 {
    grid-area: gif1;
    padding: 10px;
}
.png1 {
    grid-area: png1;
    padding: 10px;
}
.vektor1 {
    grid-area: vektor1;
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
    background-color: rgb(170, 167, 244);
}
.wmf1 {
    grid-area: wmf1;
    padding: 10px;
}
.svg1 {
    grid-area: svg1;
    padding: 10px;
}
.end {
    text-align: center;
    font-size: 24px;
    color: rgb(35, 35, 35);
    width: 800px;
    border: 0px solid black;
    margin-bottom: 0 auto;
    grid-area: end1;
}