@media screen and (max-width: 780px) {
    header{
        margin-bottom: 50px;
    }

    #container-nav a{
        margin-bottom: 10px;
    }

    #search-bar input{
        width: 100%;
        height: 54px;
        padding-left: 8px;
    }

    #search-bar i{
        height: 14px;
        padding: 20px;
    }

    .post h1{
        font-size: 20px;
    }
}

@media screen and (max-width: 600px) {
    header {
        padding: 48px 10px 30px 10px
    }

    #container{
        margin: 0 auto;
        width: 90%;
    }

    #container-nav{
        font-size: 20px;
    }

    #container-nav a{
        margin-bottom: 20px;
    }

    #search-bar input{
        width: 100%;
        height: 40px;
        padding-left: 8px;
    }

    ::placeholder{
        font-size: 14px;
    }

    #search-bar i{
        height: 10px;
        padding: 15px;
    }

    main{
        width: 88%;
        margin: 0 auto;
    }

    .post{
        margin-bottom: 25px;
    }

    .post-bar{
        padding: 20px 10px 10px 10px;
    }

    .date{
        font-size: 14px;
    }

    .post h1{
        margin: 0 10px 10px 10px;
        font-size: 18px;
    }

    .post p{
        margin: 0 10px;
        line-height: 20px;
        font-size: 14px;
        padding-bottom: 20px;
    }
}