:root {
    color-scheme: light dark;


    --bg-color: light-dark(#f8faff, #121212);
    --accent-color: light-dark(#393736, #d2d6dc);
    --gradient: light-dark(#d5d5d5, #000000);

    --panel: light-dark(#ececec, #191919);
    --text: light-dark(#232323, #d7d7d7);
    --bar: light-dark(#adff9d, #adff9d);
    --rage: light-dark(#b20000, #ed5c5c);
    --greentext: light-dark(#4a7524, #a7d882);
    --back: light-dark(#d5d5d5, #8b8b8b);
    --border-color: light-dark(#232323, #4d4d4d);
    --e: light-dark(#ececec, #191919);
    --ee: light-dark(#d5d5d5, #000000);
    --mt: light-dark(#232323, #d7d7d7);
}



* {
    margin: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'IPAMonaPGothic';
    src: local(IPAMonaPGothic),url('IPAMonaPGothic.woff2') format('woff2'),
        url('IPAMonaPGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Monapo';
    src: local(Monapo),url('Monapo.woff2') format('woff2'),
        url('Monapo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mona';
    src: local(Mona),url('Mona.woff2') format('woff2'),
        url('Mona.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: "RobotoJAA";
  src: url("RobotoJAA.woff2") format("woff2"),
    url("RobotoJAA.woff") format("woff");
  font-display: swap;
}

.RobotoJAA {
  font-family: "RobotoJAA";
  white-space: pre;
  font-size: 16px;
  line-height: 18px;
}

body {
    background-image: linear-gradient(var(--gradient),var(--bg-color));
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    background-color: var(--bg-color);
    position: relative;
    font-family: RobotoJAA, Monapo,Mona,IPAMonaPGothic,"MS Pgothic", "ＭＳ Ｐゴシック", sans-serif;
    /* font-family: Arial, sans-serif; */
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    padding-inline-start: 0;
}


table,
th,
td {
    border: 1px solid black;
}

span {
    display:inline-block;
    line-height: 1; 
  margin: 0;  
}

.signature {
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--greentext); 
  word-wrap: break-word;
  font-size: 14px
}
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: linear-gradient(var(--panel), var(--gradient) );
     height: 40px;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);

}

.navbar div {
    margin: 0;
}

.navbar-left {
    display: flex;
    align-items: center;
}

.navbar-middle {
    display: flex;
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    justify-self: center;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 7px;
}

.nav-button {
    width: 80px;
    margin: 5px;
}

.title h2 {
    color: var(--accent-color);
}

.title:hover {
    animation: shake-2 0.15s infinite;
}

.navbar-right a {
    text-decoration: none;
    color: var(--accent-color);
}

.nav-list {
    display: flex;
    list-style-type: none;
    gap: 10px;
    justify-content: left;
    padding: 0;
    color: var(--text)
}

.nav-list p {
    color: var(--text);
}

#navbar2 {
    display: none;
}


.tab-nav {
    display: flex;
    list-style-type: none;
    justify-content: center;
    gap: 10px;
    padding: 7px 0;
}

.tab-nav p {
    color: var(--text);
}

.tab-nav li a {
    color: var(--text);
}

.tab-nav-div {
    background-image: linear-gradient(var(--panel), var(--gradient));
    border-bottom: 1px solid var(--border-color)
}


.body {
    display: flex;
    justify-content: space-evenly;
}

.anchor {
    overflow-anchor: auto;
    height: 1px;
}

.body-left {
    height: 100vh;
    overflow-y: visible;
    flex: 1;
    width: 50%;
   

    &::-webkit-scrollbar {
        display: none;
    }
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.body-right {
   
    min-width: 300px;
     padding: 0px 7px 0px 7px;
    
}
.body-right2 {
   
    min-width: 300px;
     padding: 0px 7px 0px 7px;
    
}
.body-right1 {
   
    min-width: 300px;
     padding: 0px 7px 0px 7px;
    
}

.body-thread {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding-top: 5px;

}

.body-admin {
    height: 100vh;
    width: 100vw;

    display: flex;
    flex-direction: column;
    align-items: center;
}


#threads {
    display: flex;
    align-items: center;
flex-direction: column;
    color: var(--text);


}
.report-win {
    margin: 10px;
    background-image:
        linear-gradient(var(--panel), var(--gradient));
    padding: 5px;
    border: 1px solid var(--border-color)
}
.thread {
    max-height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    background-image:
        linear-gradient(var(--panel), var(--gradient));
    overflow-wrap: break-word;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
    line-height: 1;
    margin: 7px 3px 0px 3px;
    z-index: 1000;
    position: relative
}

#threads .allthreads {
    display: block;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
}

.thread:hover {
  
    animation: shake-2 0.15s infinite;
}
.shaker {
    animation: shake-2 0.15s infinite;
}
.thread-text {
    overflow-y: hidden;
    overflow-x: hidden;
    white-space: pre-wrap;
    display: flex;
    flex: 1;
    overflow-wrap: break-word;
    justify-content: left;
    align-content: start;
    
}

.thread-index-text {
    padding: 7px;
    overflow: hidden;
    width: 100%
}

.thread-update {
    width: 100%;
}

.bot-thread {
    display: flex;
    justify-content: space-between;
}

.thread-options {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--text)
}

.options-div {
    padding: 5px 0px 12px 0px;
}


.post {
    border: 1px solid var(--border-color);
    margin: 0px 0.1% 10px 0.1%;
    color: var(--text);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
    width: 99.8%;


}
.backpanel { 
    background-color: var(--panel);
              display: flex;
              justify-content: space-between;
              flex-direction: column;
              padding: 7px;
            border-top: 1px solid var(--border-color);
}
.replylist {
    background-image: linear-gradient(
                  var(--panel),
                  var(--gradient)
                );
                border-top: 1px solid var(--border-color);
                width: 100%;
                padding-bottom: 5px;
                
}
.post-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image:
        linear-gradient(var(--panel), var(--gradient));

    /* border-bottom: 1px solid var(--border-color); */

    padding: 5px;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    margin: 0;
}

.post-replies {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 5px;
    list-style-type: none;
    margin: 0 5px;
    padding-top: 5px;
}

.post-replies li {
    display: block;
}
#post-container {
   
     width: 100%;
    
}


.post-green {
    height: 4px;

    background-image:
        linear-gradient(var(--bar), var(--gradient));

    margin: 0;
    padding: 0;

}

.post-body {
    line-height: 1;
    white-space: pre-wrap;
    max-width: 65vw;
    overflow-wrap: break-word;
    position: relative
}

.post-bar {
    height: 4px;

    background-image:
        linear-gradient(var(--back), var(--text));
    border-top: 1px solid var(--accent-color);

    box-sizing: content-box;
}

.last-post {
    display: flex;

    color: var(--accent-color);
    

    padding: 0 0 0 7px;
}

.last-post p {
    margin-bottom: 4px;
}

.bold {
    font-weight: bold;

}

.italic {
    font-style: italic;
}



.moshpit-name {
    display: flex;
    justify-content: left;

    background-color: var(--accent-color);
    color: var(--bg-color);

    padding: 7px;
    border-bottom: 2px solid var(--border-color);
}

.moshpit-info {
    padding: 0;
    margin-top: 7px;

    border: 1px solid var(--border-color);
    background-color: var(--accent-color);

    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
}

.info-list {
    list-style-type: none;

    padding: 7px 0 7px 7px;

    background-image:
        linear-gradient(var(--e), var(--ee));
    color: var(--mt)
}

.misc-text {
    padding: 0 7px 7px;
    color: var(--text);
    margin-top: 5px;
    line-height: 1.4;
}

.search input {
    width: 10vw;
    border-radius: 0px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color)
}


#rule-select {
    width: 200px;
}
.hoverquote {
    pointer-events: none
}
label {
    display: block;
    padding: 5px 0 0 5px;
}

.modal-form {
    color: var(--text);
}

.modal-top {
    display: flex;
    justify-content: space-between;
}

.modal-top div p {
    padding: 5px;
}

.modal-top div button {
    margin: 5px;
}

.modal-input textarea {
    width: 435px;
    margin: 5px;

}

.modal-input input {
    width: 97%;
}

#reply-textarea {
    margin: 0px;
    width: 100%;
    height: 80px;
    border-radius: 0px;
    border: 1px solid var(--border-color);
    font-size: 16px;
}

#reply-sig {
   border-radius: 0px;
    border: 1px solid var(--border-color) 
}

#modal-form div select {
    margin: 3px;
    padding: 0;
    width: 200px;
}

#modal-form div button {
    margin: 3px;
}

#create-thread2 {
    border: 1px solid var(--border-color);
    border-radius: 0px;
    color: (var(--text))
}

#pages {
    border: 1px solid var(--border-color);
    border-radius: 0px
}
#create-thread-box {
    position: fixed;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    min-width: 400px;
    min-height: 615px;

    background: var(--panel);
    border: 1px solid var(--accent-color);

    overflow-x: hidden;
}

#report-box {
    position: fixed;

    left: 50%;

    transform: translate(-50%, 50%);

    width: 385px;
    height: 170px;

    background: var(--panel);
    border: 1px solid var(--accent-color);

    overflow-x: hidden;
    overflow-y: hidden;
}

#report dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.9);
}

#report {
    margin-left: 10px;

    background-color: var(--text);
    color: var(--bg-color);
}

.announcement {
    display: flex;
    justify-content: center;

    margin-top: 7px;

    color: var(--rage);
    font-weight: bold;
}


.popup {
    position: fixed;

    z-index: 1000;

    background-color: var(--panel);
    border: 1px solid var(--accent-color);

    min-width: 300px;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.hidden {
    display: none;
}

.popup-header {
    padding: 5px;

    cursor: move;

    background-image:
        linear-gradient(var(--panel), var(--gradient));

    color: var(--text);
    font-weight: bold;

    user-select: none;

    height: 30px;

    display: flex;
    justify-content: space-between;
}

.popup-body {
    padding: 20px;
    color: var(--text);
}



.code {
    white-space: pre-wrap;
    width: fit-content;
    overflow: auto;
    margin-top: 4px;
    padding: 10px;
    background-image:
        linear-gradient(var(--panel), var(--gradient));
    border: 1px solid var(--border-color);

    color: var(--text);
}

s {
    color: #000;
    background: #000;
    text-decoration: none;


}
.big {
    font-size: 2rem;
}
.greentext {
    color: var(--greentext)
}
.rage {
    color: var(--rage);
}

.gay {
    background:
        linear-gradient(to right,
            #6666ff,
            #0099ff,
            #00ff00,
            #fff200,
            #ff3399,
            #6666ff);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    animation: rainbow_animation 0.5s infinite;

    background-size: 400% 100%;
}

.trans {
    background:
        linear-gradient(to right,
            #5badff,
            #ffffff,
            #f581ff);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    animation: rainbow_animation 0.35s infinite;

    background-size: 400% 100%;
}

.police {
    background:
        linear-gradient(to right,
            #5badff,
            var(--rage));

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    animation: rainbow_animation 0.2s infinite;

    background-size: 400% 100%;
}



s:hover {
    color: white;
}


.shake-1 {
    animation: shake-1 0.12s infinite;
}

.shake1 {
    animation: shake-1 0.12s infinite;
}

.shake2 {
    animation: shake-2 0.12s infinite;
    font-weight: bold;
}

.shake3 {
    animation: shake-1 0.12s infinite;
    font-weight: bolder;
    font-size: 2rem;

}
.shake3a {
    animation: shake-1 0.12s infinite;
    font-weight:bolder;
    font-size: 2rem;
    position: absolute;
}


.vert {
    animation: vertical-shaking 0.25s infinite;
}

.verta {
    animation: vertical-shaking 0.25s infinite;
}

.hori {
    animation: horizontal-shaking 0.25s infinite;
}

.hori1 {
    animation: horizontal-shaking 0.25s infinite;
}

.hori2 {
    animation: horizontal-shaking 0.25s infinite;
    font-weight: bold;
}

.hori3 {
    animation: horizontal-shaking 0.25s infinite;
    font-weight: bold;
    font-size: 2rem;
}
.hori3a {
    animation: horizontal-shaking 0.25s infinite;
    font-weight: bold;
    font-size: 2rem;
    position: absolute;
}
.italic1 {
    font-style: italic;
}

.italic2 {

    font-style: italic;

    font-weight: bold;
}

.italic3 {
    font-style: italic;

    font-weight: bold;
    font-size: 2rem;
}

.glow {
    animation: glow 0.3s ease-in-out infinite alternate;
    /* color: var(--text); */
}

.schizo {
    animation: skew-x-shaking 0.5s infinite;
}
.schizoa {
    animation: skew-x-shaking 0.5s infinite;

}
@-webkit-keyframes glow {
    from {
        text-shadow:
            0 0 5px #9beb97,
            0 0 10px #9beb97,
            0 0 15px #1be600;
    }

    to {
        text-shadow:
            0 0 10px #9beb97,
            0 0 15px #1be600,
            0 0 20px #1be600;
    }
}


@keyframes rainbow_animation {

    0%,
    100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

@keyframes shake-1 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(3px, 1px) rotate(0.7deg);
    }

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

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

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

@keyframes shake-2 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(1px, -1px) rotate(-0.2deg);
    }

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

    75% {
        transform: translate(2px, 1px) rotate(0.3deg);
    }

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

@keyframes vertical-shaking {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(2px);
    }

    50% {
        transform: translateY(-2px);
    }

    75% {
        transform: translateY(2px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes horizontal-shaking {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(2px);
    }

    50% {
        transform: translateX(-2px);
    }

    75% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes skew-x-shaking {
    0% {
        transform: skewX(-15deg);
    }

    5% {
        transform: skewX(50deg);
    }

    10% {
        transform: skewX(-15deg);
    }

    15% {
        transform: skewX(15deg);
    }

    20% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}


#search {
    display: none;
    font-size: 16px;
}


@media (max-width: 1300px) {

    #threads {
        grid-template-columns: 1fr;
    }

    .body-right {
       display: none
       
    }
    #search {
        display: flex;
        justify-content: center;
        margin-top: 7px;
    }
    #search input {
        width: 200px;
    }
    #navbar {
        display: none
    }

    #navbar2 {
        display: flex
    }

    .post-header {
        
        min-width: 370px;
    }

    .extra-post {
        width: 98vw;
    }
    .body-right1 {
        display: none
    }

}

/* .extra-post {
    width: 50vw;
} */