body {
    background-color: black;
    color: white;
}

.flexbie {
    display: flex;
}

.titl {
    text-align: center;
    font-size: 400%;
}

.logo {
    width: 100px;
    height:100px;
    float: right;
}

.zombi1 {
    width: 20%;
}

.zombi2 {
    width: 30%;
}

.paragraph1 {
    grid-row: p1;
}

.paragraph2 {
    grid-row: p2;
}

.paragraph3 {
    grid-row: p3;
}

.paragraph4 {
    grid-row: p4;
}


.zombgrid {
    display: grid;
    grid-template-areas: 
    'p1 p2'
    'p3 p4';
    grid-template-rows: 50% 50%;
    font-size: 75%;
}

@media screen and (max-width: 599px) {
    .titl {
        font-size: 200%;
    }
    .zombgrid{
        font-size: 25%;
    }
    .zombi1 {
        width:10%;
    }
    .zombi2 {
        width:15%;
    }
}

@media screen and (min-width: 600px) and (max-width: 1199px) {
    .titl {
        font-size: 300%;
    }
    .zombgrid{
        font-size: 50%;
    }
    .zombi1 {
        width:15%;
    }
    .zombi2 {
        width:25%;
    }
}

@media screen and (min-width: 1200px) {
    .titl {
        font-size: 400%;
    }
    .zombgrid{
        font-size: 75%;
    }
    .zombi1 {
        width:20%;
    }
    .zombi2 {
        width:30%;
    }
}