/*Theme: Buoyant
by: sHaHaHark*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&family=Source+Code+Pro:ital,wght@0,200;0,400;0,500;0,700;1,400&display=swap');
* {margin:0; padding:0;box-sizing:border-box;}
:root {
    --bg:#fff9cd;
    --hdr:#ffe69f;
    --txt:#324f85;
    --ar:#d72b57;
    --gn:#8c4fae;
    --mt:#d58f49;
    --ch:#05a284;
    --gp:#4a95ff;
    --cy:#994bf0;
    --hh:#f249c8;
    --hvr:#ebc366;
}
body {
    margin:0 0 0 165px;
    background:var(--bg);
    color:var(--txt);
    font-family:'Source Code Pro', 'M PLUS Rounded 1c', monospace;
}
a[href*="meta:"], a[href*="meta%3A"], a[href$="translated"], a[href$="animated"], a[href$="koikatsu_card"], a[href$="third-party_edit"], a[href$="colorized"], a[href$="decensored"], a[href$="ai_generated"] {color:var(--mt);}
a[href*="hash:"], a[href*="hash%3A"], a[href$="_ch."] {color: var(--hh);}
a[href*="group:"], a[href*="group%3A"], a[href$="&tags=indie"] {color: var(--gp); font-weight:700!important;}
a[href*="gen:"], a[href*="gen%3A"] {color: var(--gn); font-weight:700!important;}
a[href*="art:"], a[href*="_(artist)"], a[href*="art%3A"], a[href*="_%28artist%29"], a[href*="drawfriend"], a[href*="color:"], a[href*="color%3A"], a[href*="colorfriend"], a[href*="cos:"], a[href*="cos%3A"] {color:var(--ar);}
a[href*="char:"], a[href*="char%3A"], a[href*="_(character)"], a[href*="_%28character%29"], a[href*="_(vtuber)"], a[href*="_%28vtuber%29"] {color:var(--ch);}
a[href*="copy:"], a[href*="copy%3A"], a[href*="_(series)"], a[href*="_%28series%29"], a[href$="&tags=koikatsu"] {color:var(--cy);}
a[href*="_request"], a[href*="tagme"] {padding: 0.1em 0.4em; border-radius: 3px;font-weight: bold; color:#fff; background:var(--mt);}
a[href*="artist_request"] {background-color:var(--ar);}
a[href*="character_request"] {background-color:var(--ch);}
a[href*="copyright_request"] {background-color:var(--cy);}
a {
    color:var(--txt);
}
a[href*="uname="] {font-weight:700;}
a[href*="page=ban_user"] {color:var(--ar);}
a:hover {color:var(--hvr);}
#header h2 {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
#header h2 a {font-size:0; font-weight:200; font-style:normal; white-space:nowrap;}
#header h2 a::before {content:'/vt/booru @ youtube.booru.org'; font-size:2.5rem;}

#header {position:fixed; top:0; left:0; display:flex; background:var(--hdr); padding:.5em; height:100vh; width:165px;}
#header a {text-decoration:none;}
#navbar li:nth-child(5) a {color:var(--gp); font-weight:700; text-transform:uppercase;}
#navbar li:nth-child(5) a::after {content:'/INFO';}
#navbar a strong {color:var(--ar);}
#navbar li:nth-child(5) a:hover, #navbar a strong:hover {color:var(--hvr);}
li {list-style:none;}

#long-notice {padding:.5em;}
#long-notice::before {content:'friends: holo.booru.org'; font-size:16px;}

#tags~input, #stags~input, input[type=submit] {cursor:pointer;}

.thumb a:hover img, .col1 img:hover {transform:scale(1.07);}
span.thumb {
    background:var(--txt);
    justify-content: flex-end;
    width: auto;
    height: 253px;
    margin: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    float: left;
    text-align: center;
    transition: 0.15s ease-in-out;
}
.thumb a:first-of-type {
    background:var(--txt);
    width:100%;
    height:100%;
    align-items:center;
    padding: 11px;
}
[onclick*="favorites&s=delete"] {
    background:var(--ar);
    text-decoration:none;
    padding: 0.3em;
    color:#fff;
    z-index: 999;
    transition: 0.15s ease-in-out;
}
[onclick*="favorites&s=delete"]:hover {background:var(--hh); color:#fff;}
span.thumb br {display:none;}
#post-list span.thumb {background:var(--txt); display:inline-flex; float:none; align-items: center; justify-content: center; vertical-align:middle;}
.col1 img, .thumb img {transition:0.15s ease-in-out; overflow:hidden;}
span.thumb:hover {transform: translateY(-4px); box-shadow: 0 10px 16px -3px #7d6f5a;}
img[title ~= "meta:from_vt"], img[title ~= "meta:from_jp"], img[title ~= "meta:from_d"], img[title ~= "meta:from_ic"] {box-shadow:0 0 0 15em #db96aa;}
img[title ~= "meta:drawthread"] {box-shadow:0 0 0 15em #dbc9a0;}
img[title ~= "ai_generated"] {box-shadow:0 0 0 15em #86b89d;}
img[title ~= "animated"] {outline:7px solid #2c83ff;}
img[title ~= "third-party_edit"] {outline:7px solid #f58840;}
img[title ~= "colorized"] {outline:7px solid var(--ar);}

#tag_list {font-size:.85em; word-break:break-word;}
#tag_list li a {font-weight:500; text-decoration:none;}
#tag_list li a:hover {text-decoration:underline;}

#content {
    padding:.5em;
}
#post-list {
    display:flex;
}
.sidebar {
    max-width:200px;
    min-width: 200px;
    height: min-content;
}
#post-list .content > div {
    display: grid;
    grid-template:
        "foot" auto
        "pages" auto
        "ignore" auto
        "thumb" auto
        "ads2" auto
        "ads" auto / 100%;
    text-align:center;
}
.divTable {grid-area: ads2;width: auto!important; margin-top:50em; z-index:-1;}
#post-view .divTable {margin:0;}
#post-view > a {text-decoration:none;}
#post-list .content div:nth-child(3) {grid-area: thumb;}
#post-list .content div:nth-child(6) {grid-area: ignore; margin:.5em 0 !important; text-align:left!important;}
#ci {display:inline-block;}
a#pi, #ci {color:var(--ar); font-style:italic; padding:0 1em;}
a#pi:hover, #ci:hover {color:var(--hvr);}
#paginator {grid-area: pages;display: flex;flex-wrap: wrap;justify-content: center; clear:both; margin:.5em;}
#paginator > * {text-decoration: none; padding: 0 0.3em;}
#paginator a {color:var(--txt);}
#paginator b {color:var(--hvr);}
#paginator a:hover {background:#c0e7ff; color:var(--txt);}
#footer {grid-area: foot;text-align: center; margin:.5em 0; font-size:20px; font-weight:700;}
#footer a {text-decoration:none;}
center {grid-area:ads; margin-top:50em;}
.divTable {grid-area: ads2; width: auto!important;}
.divTable + div {display: none;}
#right-col div > div:nth-child(3) {grid-area:notes;}



/*POST VIEW*/

#post-view {width: 100%; max-width: unset!important;}
#post-view .sidebar {float:left; margin-right:1.5em;}
#image {max-width:100%; margin-right:0!important; margin-bottom:0.5em; max-height:125vh;}
#right-col > div {
  float:none!important;
  display:grid;
  grid-template:"notes" auto
  "ads2"auto/100%;
}
#right-col > div:nth-child(2) {display:none;}
div#note-container {position:relative;}
div#post-view div.note-box {position: absolute;border: 1px solid black;width: 150px;height: 150px;cursor: move;background: #FFE;overflow: auto;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;}
div#post-view div.note-corner {background: black;width: 7px;height: 7px;position: absolute;bottom: 0;right: 0;cursor: se-resize;}
div#post-view div.note-body {background: #FFE;border: 1px solid black;display: none;width: 140px;height: 100px;position: absolute;padding: 5px;cursor: pointer;overflow: auto;}
a[onclick*="addFav"] {font-size:0;}
a[onclick*="addFav"]::after {content:'Favorite'; font-size:1rem!important; font-weight:700;}
a:hover[onclick*="addFav"]::after {color:var(--lgt);}
[id^="c"][style$="line;"] > br:first-of-type {display: none;}
[id^="c"][style$="line;"] {border:1px solid var(--txt); display:table!important; background:var(--lst); padding:.7em 1em 1em; margin:1em 0; max-width:700px; box-shadow:6px 6px 0 var(--txt); word-break:break-word;}
[id^="c"][style$="line;"] b {color:#a99880; margin:0.5em 0; font-size:0.8rem;}
[id^="c"][style$="line;"] a:nth-child(n+3) {text-decoration:underline; color:var(--gp);}
[id^="c"][style$="line;"] [href*="uname="]:hover {color:var(--gp)!important; text-decoration:none;}
[id^="c"][style$="line;"] a:nth-child(n+3):hover {color:var(--txt)!important; text-decoration:none;}
[id^="c"][style$="line;"] [href*="uname="] {font-weight:700; text-decoration:none;}

[id^="c"][style$="line;"] a[onclick*=\000027up\000027\000029], [id^="c"][style$="line;"] a[onclick*=\000027down\000027\000029] {display:none;}
#note-container > a {text-decoration:none;}
#note-container > a:hover {color:var(--hvr);}
#tag_list li:last-child {display:none;}







/*FORUM MAYBE IDK*/

.highlightable {
    font-size: .8em;
    letter-spacing: .03em;
}


table {border-collapse: collapse; overflow: hidden;}
table.highlightable, #account-favorites-list {width:99%; margin:1em auto; box-shadow:4px 4px 0 var(--txt); border:2px solid var(--txt);}
th {font-weight: 700;text-align: left;background-color:var(--txt);color:var(--hdr);white-space: nowrap;}
th, tr, td {padding: 0.2em 0.5em;}
.highlightable tr:hover, #account-favorites-list tr:hover {background-color:#c0e7ff;}
.highlightable a, #account-favorites-list a {font-weight:700; text-decoration:none;}
table.highlightable tr:hover a:hover, #account-favorites-list tr:hover a:hover {color:var(--gp);}
tr.pending-tag {background:var(--hvr);}
tr:hover.pending-tag {background:var(--mt);}
span.locked-topic {color:var(--ar);font-weight: 700;text-transform: uppercase;font-size: 0.9em;letter-spacing: 0.05em;}

#forum {max-width:800px; padding:5px;}
#forum .post {display:flex; gap:1em; margin:3em 0;}
.post .content {word-break: break-word;}
.post > .author {align-self:flex-start; min-width:200px; padding:1em 0; position:sticky; top:0;}
.author a {word-break:break-all; text-decoration:none;}
.author .date {color:#a99880; font-size:0.8rem;}
#forum .body {padding:1em; border:1px solid var(--txt); font-size:0.9rem;}
.response-title {padding:1em;}
.response-title {padding:7px 0 0 0; line-height:1.333em;}
.response-title:empty {display:none;}
.response-title {font-size:1.333em; letter-spacing:-0.03em;}
.body a {color:var(--gp); text-decoration:underline; word-break:break-all;}
.body a:hover {color:var(--txt); text-decoration:none;}
.quote {font-size:0.9rem; background:var(--hdr); border:1px solid var(--mt); padding:.5em;}
.quote .quote {
  border:none;
  border-left: 3px solid #b388ba;
}
.quote:first-line {
  font-weight:700;
  color:var(--ch);
}
.spoiler, .spoiler a {background:var(--txt); color:var(--txt);}
.spoiler:hover {color:#fff;}
.spoiler:hover a {color:#7dc2f8;}
.spoiler:hover a:hover {color:var(--gp);}
.footer {margin:1em 0;}
.paginator+center {margin:0;}


/*COMMENTS*/
#comment-list2 {max-width:1200px; margin:1em auto 0;}
#comment-list2+div {margin-top:8em!important; float:none!important;}
#comment-list2 .post {
  display:grid;
  grid-template:"pic tags" auto
  "pic coms" auto
  "pic coms" auto / 215px auto;
  gap:0.5em;
  margin: 0 auto 3em;
  padding: 0 1em 3em;
  border-bottom: 2px solid #a99880;
  max-width: 800px;
  position:relative;
}
.col1 {grid-area:pic;}
.col1 img {position:sticky; top:1em;}
.col2 {grid-area:coms;}
.col3 {grid-area:tags; padding:1em; font-size:0.8rem; border:1px solid var(--txt);}
.col3 li:nth-child(n+4) {background:var(--drk); padding:2px; border-radius:5px; margin:2px .5em;}
.comment {border:1px solid var(--txt);padding:0.5em; margin:.5em 0;}
.post-info li {display:inline-block; margin-right:.5em; color:#a99880;}
.col1 img {box-shadow:none;}




form tbody {
    border:1px solid var(--txt);
}


/*OPTIONS*/
p {margin:1em 0;}
.option {max-width:1000px;}
.option td {vertical-align:top;}
.option textarea {
  width: 400px;
  height: 100px;
}
.option + .option {background:var(--lk2); padding:.5em;}
label{font-weight:700;}



/*ACCOUNT*/
#user-index, .help {border:1px solid var(--txt); padding:1em;}
#user-index h2, #user-index b {color:var(--ar); font-size:1.5em;}
#user-index > *, .help > * {max-width:650px;}
#user-index h4 a {font-size:1.2em; font-weight:700;}



/*STATIC*/
#static-index {
    color:var(--bg);
    background:var(--txt);
    max-width:600px;
    border:2px solid var(--txt);
    padding:4em 1em;
    margin:3em auto 1em;
    text-align:center;
  }
  #static-index a {color:#ffc97b; text-decoration:none;}
  #static-index a:hover {color:var(--bg);}
  #static-index h1 {font-size:3em!important; margin:0 0 15px!important;}
  #static-index h1 a {font-size:0;}
  #static-index h1 a::after{content:'/vt/booru'; font-size:2.5rem!important; font-weight:200;}
  #static-index a {font-weight:700;}
  #static-index form {display:flex;}
  #links {display:flex; flex-wrap:wrap; gap:1em; justify-content: center; font-size:1em; font-weight:500;}
  #links + .space {width:min-content; margin:1em auto;}



/*MEDIA QUERIES*/
@media screen and (max-width: 1000px) {
    #long-notice {width:100%;}
    .sidebar {
      display:flex;
      max-width:100%;
      flex-basis:auto;
      height:96px;
      flex-direction:row;
    }
    #tag_list {height:96px; overflow:auto;}
    #tag_list ul li {
      display: inline-block;
      margin:0 4px;
    }
    #post-list {
      flex-direction:column;
    }
    #post-view .sidebar {
      float: none;
      width: auto;
      margin: 0 0 1em;
      display: flex;
      padding: 0;
    }
    #right-col div > div:nth-child(3) {
      margin: 0 0.5em;
    }
    #comment-list2 .post {flex-direction:column; gap:0;}
    .col1 {position:static;}
    .post-info li:nth-child(n+4) {display:inline-block; margin:2px .5em;}
  }
  
  @media screen and (max-width: 750px) {
    body {margin:0;}
    #header {
      position:static;
      width:100%;
      flex-direction:column;
      height:auto;
      padding:0.5em;
    }
    #header h2 {writing-mode:horizontal-tb;}
    #header h2 a::before {font-size:1.1rem; font-weight:500;}
    #navbar {
      display: inline;
      font-size: 1em;
      font-style: normal;
      letter-spacing: .02em;
      line-height: 1.6em;
    }
    .flat-list li, .flat-list a {
      display: inline;
      width: auto;
    }
    #image {max-width:100%;}
    #comment-list2 .post {
      grid-template:"pic" 215px
      "tags" auto
      "coms" auto / auto;
    }
    .col1 {align-items: center; justify-content: center; display: flex;}
    .col1 img {position:static;}
    #forum .post {
        flex-direction:column;
        gap:0;
      }
      .post > .author {position:static; padding:0 0 .5em;}
  }
  
  @media screen and (max-width: 600px) {
    .sidebar {
      height:142px;
      flex-direction:column;
    }
  }
  
  @media screen and (max-width: 500px) {
    #header {flex-direction:column;}
  }