@import url('https://fonts.upset.dev/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/bold/style.css');
@import url('https://fonts.upset.dev/css2?family=M+PLUS+1+Code:wght@100..700&display=swap');

@import url('https://fonts.upset.dev/css2?family=Lexend:wght@100..900&display=swap');
:root {
    --dark:#6e4634;
    --light:#fff9dd;
    --acc: #555;
    --light2: #e5d9bf;
    --linkHover:#8C5E4F;
    --font: "Poppins", sans-serif!important;
    --padding:1.25em;
    --border: var(--dark) solid 0.25em;
    --border2: var(--light) solid 0.25em;
    --sidebar: 15%;
    --rightbar: 7.5%;
    --borderRad: 0.5em;
    --postWidth: 5%;
    --backgroundThickness: 20px;
    --tagSpace: 5px;
}
html {
    filter: brightness(90%) contrast(110%) grayscale(10%) sepia(10%);
}
::-moz-selection, ::selection {color:var(--dark); background:var(--light2)}

* { image-rendering: -webkit-optimize-contrast;  image-rendering: crisp-edges !important;  image-rendering: pixelated !important; margin:0; padding:0; scrollbar-color: transparent transparent !important; scrollbar-width: thin !important;  transition: .25s ease; line-height:1.6}
html { font-family:var(--font); color:var(--dark); background:var(--light);font-weight:500; zoom:120%}

a { font-weight:800!important }
post a { color:var(--dark);}
post a:hover { color:var(--linkHover) }
tags a { color:var(--light);}
tags a:hover { color:white;}

post img, post iframe, post video, post audio {border:var(--border); border-radius:var(--borderRad); filter: sepia(10%); margin:auto}

html { background-color: var(--light);
background-image: repeating-linear-gradient(45deg, transparent, transparent var(--backgroundThickness), var(--light2) var(--backgroundThickness), var(--light2) calc(var(--backgroundThickness) * 2)); background-position: fixed}

sidebar { display:block; position:fixed; left:0; top:0; background:var(--dark); color: var(--light); padding:var(--padding); width:var(--sidebar); height:100vh; overflow-y:auto; text-align:left;
 background-image: linear-gradient(to bottom, transparent 33%, var(--dark) 33%), url("../assets/profile/header.jpg");  background-position: auto, auto; background-repeat: no-repeat, no-repeat; background-size: auto, 120% auto;
}

main {display:relative;margin-left:calc(var(--sidebar) + var(--padding) * 2); padding:0 var(--padding); min-height:100vh; }
body:has(right) main {margin-right :calc(var(--rightbar) + var(--padding) * 2)  }
header { height:100px; border-bottom:var(--border); margin: 0 -1.5em 0; overflow-x:hidden; padding:var(--padding) calc(var(--padding) * 2);}
post, filter  { display:block; border:var(--border); padding:var(--padding); margin: var(--padding) var(--postWidth);background:var(--light); border-radius:var(--borderRad); zoom:110%;}

filter {  background:var(--dark); color: var(--light);}

sidebar #pfp { border-radius:100%; width:75%; border:var(--border2); margin:auto; margin-left:var(--padding); margin-top:10%; text-align:center; margin-bottom:0.5em}
sidebar p:nth-of-type(1) {font-size:smaller; border-radius:var(--borderRad); margin:0.5em auto; text-align:left}
sidebar h2 { text-align:center; margin-left:-0.25em }
i { font-size:smaller }
sidebar hr { border:none; background:none; border-top: var(--border2); border-radius: var(--borderRad); margin: var(--padding) auto }

sidebar p.markTime  { margin:0.75em auto 0.5em; }

sidebar mark { background:var(--light); color: var(--dark); font-weight:800; border-radius:var(--borderRad); padding:1px 10px; margin-right:var(--padding); font-size:smaller }
sidebar mark:nth-of-type(2) { margin-right:5% }
sidebar mark i { margin-right:5px; font-size:90% }

right { display:block; position:fixed; right:0; bottom:0; background:var(--dark); color: var(--light); width:var(--rightbar); height:100%; overflow-y:auto; text-align:left; padding:0 var(--padding)}
right a, right a:hover, sidebar a, sidebar a:hover { color:var(--light) }
.center { text-align:center }
right h2:nth-of-type(1) { margin:var(--padding) 0 calc(var(--padding) * 0.5) }

tags {
    display:block;
    /*margin-top:1.25em;
    border-top: var(--hr);
    padding-top:0.75em;*/
    margin: var(--padding) calc(var(--padding)  * -1.25) calc(var(--padding)  * -1.25);
    padding: calc(var(--padding) * 0.5) var(--padding);
    font-size:smaller;
    background:var(--dark);
    color:var(--light);
    text-align:left

}
    tags p {display:inline;font-size:smaller; text-decoration:underline;             text-align:right; opacity:0.8; }
    tags p:last-child {margin-right:0}
    tags p::before {content:"#"} 
    tags p::after {content:",";text-decoration:none !important; margin-right:calc(var(--padding) * 0.5);} 
    tags p:last-child::after {content:"";text-decoration:none !important; margin-right:0px}

    date { display:block; margin: calc(var(--padding)  * -1.25) calc(var(--padding)  * -1.25) var(--padding); padding: calc(var(--padding) * 0.5) var(--padding);  font-size:smaller;
    background:var(--dark);   color:var(--light); font-weight:bold; text-align:right;
    display:flex; justify-content:space-between;}

    date::before { display:inline; content: "@jimothie"; }
    post tags::before {display:inline-block; font-weight:bold;  content: "untagged,"; line-height:25%;font-size:smaller; text-decoration:underline; margin-right:calc(var(--padding) * 0.5); opacity: 0.8}
    post[class~="vocaloid"] tags::before { content:"#vocaloid,";}
    post[class~="fannish"] tags::before { content:"#fannish,";}
    post[class~="meta"] tags::before { content:"#meta,";}
    post[class~="limverse"] tags::before { content:"#limverse,";}
    post[class~="art"] tags::before { content:"#art,";}

    post img { max-width:75%; margin:calc(var(--padding) * 0.5) auto; display:block}
    post:has(img ~ img ~ img) img { margin: 5px;display:inline!important}

    post br {
    display:block;
    content: "";
    margin: calc(var(--padding) * 0.25) 0 !important;
}

lim, voca { font-weight:900; text-transform:uppercase }
voca { font-family: "M PLUS 1 Code", monospace; }
.noBorder {
    border: none !important;
    border-radius: 0 !important;
}

post a[href*="//"]::after {
  content: "";
  width: 1em;
  height: 0.75em;
  display: inline-block;
  background-color: var(--dark);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-external-link'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-external-link'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  margin-left: 1px;
  margin-right:-0.1em;
}

post a:hover[href*="//"]::after {background-color: var(--linkHover);}
tags a[href*="//"]::after, tags a:hover[href*="//"]::after {height:0;width:0;margin:0}

summary {
    background: var(--dark);
    color: var(--light);
    padding: 5px 1em;
    font-weight:bold;
}

details[open] summary {
    padding-bottom: 0.5em;
    margin-bottom: 0.25em;
}
details {
    margin:1em 0;
    border: var(--border);
    border-radius: var(--borderRad);
}
details p {
    padding: 5px 1em 0.5em;
}

code { display:inline-block;padding: 1em; border: 1.25px solid var(--dark); border-radius: var(--borderRad) }

.smallImg {
    width:30%;
}
.bigImg {
    width:75%;
}

img {
  max-width: 100%;
  height: auto;
  pointer-events: none;
}

post post date::before, post post date::after{
    content: "";
}

post[class~="vocaloid"] post date::after {content: "";}
post[class~="news"] post date::after {content: "";}
post[class~="meta"] post date::after {content: "";}
post[class~="limverse"] post date::after {content: "";}
post[class~="art"] post date::after {content: "";}


post post[class~="status"] date::before {content: "re: status update (";}
post post[class~="status"] date::after {content: ")";}
post post[class~="status"] date {display:none}
post post:not(:has(date)) {padding: 0.5em 1em;
background:var(--dark);
color:var(--light);
border-radius:var(--borderRad);
margin: var(--padding);
font-weight: inherit;
font-size:smaller;
}

ul { 
    list-style: inside; 
}

ol { 
    margin-left:calc(var(--padding) * 1.5);
}

ul li ul {
    margin-left:var(--padding);
}

details ul { margin:var(--padding) }

.columnAlt {
    display:block;
  columns: 2;
  padding: 0px 15px; /* adds padding between the text and the border */
  column-gap: var(--padding);
}

.outline
{
    --c: var(--dark);
    --w: 0.15em;
    filter:
    drop-shadow(var(--w)0 0 var(--c))
    drop-shadow(calc(var(--w) * -1) 0 0 var(--c))
    drop-shadow(0 var(--w)0 var(--c))
    drop-shadow(0 calc(var(--w) * -1) 0 var(--c));
}

sidebar badges { text-align:center; margin:auto; display: flex;
  justify-content: space-between;}
sidebar badges img { margin:calc(var(--padding) * 0.75) 0 0.5em; width:40px;
    --c: var(--light);
    --w: 0.1em;
 filter:
     brightness(90%)
     sepia(75%)
    drop-shadow(var(--w)0 0 var(--c))
    drop-shadow(calc(var(--w) * -1) 0 0 var(--c))
    drop-shadow(0 var(--w)0 var(--c))
    drop-shadow(0 calc(var(--w) * -1) 0 var(--c)); }



/*sort code here*/

.collection:has(input:checked) post {
            display: none;}
.collection:has(#all:checked) post {
            display: block;}
.collection:has(#all:checked) post[class~="hide"] {
display: none;}

/*for blog*/
.collection:has(#art:checked) post[class~="art"], 
.collection:has(#limverse:checked) post[class~="limverse"], 
.collection:has(#fannish:checked) post[class~="fannish"], 
.collection:has(#meta:checked) post[class~="meta"], 
.collection:has(#vocaloid:checked) post[class~="vocaloid"]
{display: block;}

.tag-filters label {
  background:var(--dark);
  color:var(--light);
  margin-right: 1em;
  display: inline-block;
  text-align: left;
  padding:5px;
  padding-right:1em;
  padding-bottom:4px;
  font-weight: 600;
  border-radius:var(--borderRad);
  font-weight: 200;
  font-weight:800;
  font-size:smaller;
  min-width:90px;
}

.tag-filters label:last-child {
  margin-right: 0em;
}


input[type="radio"] { 
  appearance: none;
  border: none;
  display: inline-block;
  border: 5px solid var(--linkHover);
  border-radius: 50%;
  margin-left:1em;
  margin-right: 1em;
  zoom:90%;
}

input:checked[type="radio"] {
border: 5px solid var(--light);
}


.tag-filters {
  padding: 0.5em 0.5em;
  padding-left:0.8em;
  padding-bottom:0.7em;
  background: var(--light) !important;
}

@media screen and (max-width:800px) {
  .tag-filters label { display:block; margin-bottom:1em}
  .tag-filters label:nth-of-type(6){ margin-bottom:0}
  post img { width:100%!important }
}

details.filter {background: var(--light); width:89%; margin:1em auto; }
.filter summary::marker { content: ""; }

details.filter > summary::before {
   content:'\25BC';
  /*font-family: "M PLUS Rounded 1c", sans-serif;*/
  margin-right: 10px;
  vertical-align:0.2em;
  line-height:0;
}

details.filter[open] > summary::before {
   content:'\25B2';
   
}

summary h2 {display:inline; text-transform:lowercase}

#postNum {display:inline-block;min-width:28px}

back { display:block;position:fixed; bottom:var(--padding); right:var(--right); color:var(--dark); z-index:1000; background:var(--linkHover); color: var(--dark) !important; font-weight:800; border-radius:var(--borderRad); padding:1px 10px; font-size:smaller;margin-left:var(--padding);}
back:hover { background: var(--light)}


/*pride update*/
:root {
    --background:transparent; /* Change this if you want */
    --pink:#c45b8533;
    --red:#c54c4c33;
    --orange:#d17c4833;
    --yellow:#c6be5333;
    --green: #6a9d3033;
    --teal: #3fb29233;
    --blue: #366db133;
    --purple: #7832b933;

    --stripes: repeating-linear-gradient(
        45deg,
        var(--pink),
        var(--pink) 20px,
        var(--background) 20px,
        var(--background) 40px,
        var(--red) 40px,
        var(--red) 60px,
        var(--background) 60px,
        var(--background) 80px,
        var(--orange) 80px,
        var(--orange) 100px,
        var(--background) 100px,
        var(--background) 120px,
        var(--yellow) 120px,
        var(--yellow) 140px,
        var(--background) 140px,
        var(--background) 160px,
        var(--green) 160px,
        var(--green) 180px,
        var(--background) 180px,
        var(--background) 200px,
        var(--teal) 200px,
        var(--teal) 220px,
        var(--background) 220px,
        var(--background) 240px,
        var(--blue) 240px,
        var(--blue) 260px,
        var(--background) 260px,
        var(--background) 280px,
        var(--purple) 280px,
        var(--purple) 300px,
        var(--background) 300px,
        var(--background) 320px);
}
/* html {
background:var(--stripes), var(--light);
} */

hash, at {
    text-decoration: underline;
    color: var(--linkHover);
}
hash::before {content:"#"}
at::before {content:"@"}