body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    background-color: rgb(255, 252, 249);
}

main {
    height: 100%;
    width: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;

}

#banner {
    height: 20%;
    /* border: 1px dotted black; */
    background-color: rgb(53, 53, 117);
    color: aliceblue;
    font-size: 3vw;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 3vw;
}

#blogBody {
    height: 75%;
    /*             border: 4px dotted black;
 */
    width: 60%;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.blogBox {
    width: 25%;
    height: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blogBanner {
    height: 59%;
    border: 1px solid black;
    cursor: pointer;
}

.blogTitle {
    height: 40%;
    border: 1px solid black;
    text-align: center;
    background-color: white;
    cursor: pointer;
    display: inherit;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1vw;
    overflow: hidden;
    padding: 5%;
}

/* .blogFooter {
            height: 14%;
            border: 1px solid black;
            display: flex;
            background-color: rgb(244, 250, 241);
            justify-content: space-between;
        }

        .blogFooter>* {
            width: 32%;
            border: 1px solid black;
            cursor: pointer;
            display: inherit;
            justify-content: center;
            align-items: center;
        }

        /* For heart and num for ex. */

/* .blogFooterChild>* {
            width: 20%;
        } */

.blogNums {
    margin-left: 10%;
}

.blog1Banner {
    background-image: url(/images/blogImages/ChatGPT\ Image\ Oct\ 28\,\ 2025\,\ 02_44_57\ PM.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* .blogFooter-like {}

        .blogFooter-comment {}

        .blogFooter-views {} */

#banner h1 {
    position: relative;
    animation: dance 3s ease-in-out infinite alternate;
}

@keyframes dance {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    25% {
        transform: translate(3px, -7px) rotate(-3deg);
    }

    50% {
        transform: translate(-5px, 5px) rotate(3deg);
    }

    75% {
        transform: translate(3px, -5px) rotate(-2deg);
    }

    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

/* --- Responsive layout --- */
@media (max-width: 500px) {
    #blogBody {
        flex-direction: column;
        align-items: center;
        width: 70%;
        overflow: hidden;
        flex-wrap: nowrap;
    }

    .blogBox {
        width: 70%;
        max-width: 500px;
    }

    body {
        width: 500px;
        height: 1000px;
    }

    .blogTitle {
        font-size: medium;
    }
}

/* Prevent further shrinking beyond mobile width */
@media (max-width: 500px) {

    html,
    body {
        min-width: 500px;
        /* locks the page width */
        overflow-x: auto;
        /* allows sideways scroll if smaller */
    }
}