body{
    margin: 0px;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
    font-family: "Source Sans 3", sans-serif;
     background: linear-gradient(
    135deg,
    #e9b7ce 0%,
    #e8b3d1 25%,
    #f0b7a4 60%,
    #f3b07c 100%
  );



    /* display: grid;
    grid-template-columns: 1em 1fr 1em ;
    gap:1vh;
    grid-template-areas: *
    ". . ."
    ". head ."
    ". main ."
    ". . ."
    ; */
    overflow-x: hidden;


}

.content{
     display: grid;
    grid-template-columns: 1em 1fr 1em ;
    gap:1vh;
    grid-template-areas: 
    ". . ."
    ". head ."
    ". main ."
    ". . ."
    ;

}


header{
    grid-area: head;
}

main{
    grid-area: main;
}


.profile{
    height: 230px;
    width: 230px;
    border-radius: 50%;
}

ul{
    display: flex;
    justify-content:space-between;
    list-style-type: none;
    padding: 0px;
    
}
a{
    text-decoration: none;
    color: #090909;
    /* font-weight: bold;  */
    margin-left: 20px;
}

li{
    color: #090909;
    font-weight: bold;   
    font-size: 0.875rem;
    font-family: "Roboto", sans-serif;
}
.nav{
    font-weight: 450;
}


.head{
    width: 90%;

    margin: 3em auto;

}

.head p{
    font-size: 1.1em;
}


.head h1{
    margin-top: 1em;

}


/* Main sec */

section{
    margin-top: 3em;
    /* color: white; */
}




.main{
    background-image: url('images/Background.jpg');
    background-size: cover;        
    background-position: center;   
    background-repeat: no-repeat; 
    background-attachment: fixed;  

    height: 350px;
    width: 100%;
    margin-top: 2em;
    margin:0;
    grid-area: main;


    display: flex;
    align-items: center;
    justify-content: center;
    
}

.intro{
    color: aliceblue;
    padding: 1em;
}

.date{
    margin-top: 0.75em;
}

.intro p{
    margin-top: 0.75em;
    font-weight: 500;
    line-height: 1.5;
    text-shadow: 1px 1px black;
}



.blog-img{
    width: 100%;
}


/* blogs */

.blogs{
    width: 100%;

}
.blog-date,.blogs h2,.desc,.blog-img{
    margin: 0px;
}

.blog-img{
    border: 1px solid none;
    border-radius: 3px;
    height: 250px;

}
.blog-date{
    margin-top: 1.3em;
    font-size: 0.98rem;
    color:#000000;
}

.blogs h2{
    margin-top: 0.5em;
    color: #141414;
    font-weight: 750;
    font-family: "Source Sans 3", sans-serif;
}

.desc{
    margin: 0px;
    color:#505050;
    margin-top: 1em;
}

/* FOOTER */

footer{
    background-color: #202020;
    color: #ECECEC;
    /* width: 100%; */
    /* grid-area: footer; */
    text-align: center;
    margin: 0px;
    margin-top: 1em;
    padding:0.5em 0.5em;
}

.lib{
 font-weight: 700;
 text-transform: capitalize;
}




@media (min-width: 768px) {

    li{
        font-size: 1.1em;
    }

    .head{
        display: flex;
        justify-content:space-around;
        align-items: center;
        gap: 3.75em;
    }

    .head h1{
        font-size: 2rem;
    }



    .date,.intro p{
        font-size: 1.2em;
    }

    

    .blogs{
        /* width: 350px; */
        display: flex;
        flex-direction: column;
    }

    /* GRID */
    main{
        display: grid;
        grid-template-columns: repeat(auto-fill,2fr);
        gap:1em;
        grid-template-areas: 
        "main main main"
        "first second third"
        "fourth fifth sixth"
        ".. .. .."
        ;

    }

    .first{grid-area: first;}
    .second{grid-area: second;}
    .third{grid-area: third;}
    .fourth{grid-area: fourth;}
    .fifth{grid-area: fifth;}
    .sixth{grid-area: sixth;}





}