:root{

    --bg:#FFFFEE;

    --bg2:#F0E0D6;

    --border:#D9BFB7;

    --borderDark:#B7A99A;

    --header:#EA8;

    --red:#800000;

    --green:#789922;

    --link:#0000EE;

    --hover:#DD0000;

    --font:"MS PGothic","ＭＳ Ｐゴシック",sans-serif;
}
/* ================= HEAD IMAGE ================= */

.makichan{
    display: block;
    margin: 10px auto 0px auto;
}

/* ================= BASE ================= */

html,
body{

    margin:0;

    padding:0;

    background:#FFFFEE;

    background-image:
    linear-gradient(
        to bottom,
        #FFCCAA 0px,
        #FFFFEE 140px
    );

    background-repeat:repeat-x;

    color:#000;

    font-family:var(--font);

    font-size:10pt;

    line-height:1.3;
}

*{

    box-sizing:border-box;
}

/* ================= LINKS ================= */

a{

    color:var(--link);

    text-decoration:none;
}

a:hover{

    color:var(--hover);
}

/* ================= HEADER ================= */

header{

    text-align:center;

    padding-top:14px;

    margin-bottom:10px;
}

.logo{

    color:var(--red);

    font-size:28px;

    font-weight:bold;

    letter-spacing:-1px;
}

.subtitle{

    color:var(--red);

    font-size:9pt;

    margin-top:2px;
}

/* ================= FORM ================= */

.postForm{

    width:720px;

    margin:0 auto 18px auto;

    background:#F0E0D6;

    border:1px solid #B7A99A;

    padding:8px;
}

.formRow{

    display:flex;

    margin-bottom:4px;
}

.formLabel{

    width:110px;

    background:#EA8;

    border:1px solid #C97;

    color:#800;

    font-weight:bold;

    padding:4px;

    font-size:10pt;
}

.formField{

    flex:1;
    display: flex;
}

input,
textarea{

    width:100%;

    border:1px solid #999;

    background:#FFF;

    padding:3px;

    font-family:var(--font);

    font-size:10pt;

    outline:none;
}

input:focus,
textarea:focus{

    border-color:#EA8;
}

textarea{

    resize:vertical;

    min-height:120px;
}

button{

    margin-top:4px;

    padding:3px 10px;

    background:#F0E0D6;

    border:1px solid #B7A99A;

    font-family:var(--font);

    font-size:10pt;

    cursor:pointer;
}

button:hover{

    background:#EAD8CA;
}

/* ================= BOARD ================= */

.board{

    width:98%;

    margin-left:10px;
}

/* ================= THREAD ================= */

.threadAdmin{

    color:#ff2b2b;
    font-weight:bold;

}

.thread{

    margin-bottom:28px;
}

/* ================= OP POST ================= */

.threadHeader{

    margin-bottom:4px;

    line-height:1.2;
}

.threadSubject{

    color:var(--red);

    font-weight:bold;
}

.threadMeta{

    color:#117743;

    font-weight:bold;

    margin-left:6px;
}

.threadContent{

    margin-top:8px;

    white-space:pre-wrap;

    line-height:1.35em;

    overflow-wrap:break-word;
}

/* ================= REPLIES ================= */

.replyAdmin{

    color:#ff2b2b;
    font-weight:bold;

}

.replies{

    display: flex;
    margin-top: 10px;
    flex-direction: column;
}

.replies input,
.replies textarea,
.replies button{
    width: fit-content;
}

.reply{

    display:inline-block;

    background:#F0E0D6;

    border-top:1px solid #D9BFB7;

    border-left:1px solid #D9BFB7;

    border-right:1px solid #B7A99A;

    border-bottom:1px solid #B7A99A;

    padding:6px 8px;

    margin-left:20px;

    margin-bottom:4px;

    min-width:420px;

    max-width: fit-content;
}

.reply::before{

    content:">>";

    color:#B7A99A;

    margin-right:6px;

    font-weight:bold;
}

.replyAuthor{

    color:#117743;

    font-weight:bold;

    margin-bottom:4px;
}

.replyMessage{

    line-height:1.35em;

    white-space:pre-wrap;

    overflow-wrap:break-word;
}

/* ================= GREENTEXT ================= */

.greentext{

    color:var(--green);
}

/* ================= MODAL ================= */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.72);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;
}

.modalBox{

    width:420px;

    background:#EEF2FF;

    border:1px solid #6B80D6;

    padding:14px;
}

.modalBox h2{

    color:#29469E;

    margin-top:0;

    margin-bottom:10px;

    font-size:14pt;
}

.rulesText{

    background:#FFF;

    border:1px solid #B5C7FF;

    padding:10px;

    line-height:1.7;

    margin-bottom:12px;
}

/* ================= REPLY FORM ================= */

.replies input,
.replies textarea{

    margin-top:4px;
}

.threadId,
.replyId{

    color:#000 !important;

    font-weight:normal;

    margin-left:4px;
}

.threadDate,
.replyDate{

    color:#000 !important;

    font-weight:normal;

    margin-left:6px;
}

/* ================= FOOTER ================= */

footer{

    text-align:center;

    color:#800;

    font-size:9pt;

    padding:18px 0;
}

/* ================= MOBILE ================= */

@media(max-width:760px){

    .postForm{

        width:96%;
    }

    .reply{

        min-width:auto;

        width:calc(100% - 28px);
    }

    .formRow{

        flex-direction:column;
    }

    .formLabel{

        width:100%;
    }

    .logo{

        font-size:22px;
    }
}