main {
    display: grid;
    grid-template-areas: 
    "nav nav nav nav"
    "header header header header"
    "Para1 Para2 Para3 Para4";
    grid-template-columns: 2fr 2fr 2fr 2fr;
    grid-template-rows: 3fr 3fr 3fr;
}

body {
    background-image: linear-gradient(to top, rgb(255, 0, 0), rgb(80, 0, 0), rgb(255, 0, 0))
}

div {
    background-color: black;
    padding: 10px;
    border-radius: 35px;
    margin: 20px;
}

img {
    border-radius: 150px
}

p,h2 {
    color: white;
}

h1 {
    animation-name: headerbuiltdifferent;
    animation-duration: 30s;
}

@keyframes headerbuiltdifferent {
    0% {color: white;}
    20% {color:red;}
    40% {color: white;}
    60% {color: red;}
    80% {color: white;}
    100% {color: red;}
}

.nav {
    grid-area: nav;
}

.header {
    grid-area: header;
}

.Para1 {
    grid-area: Para1;
}

.Para2 {
    grid-area: Para2;
}

.Para3 {
    grid-area: Para3;
}

.Para4 {
    grid-area: Para4;
}

nav {
    display: flex;
    flex-direction: column-reverse;
    color: white;
    background-color: black;
    border: white;
    padding: 15px;
    border-radius: 25px;
}

@media screen and (max-width:599px) {
    #Contain {
        display: grid;
        grid-template-areas:
        "Para1"
        "Para2"
        "Para3"
        "Para4";
        grid-template-columns: 100%;
        grid-template-rows: 6fr 6fr 6fr 6fr 6fr 6fr;
    }

    img {
        opacity: 0.7;
    }

    h1 {
        font-size: xx-small;
    }

    p {
        font-size: xx-large;
    }
}

@media screen and (min-width:600px) and (max-width:1199px){
    #Contain {
        display: grid;
        grid-template-areas:
        "Para1 Para2 Para2"
        "Para3 Para3 Para4";
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: 25% 25% 25% 25%;
    }


    img {
        opacity: 0.5;
    }

    h1 {
        font-size: medium;
    }
    
    p {
        font-size: medium;
    }
}

@media screen and (min-width:1200px) {
    #Contain {
        display: grid;
        grid-template-areas:
        "Para1 Para2 Para2"
        "para1 Para3 Para3"
        "Para4 Para4 Para4";
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: 4fr 4fr 4fr 4fr 4fr;
    }

    img {
        opacity: 0.2;
    }

    h1 {
        font-size:xx-large;
    }

    p {
        font-size: xx-small;
    }
}