*{
    box-sizing:border-box;
    color:#2e231c;
    font-family:"MS PGothic","MS UI Gothic",Tahoma,Verdana,sans-serif;
    font-style:normal;
}

body{
    margin:0;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:18px;

    background:
        linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)),
        url("https://files.catbox.moe/t9g328.webp");
    background-repeat:repeat;
    background-size:auto;

    font-size:9px;
    letter-spacing:.7px;
    line-height:1.25;
}

.page-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.blog-wrapper{
    width:425px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:rgba(254,254,253,.98);
    border-width:4px;
    border-style:solid;
    border-image:url("https://i.imgur.com/8xftJ3v.gif") 5 round;
    box-shadow:0 0 0 3px rgba(255,255,255,.55);
}

button{
    background:#fffefc;
    color:#2e231c;
    border-width:4px;
    border-style:solid;
    border-image:url("https://i.imgur.com/8xftJ3v.gif") 5 round;
    padding:5px 12px;
    cursor:pointer;
    transition:.15s;
    font-size:9px;
    font-family:"MS PGothic","MS UI Gothic",Tahoma,Verdana,sans-serif;
    font-style:normal;
}

button:hover{
    background:#fff8f2;
}

button:active{
    transform:translateY(1px);
}

.button-bar{
    display:flex;
    gap:10px;
}

.button-bar button{
    flex:1;
}

.date-bar{
    padding:7px;
    background:#fffcfa;
    border-width:4px;
    border-style:solid;
    border-image:url("https://i.imgur.com/8xftJ3v.gif") 5 round;
}

.blog-box{
    height:200px;
    padding:12px;
    overflow-y:auto;

    background:#ffffff;

    border-width:4px;
    border-style:solid;
    border-image:url("https://i.imgur.com/8xftJ3v.gif") 5 round;
}

.blog-greeting{
    margin-top:auto;
    font-size:9px;
}

.post-number{
    text-align:center;
    font-size:13px;
    font-family:"MS PGothic","MS UI Gothic",Tahoma,Verdana,sans-serif;
    font-style:normal;
    color:#2e231c;
}

.nav-section{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    padding:2px 0;
    font-size:8px;
}

.outside-buttons{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:12px;
}

.pass-window{
    width:195px;
    margin-top:14px;
    background:#fdfdfb;
    border-width:4px;
    border-style:solid;
    border-image:url("https://i.imgur.com/8xftJ3v.gif") 5 round;
}

.pass-title-bar{
    text-align:center;
    padding:4px;
    background:#fff8f2;
    border-bottom:1px dotted #c7a47e;
    font-size:10px;
    font-family:"MS PGothic","MS UI Gothic",Tahoma,Verdana,sans-serif;
    font-style:normal;
    color:#2e231c;
}

.pass-window-inner{
    padding:10px;
}

.pass-window input{
    width:100%;
    padding:4px;
    background:#ffffff;
    border:1px solid #ead9c4;
    color:#2e231c;
    outline:none;
    font-size:9px;
    font-family:"MS PGothic","MS UI Gothic",Tahoma,Verdana,sans-serif;
}

.pass-window input:focus{
    border-color:#6d5647;
}

.pass-actions{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:8px;
}

::-webkit-scrollbar{
    width:7px;
}

::-webkit-scrollbar-track{
    background:#ffffff;
}

::-webkit-scrollbar-thumb{
    background:#bda28d;
    border-radius:10px;
}

/* mobile fix */
@media (max-width:600px){
    body{
        align-items:flex-start;
        padding:10px;
        min-height:100dvh;
        overflow-x:hidden;
    }

    .page-wrap{
        width:100%;
    }

    .blog-wrapper{
        width:100%;
        max-width:425px;
    }

    .blog-box{
        height:auto;
        min-height:200px;
        max-height:65vh;
        overflow-y:auto;
    }

    *{
        color:#2e231c !important;
        -webkit-text-fill-color:#2e231c;
    }
}