```html
<style>
    /* user styles */

    :root {
        --header-image: url('https://ninascave.neocities.org/header-line.png');
        --body-bg-image: url('https://ninascave.neocities.org/background-new.png');

        /* colors */
        --content: #66222c;
    }

    /* fonts */

    @font-face {
        font-family: Poppins;
        src: url('https://ninascave.neocities.org/fonts/Poppins/Poppins-Thin.ttf');
    }

    @font-face {
        font-family: Poppins;
        src: url('https://ninascave.neocities.org/fonts/Poppins/Poppins-SemiBold.ttf');
        font-weight: bold;
    }

    @font-face {
        font-family: Poppins;
        src: url('https://ninascave.neocities.org/fonts/Poppins/Poppins-ThinItalic.ttf');
        font-style: italic;
    }

    @font-face {
        font-family: Poppins;
        src: url('https://ninascave.neocities.org/fonts/Poppins/Poppins-SemiBoldItalic.ttf');
        font-style: italic;
        font-weight: bold;
    }

    body {
        font-family: 'Poppins', sans-serif;
        margin: 0;
        background-color: #0a0630;
        color: #E2DED4;
        background-image: url('https://ninascave.neocities.org/background-new.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    * {
        box-sizing: border-box;
    }

    /* entire website container */

    #container {
        max-width: 1000px;
        margin: 0 auto;
    }

    /* links */

    #container a {
        color: #B58230;
        font-weight: bold;
        text-decoration: none;
    }

    /* header */

    #header-area {
        width: 100%;
        border-radius: 30px;
        background-color: #670216;
        height: 108px;
        background-image: url('https://ninascave.neocities.org/header-line.png');
        background-size: 100%;
        background-repeat: no-repeat;
    }

    /* navigation */

    #navbar {
        /* navigation container */
    }

    #navbar .btn {
        border: 1px solid #E2DED4;
        border-radius: 30px;
        color: #E2DED4;
        padding: 14px 28px;
        font-family: inherit;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
    }

    #navbar .home {
        background-color: #0a0630;
        color: #E2DED4;
    }

    #navbar .home:hover {
        background-color: #670216;
    }

    #navbar .about {
        background-color: #0a0630;
        color: #E2DED4;
    }

    #navbar .about:hover {
        background-color: #670216;
    }

    #navbar .writings {
        background-color: #0a0630;
        color: #E2DED4;
    }

    #navbar .writings:hover {
        background-color: #670216;
    }

    #navbar .crafts {
        background-color: #0a0630;
        color: #E2DED4;
    }

    #navbar .crafts:hover {
        background-color: #670216;
    }

    #navbar .movies {
        background-color: #0a0630;
        color: #E2DED4;
    }

    #navbar .movies:hover {
        background-color: #670216;
    }

    #navbar .games {
        background-color: #0a0630;
        color: #E2DED4;
    }

    #navbar .games:hover {
        background-color: #670216;
    }

    /* main layout */

    #flex {
        display: flex;
        width: 100%;
    }

    /* main content */

    main {
        background-color: transparent;
        border-radius: 30px;
        flex: 1;
        width: 100%;
        padding: 20px;
        min-width: 0;
    }

    /* fixed blog introduction */

    .blog-intro {
        background-color: #670216;
        padding: 25px 30px;
        margin-bottom: 20px;
        border-radius: 20px;
    }

    /* scrollable blog area */

    .blog-container {
        height: 600px;
        overflow-y: auto;
        padding: 15px;
        overscroll-behavior: contain;

        /* scrollbar: gold thumb, transparent track */
        scrollbar-color: #B58230 transparent;
        scrollbar-width: auto;
    }

    /* Chrome, Edge, Safari */

    .blog-container::-webkit-scrollbar {
        width: 8px;
    }

    .blog-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .blog-container::-webkit-scrollbar-thumb {
        background-color: #B58230;
        border-radius: 10px;
    }

    .blog-container::-webkit-scrollbar-thumb:hover {
        background-color: #B58230;
    }

    /* individual blog posts */

    .blog-post {
        background-color: #0a0630;
        padding: 30px;
        margin-bottom: 20px;
        border-radius: 20px;
    }

    /* removes extra space after the final blog post */

    .blog-post:last-child {
        margin-bottom: 0;
    }

    /* footer */

    footer {
        background-color: #0a0630;
        width: 100%;
        height: 40px;
        padding: 10px;
        text-align: center;
        border-radius: 30px;
    }

    /* typography */

    h1 {
        text-align: center;
        color: #E2DED4;
        font-size: 55px;
        padding: 10px;
    }

    p {
        text-indent: 15px;
        letter-spacing: 2px;
    }

    strong {
        color: #B58230;
    }

    /* general box */

    .box {
        background-color: #670216;
        border: 1px solid #B58230;
        border-radius: 30px;
        padding: 5px;
    }

    /* top bar */

    #topBar {
        width: 100%;
        height: 40px;
        padding: 10px;
        font-size: smaller;
        background-color: #670216;
    }

    /* responsive layout */

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

        #flex {
            flex-wrap: wrap;
        }

        main {
            width: 100%;
        }

        #navbar ul {
            flex-wrap: wrap;
        }

        .blog-container {
            height: 600px;
        }
    }
</style>
```