/* Big tablet to 1200px (widths smaller taht the 1140px row) */

@media only screen and (max-width: 1200px) {
    header {
        width: 100%;
    }
}


/* Small tablet to big tablet: from 768px to 1023px */

@media only screen and (max-width: 1023px) {
    .text-box {
        padding: 0;
    }
    .box {
        padding: 0;
    }
    h1 {
        font-size: 150%;
    }
    .blog-pic {
        max-width: 40%;
    }
    .footer-social {
        font-size: 150%;
        bottom: 40%;
        right: 0%;
    }
    .box-head {
        margin: 0 auto;
        position: relative;
        top: 30%;
        left: 50%;
    }
    h2 {
        font-size: 110%;
    }
}

@media only screen and (max-width: 1000px) {
    .logo {
        height: 80px;
    }
}


/* Small phones to small tablets: from 481px to 767px */

@media only screen and (max-width: 767px) {
    /* body {
        font-size: 16px;
    } */
    body {
        font-size: 18px;
    }
    .nav-bar {
        display: none;
    }
    .dropbtn {
        display: none;
    }
    .dropdown {
        display: none;
    }
    .burger {
        display: block;
    }
    .nav-container {
        display: flex;
        justify-content: center;
    }
    .logo-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .text-box {
        padding: 1%;
    }
    .date {
        text-align: center;
    }
    .box {
        width: 100%;
        padding: 0px;
    }
    .blog-post {
        width: 100%;
    }
    .blog-pic {
        display: none;
    }
}

h1 {
    font-size: 130%;
}

.blog-pic {
    -o-object-fit: cover;
    object-fit: cover;
}

@media only screen and (max-width: 480px) {
    h1 {
        font-size: 110%;
    }
}

@media only screen and (max-width: 320px) {}