@import url('../sheets/fonts.css');



html, body{
    margin: 0%;
    box-sizing: border-box;
    /*    overflow-x: hidden;*/
}

:root{

    /*      Theme colors        */
    --text-gray: #3f4954;
    --text-light : #686666da;
    --bg-color: #0f0f0f;
    --white: #ffffff;
    --midnight: #104f55;

    /* gradient color   */
    --sky: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

    /*      theme font-family   */
    --Abel: 'Abel', cursive;
    --Anton: 'Anton', cursive;
    --Josefin : 'Josefin', cursive;
    --Lexend: 'Lexend', cursive;
    --Livvic : 'Livvic', cursive;
}


/* ---------------- Global Classes ---------------*/

/* ------x------- Global Classes -------x-------*/

ul{
    padding: 0;
    list-style: none;
}

a{
    text-decoration: none;
    color: white;
}

.loc, strong{
    text-align: center;
    font-family: 'Lato';
    font-size: 1.2vw;
    font-weight: 100;
    color: black;
}



main .site-title h1, h3{
    background: rgba(20,20,20,.5);
    text-align: center;
    color: white;
    font-family: 'Lato';
    font-weight: 100;
    font-size: 1.2vw;
}


main .blog-content .btn-blog{
    background: var(--sky);
}

main .blog-content span{
    display: block;
}

@media screen and (max-width: 620px){
   .loc, strong{

    font-size: 1em;
}
    
    main .site-title h1, h3{
    font-size: .7em;
}
    
     img{
        width: 0%;
         
    }
}

/* -------x------- Blog Carousel -----x------ */


main .post-content{
    width: 100%;

}

main .site-content .post-content > .post-image, .post-title{
    position: relative;
}

main .site-content .post-content > .post-image .post-info{
    background: var(--sky);
}

main .site-content .post-content > .post-image > div{
    overflow: hidden;
}

main .site-content .post-content > .post-image .img{
    transition: all 1s ease;
}


.site-content .post-content .post-title .post-btn{
    /*    background: var(--sky);*/
}

.site-content .pagination{
    justify-content: center;
    color: var(--text-gray);

}


.site-content .pagination .pages{
    background: red;
    color: var(--white);
}

/* -------x-------- Site Content --------x-------*/


/* --------------- Sidebar ----------------------- */

.site-content > .sidebar .category-list{
    font-family: 'Lato';   
}

.site-content > .sidebar .category-list .list-items{
    background: var(--sky);
}


.site-content .sidebar .newsletter .input-element{
    font-family: 'Lato';
}

.site-content .sidebar .newsletter .form-btn{
    background: var(--sky);
}

.site-content .sidebar .popular-tags{
    padding: 5rem 0;
}

.site-content .sidebar .popular-tags .tags .tag{
    background: var(--sky);
}


/* -------x------- Sidebar -----------x----------- */

footer.footer{
    background: var(--bg-color);
}

footer.footer .container h2{
    color: var(--white);
}


footer.footer .newsletter .form-element input{
    font-family: var(--Josefin);
}

footer.footer .newsletter .form-element span{
    background: var(--sky);
    cursor: pointer;
}

footer.footer .follow div i{
    color: var(--white);
}

footer.footer .rights{
    justify-content: center;
    font-family: var(--Josefin);
}

footer.footer .rights h4 a{
    color: var(--white);
}

footer.footer .move-up span{
    color: var(--midnight);
}

footer.footer .move-up span:hover{
    color: var(--white);
    cursor: pointer;
}

/* ---------x------- Footer ----------x---------- */

/*              Viewport less then or equal to 1130px            */

@media only screen and (max-width: 1130px){
    .site-content .post-content > .post-image .post-info{
        left: 2rem !important;
        bottom: 1.2rem !important;
        border-radius: 0% !important;
    }

    .site-content .sidebar .popular-post .post-info{
        display: none !important;
    }

    footer.footer .container{
        grid-template-columns: repeat(2, 1fr);
    }

}

/*      x       Viewport less then or equal to 1130px    x     */


/*              Viewport less then or equal to 750px            */

@media only screen and (max-width: 750px){
    .nav .nav-menu, .nav .nav-items{
        flex-direction: column;
    }

    .nav .toggle-collapse{
        display: initial;
    }

    main .site-content{
        grid-template-columns: 100%;
    }

    footer.footer .container{
        grid-template-columns: repeat(1, 1fr);
    }

}


/*        x      Viewport less then or equal to 750px       x     */


/*              Viewport less then or equal to 520px            */

@media only screen and (max-width: 520px){
    main .blog{
        height: 125vh;
    }

    .site-content .post-content > .post-image .post-info{
        display: none;
    }

    footer.footer .container > div{
        padding:  1rem .9rem !important;
    }

    footer .rights{
        padding: 0 1.4rem;
        text-align: center;
    }

    nav .toggle-collapse{
        width: 80% !important;
    }

}

/*        x      Viewport less then or equal to 520px       x     */