@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Andika&display=swap');
@import 'style.css';

:root{
    --title-family :'Unbounded', cursive;
    --role-font :'Roboto Mono', monospace;
    --quote-family:'Lobster Two', cursive;
    --blog-font : 'Andika', sans-serif;
    --container-width: 80%;

    --margin-top:10em;
    --padding-bottom:10em;
    --blog-title:'Roboto Condensed', sans-serif;
}
header{
    position: static;
}
.page-navbar{
    width: var(--container-width);
}
a{
    color: black;
}
section{
    width: var(--container-width);
}
.blog-container{
    width:100%;
    margin-bottom:var(--padding-bottom);
}
.blog-header-list{
   
    padding-block-start:2em;
    display: block;
}
.blog-header-list h1{
    font-size: 2.5em;
    font-family: var(--poppins-font);
}
.blog-header-list p{
    font-size: 1.25em;
    font-family: var(--poppins-font);
}
.blog-lists{
    width: 100%;
    margin-top: 2em;
    display: flex;
    gap:2em;
    width: 100%;
}

.blogs-content{
    width: 50%;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    border-radius: 5px; 
    gap:1em;  
}
.blogs-content img{
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.blogs-detail{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family:var(--blog-font);
    flex-grow:1;
}


.blogs-detail button, .post-detail button{
    padding: 1em;
    border: none;
    margin-top: 1em;
    border-radius: 5px;
    background-color: rgb(89, 101, 199);
}
.blog-detail-content{
    font-family: var(--poppins-font);
    display: block;
}
.blog-detail-content p{
    margin-top:0.5em;
}
.blogs-detail:hover .read-more{
    font-weight: 700;
}

.read-more{
    margin: 0;
    font-size: 1.25em;
    border: none;
}
.read-more-btn:hover{
    background-color: rgb(180, 114, 16);
    cursor: pointer;
}
.small-text{
    font-size: 0.75em;
    color: grey;
    margin: 0;
}
.blog-card-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (max-width: 1024px) {
    .blog-container {
        width: 90%; 
    }
    
    .blog-lists {
        flex-wrap: wrap; 
        justify-content: center; 
    }

    .blogs-content {
        width: 45%; 
        margin-bottom: 1em; 
    }
}


@media only screen and (max-width: 600px) {
    section{
        width: 90%;
    }
    .page-navbar{
        width: 100%;
        padding: 0.25em;
        justify-content: space-between;
    }
    .blog-container {
        width: 100%; 
        padding-bottom:2em;
    }
    .blogs-detail{
        padding: 0;
    }
    .blog-detail-content{
        font-size: 0.85em;
    }

    .blog-header h1 {
        font-size: 1.75em; 
        padding-bottom: 0.5em;
    }

    .blog-header p {
        font-size: 1em;
    }

    .blog-lists {
        flex-direction: column;
        align-items: center; 
        gap: 1.5em;
    }

    .blogs-content {
        width: 100%; 
    }
    .blog-header-list{
        font-size: 0.85em;
    }
    .learn-more{
        font-size: 1.25em;
        font-weight: 500;
    }
    
}