@-webkit-keyframes bounce-top{0%{-webkit-transform:translateY(-30px);transform:translateY(-30px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}@keyframes bounce-top{0%{-webkit-transform:translateY(-30px);transform:translateY(-30px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800;900&family=Dancing+Script:wght@500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');


:root{
    --box:0 10px 30px rgba(0,0,0,0.3);
}
        /* For Blog.html */

        *{
        padding:0;
        margin:0;
        box-sizing: border-box;
        }

        .title{
        display:flex;
        padding: 1em 0px;
        text-transform: uppercase;
        }
        .title h1{
        font-size: 2rem;
        font-weight: 500;
        margin: auto;
        }

        /* header section end */

        .blog-list{
        width:90%;
        margin: 2em auto 4em;
        }

        .project-list{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-auto-rows: minmax(100px, 1fr);
        grid-gap: 2em;
        }

        .project{
        display: grid;
        grid-template-rows: minmax(20px, 200px) auto auto;
        grid-template-areas: 
        "image"
        "date"
        "title";
        transition: all 1s linear !important;
        }

        .project h2{
        text-align: initial;
        text-transform: capitalize;
        grid-area: title;
        font-size: 1rem;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.05rem;
        }

        .project h2 hr{
        width: 15%;
        padding: 0.1em 0.1em;
        margin-top: 0.3em;
        background-color: #3c393d;
        border-radius: 5px;
        border: none;
        }

        .project p{
        display: none;
        color: #3c393d;
        }

        .project a{
        color: var(--dark);
        font-family: 'Montserrat', sans-serif;
        }

        .project .project-image{
        grid-area: image;
        grid-row: 1 / 2;
        }
        .project .project-image a img{
        object-fit: cover;
        height: 100%;
        width: 100%;
        }

        .status{
        display: none;
        font-family: inherit;
        font-weight: 600;
        font-size: 120%;
        text-shadow: 0px 10px 12px rgb(103, 99, 99);
        grid-area: status;
        align-self: center;
        animation: bounce-top;
        animation-iteration-count: infinite;
        animation-direction: alternate-reverse;
        animation-play-state: running;
        letter-spacing: 0.05em;
        text-transform: uppercase;
            }

        .date{
        grid-area: date;
        align-self: center;
        justify-self: baseline;
        font-style: italic;
        font-weight: 300;
        padding: 0.5em 0em;
        }


        /* For Index.html */
        section.blogs{
            display: none;
            flex-direction: column;
            box-shadow: var(--box);
            margin: 3em 0em;
            padding: 3em 0em;
        }
        section.blogs h2, section.blogs span{
            margin: auto;
        }

        section.blogs h2{
            font-size: 2rem;
        }

        section.blogs span{
            font-weight: 100;
            text-transform: uppercase;
        }

        section.blogs a.blogs{
            display: block;
            margin: auto;
            color: var(--dark);
            text-transform: uppercase;
            text-decoration: underline double;
            text-underline-offset: 3px;
            font-size: 1.4rem;
            transition: all 0.3s linear;
            text-shadow: 0px 10px 10px rgb(124, 123, 123);

        }

        section.blogs a.blogs:hover{
            transform: translateY(-10px);
            text-shadow: 0px 30px 20px black;

        }

        section.blogs .project span.date{
            width: 100%;
            text-align: end;
        }
        section.blogs .project h2{
            font-size: 1rem;
        }

        /* Media Query  second 768 breakpoint */
    @media screen and (min-width: 560){

        .blog-list{
            width: 100%;
            max-width: 700px;
            }

        }
    
    @media screen and (min-width:850px){
    
        .title h1{
        font-size:2.3rem;
        }

        /* -----Header section over---- */
        .blog-list{
        width: 90%;
        max-width: 1100px;
        }

        .project{
            transition: all 0.7s linear !important;
        }


        .project:hover{
        box-shadow:var(--box);
        }

        .project-list{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
        grid-template-rows: auto;
        grid-auto-rows: minmax(300px, 500px);
        grid-gap: 2em 1em;
        }

        .project{
        display: grid;
        overflow: hidden;
        grid-template-rows: minmax(100px, 350px) minmax(100px, 130px) auto auto;
        grid-template-areas: 
        "image"
        "title"
        "meta"
        "date"
        ;
        grid-row-gap:1em;
        }

        .project .project-image{
        grid-area: image;
        height: 100%;
        width: 100%;
        }

        .project h2{
        grid-area: title;
        line-height: normal;
        letter-spacing: 0.09rem;
        }

        .project h2, .project p, .status{
        padding-left: 1rem;
        }

        .project .date{
        grid-area: date;
        justify-self: end;
        padding-right: 1em;
        }

        .project .status{
        display: none;
        }

        .project p{
        display: block;
        grid-area: meta;
        }

        .project:hover{
        transform: translateY(-10px) !important;
        }

        .new{
        grid-template-columns: 35% 15% auto;
        grid-template-rows: 40% 40% 20% !important;
        grid-column-gap: 30px;
        grid-template-areas: 
        "title title image"
        "meta meta image"
        "status date image"
        ;
        grid-column: span 3;
        overflow: hidden;
        border-radius: 10px 10px 10px 10px; 
        min-height: 400px;
        max-height: 500px;
        }


        .new .project-image{
        grid-area: image;
        overflow: hidden;
        }         
        .new a{
        color: var(--dark);
        }

        .new h2{
        grid-area: title;
        font-size: 150%;
        align-self: end;
        line-height: normal;
        }

        .new p{
        grid-area: meta;
        align-self: center;
        font-size: 110%; 
        }

        .new .status, .new .date{
        padding-bottom: 2em;
        }

        .new .status{
        display: block;
        animation-duration: 2s;
        grid-area: status;
        }

        .new .date{
        display: block;
        justify-self: end;
        grid-area: date;
        }

        .featured{
        grid-column: span 2;
        grid-template-columns: auto 45%;
        grid-template-rows: 40% 40% 20%;
        grid-row-gap: 0px;
        grid-template-areas: 
        "image title"
        "image meta"
        "image status" !important
        ; 
        grid-column-gap: 0;
        overflow: hidden;
        border-radius: 10px 10px 10px 10px; 
        }
        .featured h2{
        align-self: end;
        font-size: 1.3rem;
        }

        .featured .date{
        display: none;
        }
        .featured p{
        align-self: center;
        }

        .featured .status{
        font-size: 1rem;
        justify-self: end;
        padding-right: 1em;
        animation-duration: 2s;
        font-style: italic;
        color: #4e4e4e;
        display: block;
        }


        /* index.html */

        section.blogs{
            display: flex;
        }

        section.blogs .blog-list{
            display: grid;
            row-gap: 50px;
            grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
            column-gap: 20px;
            padding-top: 2em;
        }
        section.blogs .new{
            min-height: 250px;
            max-height: 350px;
            grid-template-rows: 35% 35% 30% !important;
        }

        section.blogs .new .status{
            justify-self: start;
            width: 100%;
        }

        section.blogs .new p{
            align-self: start;
        }

        section.blogs .new h2{
            font-size: 120%;
            align-self: end;
        }
    }

        /* Third 1024 breakpoint */

        @media screen and (min-width:1024px){

        .blog-list{
        width: 95%;
        }

        }

        /* Fourth 1500 breakpoint */
        @media screen and (min-width:1500px){
        .title li{
        font-size: 1.3rem;
        padding:0 1.5rem;
        }
        }

        /* End For BLog.html */