/*--- CHARACTER GUIDE - TESSISAMESS - 2023 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/
/* REPLACEMENTS */
 :root{
     --bg-color: #F4EFF0;
     --bg-img: url(/images/backgrounds/galaxy.jpg)center;
     
     --borders: #5a094a;
     --content-bg: #000;
     
     --text: #cccade;
     --body-text: 12px;
     --body-font: calibri,arial,sans-serif;
     
     --headings: #fff;
     --heading-text: 35px;
     --heading-font: 'NeoDgm';
     
     --margin: 2px;
     --padding: 5px;
     
     --accent1:#6A6788;
     --accent2: #5a094a;
     
     --header-height: 50px;
     --header-title: 35px;
     
     --toggle-btn-width: 115px;
     
     --char-width: 500px;
     --char-img-width: 140px;
     --char-img-height: 140px;
     --char-info-height: 120px;
     
     scrollbar-color: #6A6788 #cccade;
     
     cursor:url(/images/icons/cursor.png), auto;
}



/* GENERAL */
 @font-face {
     font-family: 'F5.6';
     src: url(https://humantooth.neocities.org/fonts/F5.6-Regular.woff) format('woff');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'NeoDgm';
     src: url(https://humantooth.neocities.org/fonts/neodgm_pro.woff) format('woff');
     font-weight: normal;
     font-style: normal;
}
#moonicon{
    width: 15px;
}
/*
 ::selection{
    background:var(--accent1);
    color:var(--lightest);
}
 ::-moz-selection{
    background:var(--accent1);
    color:var(--lightest);
}
 ::-webkit-scrollbar-track{
    background:var(--bg-color);
}
 ::-webkit-scrollbar{
    width:5px;
    background:transparent;
}
 ::-webkit-scrollbar-thumb{
    background:var(--accent1);
    border:2px solid var(--bg-color);
    border-radius:5px;
}
 .page::-webkit-scrollbar-track{
    background:var(--content-bg);
}
 .page::-webkit-scrollbar-thumb{
    border:2px solid var(--content-bg);
}
 *, *:before, *:after{
    box-sizing:border-box;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}
*/
 body{
    margin:0;
    background:var(--bg-color) var(--bg-img);
    background-size:cover;
    background-attachment: fixed;
    font-family:var(--body-font);
    color:var(--text);
    font-size:var(--body-text);
    line-height:1;
    overflow-x: hidden;
}
 h1,h2,h3{
    font-family:var(--heading-font);
    font-weight:normal;
    margin:0;
    line-height:0;
    color:var(--headings);
}
 img{
    max-width:100%;
}
 a{
    text-decoration:none;
    color:white;
}
 a:hover{
    color:#0ac9a6;
    cursor:url('/images/icons/cursor.png'), auto;
}
/* CONTAINERS */
 article{
}
 main{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}
/* HEADER */
 header{
    width:auto;
    height:var(--header-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    background:#cccade;
    border-bottom:1px solid var(--borders);
    padding:0 calc(var(--header-height) / 2);
    z-index:3;
}
 header h1{
    line-height:var(--header-height);
    font-size:var(--header-title);
    margin:0 0 0 8px;
    text-shadow:1px 1px 0 var(--content-bg),2px 2px 0 #5a094a;
}
 header nav{
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
}
 header nav a{
    border:1px solid rgba(0,0,0,0.1);
    padding:2px 8px 2px 9px;
    cursor:url('/images/icons/cursor.png'), auto;
}
 header nav a:hover{
}

/* CHARACTERS */
 .char{
    width:var(--char-width);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    margin:15px;
}

.char a:hover{
  font-style: italic;
}

 .char .pic{
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    background-size:cover!important;
    border:8px solid #0ac9a6;
    width:var(--char-img-width);
    height:var(--char-img-height);
    border-radius:10px;
    outline:1px solid var(--borders);
    box-shadow:1px 1px 3px rgba(0,0,0,0.1);
}
 .char .pic[style*='()']{
    background:rgba(0,0,0,0.02)!important;
}
 .char .pic .user{
    background:var(--content-bg);
    border:1px solid var(--borders);
    border-radius:3px;
    box-shadow:1px 1px 2px rgba(0,0,0,0.1);
    padding:2px 5px;
    margin:5px;
}
 .char .info{
    width:calc(100% - var(--char-img-width) - 10px);
    margin:0 0 0 10px;
    position:relative;
}
 .char .info .name{
    font-size:2rem;
    margin:0 0 0 8px;
    text-shadow:1px 1px 0 var(--content-bg),2px 2px 0 #5a094a;
    position:relative;
    z-index:2;
}
/* CHARACTER INFO */
 .char .info .page{
    height:var(--char-info-height);
    overflow:auto;
    background:var(--content-bg);
    border:1px solid var(--borders);
    border-left:6px solid var(--borders);
    padding:10px;
}
 .char .info .page b{
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--accent1);
}
 .char .info .bio{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    opacity:0;
}
 .char .info .bio:hover{
    opacity:1;
}
/* USE FILTER-SPECIFIC COLORS */
 .femme a{
    color:;
}
 .femme .pic{
    outline-color:;
}
 .femme .pic .user{
    border-color:;
}
 .femme .info .name{
    color:;
}
 .femme .info .page{
    border-color:;
}
 .femme .info .page b{
    color:;
}
 .masc a{
    color:;
}
 .masc .pic{
    outline-color:;
}
 .masc .pic .user{
    border-color:;
}
 .masc .info .name{
    color:;
}
 .masc .info .page{
    border-color:;
}
 .masc .info .page b{
    color:;
}
 .nb a{
    color:;
}
 .nb .pic{
    outline-color:;
}
 .nb .pic .user{
    border-color:;
}
 .nb .info .name{
    color:;
}
 .nb .info .page{
    border-color:;
}
 .nb .info .page b{
    color:;
}
 .transformers a{
    color:;
}
 .transformers .pic{
    outline-color:;
}
 .transformers .pic .user{
    border-color:;
}
 .transformers .info .name{
    color:;
}
 .transformers .info .page{
    border-color:;
}
 .transformers .info .page b{
    color:;
}
 .humanoid a{
    color:;
}
 .humanoid .pic{
    outline-color:;
}
 .humanoid .pic .user{
    border-color:;
}
 .humanoid .info .name{
    color:;
}
 .humanoid .info .page{
    border-color:;
}
 .humanoid .info .page b{
    color:;
}
 .anthro a{
    color:;
}
 .anthro .pic{
    outline-color:;
}
 .anthro .pic .user{
    border-color:;
}
 .anthro .info .name{
    color:;
}
 .anthro .info .page{
    border-color:;
}
 .anthro .info .page b{
    color:;
}
 .placeholder4 a{
    color:;
}
 .placeholder4 .pic{
    outline-color:;
}
 .placeholder4 .pic .user{
    border-color:;
}
 .placeholder4 .info .name{
    color:;
}
 .placeholder4 .info .page{
    border-color:;
}
 .placeholder4 .info .page b{
    color:;
}
 .placeholder5 a{
    color:;
}
 .placeholder5 .pic{
    outline-color:;
}
 .placeholder5 .pic .user{
    border-color:;
}
 .placeholder5 .info .name{
    color:;
}
 .placeholder5 .info .page{
    border-color:;
}
 .placeholder5 .info .page b{
    color:;
}
 .placeholder6 a{
    color:;
}
 .placeholder6 .pic{
    outline-color:;
}
 .placeholder6 .pic .user{
    border-color:;
}
 .placeholder6 .info .name{
    color:;
}
 .placeholder6 .info .page{
    border-color:;
}
 .placeholder6 .info .page b{
    color:;
}
/* Hello, person who wants to add more toggles! I've added everything needed to serve as placeholders for up to SIX (6) extra toggles. I don't think any more than that will fit this code. If you need in-depth toggling, I highly suggest using Referential (https://referential.insanejournal.com/) instead of this. Run a REPLACE ALL on this entire page to instantly add new filters, then un-hide their toggle input down in the HTML. For example, you could run a replace all on the term "placeholder1" to change it to "genderfluid" across the board, creating your new option. */
/* FILTER */
 .femme-filter:after{
    content:'Femme';
}
 .masc-filter:after{
    content:'Masc';
}
 .nonbinary-filter:after{
    content:'Nonbinary';
}
 .transformers-filter:after{
    content:'transformers';
}
 .humanoid-filter:after{
    content:'humanoid';
}
 .anthro-filter:after{
    content:'anthro';
}
 .placeholder4-filter:after{
    content:'placeholder4';
}
 .placeholder5-filter:after{
    content:'placeholder5';
}
 .placeholder6-filter:after{
    content:'placeholder6';
}
 .all:after{
    content:'All';
}
 .gender{
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    margin:0;
    font-family:var(--main-font);
    font-size:var(--body-text);
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--accent1);
}
 .gender:after{
    display:block;
    width:var(--toggle-btn-width);
    height:20px;
    line-height:18px;
    background:#0ac9a6;
    border: 1px solid #5a094a;
    text-align: center;
    padding:0 0 0 0px;
}
 .gender:hover:after{
    color:var(--accent);
    text-shadow: 0px 0px 5px #F1ECFF;
     font-style: italic;
     cursor:url('images/icons/cursor.png'), auto;
}
 .gender:checked:after{
    background:rgba(0,0,0,0.1);
    color:var(--lightest);
}
 .gender{
    position:fixed;
    top:15px;
    z-index:4;
}
 .gender:nth-of-type(1){
    right:calc((var(--toggle-btn-width) * 0) + (8px * 1));
}
 .gender:nth-of-type(2){
    right:calc((var(--toggle-btn-width) * 1) + (8px * 2));
}
 .gender:nth-of-type(3){
    right:calc((var(--toggle-btn-width) * 2) + (8px * 3));
}
 .gender:nth-of-type(4){
    right:calc((var(--toggle-btn-width) * 3) + (8px * 4));
}
 .gender:nth-of-type(5){
    right:calc((var(--toggle-btn-width) * 4) + (8px * 5));
}
 .gender:nth-of-type(6){
    right:calc((var(--toggle-btn-width) * 5) + (8px * 6));
}
 .gender:nth-of-type(7){
    right:calc((var(--toggle-btn-width) * 6) + (8px * 7));
}
 .gender:nth-of-type(8){
    right:calc((var(--toggle-btn-width) * 7) + (8px * 8));
}
 .gender:nth-of-type(9){
    right:calc((var(--toggle-btn-width) * 8) + (8px * 9));
}
 .gender:nth-of-type(10){
    right:calc((var(--toggle-btn-width) * 9) + (8px * 10));
}
 .masc-filter:checked ~ main .femme, .masc-filter:checked ~ main .nb, .masc-filter:checked ~ main .transformers, .masc-filter:checked ~ main .humanoid, .masc-filter:checked ~ main .anthro, .masc-filter:checked ~ main .placeholder4, .masc-filter:checked ~ main .placeholder5, .masc-filter:checked ~ main .placeholder6, .femme-filter:checked ~ main .masc, .femme-filter:checked ~ main .nb, .femme-filter:checked ~ main .transformers, .femme-filter:checked ~ main .humanoid, .femme-filter:checked ~ main .anthro, .femme-filter:checked ~ main .placeholder4, .femme-filter:checked ~ main .placeholder5, .femme-filter:checked ~ main .placeholder6, .nonbinary-filter:checked ~ main .masc, .nonbinary-filter:checked ~ main .femme, .nonbinary-filter:checked ~ main .transformers, .nonbinary-filter:checked ~ main .humanoid, .nonbinary-filter:checked ~ main .anthro, .nonbinary-filter:checked ~ main .placeholder4, .nonbinary-filter:checked ~ main .placeholder5, .nonbinary-filter:checked ~ main .placeholder6, .transformers-filter:checked ~ main .masc, .transformers-filter:checked ~ main .femme, .transformers-filter:checked ~ main .nb, .transformers-filter:checked ~ main .humanoid, .transformers-filter:checked ~ main .anthro, .transformers-filter:checked ~ main .placeholder4, .transformers-filter:checked ~ main .placeholder5, .transformers-filter:checked ~ main .placeholder6, .humanoid-filter:checked ~ main .masc, .humanoid-filter:checked ~ main .femme, .humanoid-filter:checked ~ main .nb, .humanoid-filter:checked ~ main .transformers, .humanoid-filter:checked ~ main .anthro, .humanoid-filter:checked ~ main .placeholder4, .humanoid-filter:checked ~ main .placeholder5, .humanoid-filter:checked ~ main .placeholder6, .anthro-filter:checked ~ main .masc, .anthro-filter:checked ~ main .femme, .anthro-filter:checked ~ main .nb, .anthro-filter:checked ~ main .transformers, .anthro-filter:checked ~ main .humanoid, .anthro-filter:checked ~ main .placeholder4, .anthro-filter:checked ~ main .placeholder5, .anthro-filter:checked ~ main .placeholder6, .placeholder4-filter:checked ~ main .masc, .placeholder4-filter:checked ~ main .femme, .placeholder4-filter:checked ~ main .nb, .placeholder4-filter:checked ~ main .transformers, .placeholder4-filter:checked ~ main .humanoid, .placeholder4-filter:checked ~ main .anthro, .placeholder4-filter:checked ~ main .placeholder5, .placeholder4-filter:checked ~ main .placeholder6, .placeholder5-filter:checked ~ main .masc, .placeholder5-filter:checked ~ main .femme, .placeholder5-filter:checked ~ main .nb, .placeholder5-filter:checked ~ main .transformers, .placeholder5-filter:checked ~ main .humanoid, .placeholder5-filter:checked ~ main .anthro, .placeholder5-filter:checked ~ main .placeholder4, .placeholder5-filter:checked ~ main .placeholder6, .placeholder6-filter:checked ~ main .masc, .placeholder6-filter:checked ~ main .femme, .placeholder6-filter:checked ~ main .nb, .placeholder6-filter:checked ~ main .transformers, .placeholder6-filter:checked ~ main .humanoid, .placeholder6-filter:checked ~ main .anthro, .placeholder6-filter:checked ~ main .placeholder4, .placeholder6-filter:checked ~ main .placeholder5 {
    display:none;
}
/* CREDIT */
 #credit{
    position:fixed;
    left:0;
    bottom:20px;
    background:var(--content-bg);
    border:1px solid var(--borders);
    border-right:3px solid var(--borders);
    padding:5px;
    font-weight:bold;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:3px;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    white-space:nowrap;
    color:var(--accent1);
}