@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 'bloglist.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;
}
section{
    width: var(--container-width);
}
.page-navbar{
    width: var(--container-width);
}

.blog-container{
    margin-top: 2em;
    width:100%;
}

.title{
    font-size: 3em;
    font-family: var(--poppins-font);
}
.published-date{
    color:grey;
    font-size: 1em;
    margin-block: 1em;
}

.blog-content p{
    font-size: 1.25em;
    font-family: var(--blog-font);
    color: rgb(25, 25, 25);
    border: none;
}
hr{
    margin-block:calc(var(--margin-top)/4) ;
}
.other-blogs{
    margin-top: 5em;
    width: 100%;
}
.other-blogs h1{
    font-family: var(--title-family);
    text-align: left;
    margin-bottom: 3em;
    color: rgb(89, 39, 3);
}
.related-blog-list{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2em;
}
.related-blog-card{
    margin:0;
    width:30%;
    display: flex;
    flex-direction: column;
    margin-bottom:2em;
    border-radius: 5px;
}
.related-blog-card img{
    width: 100%;
    height: 250px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    object-fit: cover;
}
.rel-detail{
    padding: 0.85em;
    cursor: pointer;
    font-size:1.15em;
}
.rel-detail h2{
    font-family: var(--blog-title);
}

.rel-detail p{
    font-family: var(--blog-font);
    font-size: 0.85em;
    padding-block: 0.15em;
    padding-bottom:1em;
}
.other-blogs a{
    color: black;
}
.rel-detail:hover{
    background-color: rgba(212, 208, 208, 0.175);
}

.blog-card-footer{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.blog-card-footer p{
    padding: 0;
}
/* for post */
button:active{
    border-style: outset;
}

@media only screen and (max-width: 600px) {
    section{
        width: 90%;
    }
    .blog-container{
        width: 100%;
        margin-bottom:0;
    }
    .page-navbar{
        width: 100%;
        padding: 0.25em;
        justify-content: space-between;
    }
    .title{
        font-size: 2em;
    }
     .published-date{
        font-size: 0.75em;
     }
     .blog-content{
        text-align: justify;
     }
     .blog-content p{
        font-size: 1em;
     }
     .related-blog-list{
        flex-direction: column;
        align-items: center;
     }
     .related-blog-card{
        width: 100%;
     }
     .related-blog-card img{
        height: 200px;
     }
     .rel-detail{
        font-size: 1em;
     }
    .other-blogs{
        width: 100%;
    }
    .other-blogs h1{
        margin-bottom:1em;
    }
    .related-blog-card{
        margin:0;
        width: 100%;
    }
    .related-blog-card{
        width: 100%;
    }
}