link to board: all was well
problem: we are currently having four issues that, after being paid (despite her terms & conditions saying she would help fix bugs/mistakes, etc) the coder i commissioned deleted me off of discord and refuses to help. we appreciate anyone who is able to help us figure these problems out 💛
what needs to be fixed:

[/a]
[*]the toggle code/copy code box is not working, example
[*]we are looking for a way to add an image to boards that are not yet posted in on the forum row, as well as placeholder images for guests in that same spot, example
[*]the freeform coding for the main profile for new accounts is messed up, example here
[/ul]
browser: chrome
other details: it is an existing code, and edits are allowed!
codes:
css
 /*=============================================== *
* Jcink.com Forum Hosting Stylesheet
* ==============================================
* #Version: 1.0.2
*=============================================== */

html{scroll-behavior: smooth;}
form{display: inline;}
::-webkit-scrollbar{height: 6px;width: 9px;background: var(--cr2);}
::-webkit-scrollbar-thumb{background: var(--text);border: 4px solid var(--cr3);}
::-webkit-scrollbar-corner{background: var(--cr1);}
::-webkit-scrollbar-button{background: var(--cr1);height: 5px !important;}

/** hidden stuff **/

#GROUP-2.adminprof {display:none;}
#GROUP-3.adminprof {display:none;}
#GROUP-4.adminprof {display:none;}
#GROUP-5.adminprof {display:none;}
#GROUP-6.adminprof {display:none;}
#GROUP-7.adminprof {display:none;}
#GROUP-8.adminprof {display:none;}
#GROUP-9.adminprof {display:none;}
#GROUP-10.adminprof {display:none;}
#GROUP-11.adminprof {display:none;}
#GROUP-12.adminprof {display:none;}
#GROUP-13.adminprof {display:none;}
#GROUP-14.adminprof {display:none;}
#GROUP-15.adminprof {display:none;}
#GROUP-16.adminprof {display:none;}
#GROUP-17.adminprof {display:none;}
#GROUP-18.adminprof {display:none;}
#GROUP-19.adminprof {display:none;}

#GROUP-4.adminprof {display:block;}
#GROUP-16.adminprof {display:block;}
#GROUP-2.crprofmem {display:block;}
#GROUP-3.crprofmem {display:block;}
#GROUP-4.crprofmem {display:block;}
#GROUP-5.crprofmem {display:block;}
#GROUP-6.crprofmem {display:block;}
#GROUP-7.crprofmem {display:block;}
#GROUP-8.crprofmem {display:block;}
#GROUP-9.crprofmem {display:block;}
#GROUP-10.crprofmem {display:block;}
#GROUP-11.crprofmem {display:block;}
#GROUP-12.crprofmem {display:block;}
#GROUP-13.crprofmem {display:block;}
#GROUP-14.crprofmem {display:block;}
#GROUP-15.crprofmem {display:block;}
#GROUP-16.crprofmem {display:block;}
#GROUP-17.crprofmem {display:block;}
#GROUP-18.crprofmem {display:block;}
#GROUP-19.crprofmem {display:block:}

#GROUP-4.crprofmem {display:none;}
#GROUP-16.crprofmem {display:none;}

#userlinks {display:none;}
.forum-subheader .titlemedium {display:none;}
.topic-subheader .titlemedium {display:none;}

/** tootips **/

#s-m-t-tooltip {max-width:300px; position:relative; z-index:9999!important; margin:15px 14px 7px 12px; padding:5px; background-color: rgba(205, 205, 205,.5); color: #333; font-family: Poppins, sans-serif; letter-spacing:1px; text-transform: uppercase; font-weight: 600; font-size:12px; line-height:115%; border-radius: 5px;}


/********
permissions
********/

.mcp-0, .acp-0, .m-2 { display: none!important; }
.g-2 { display: block !important; }
.m-4 {display: block!important; }

:root {
  overflow-x:hidden;

 --cr1: #282828;
 --cr2: #373737;
 --cr3: #222222;
 --cr4: #474554;
 --cr5: #ACA9BB;
 --maintext: #eee;
 --text: #eee;
 --white: #eee;
 --fade: 255,255,255;
 --shadow: -1px -1px 0 var(--cr1), 1px -1px 0 var(--cr1), -1px 1px 0 var(--cr1), 1px 1px 0 var(--cr1);
 --shadow2: -1px -1px 0 rgb(var(--fade),.2), 1px -1px 0 rgb(var(--fade),.2), -1px 1px 0 rgb(var(--fade),.2), 1px 1px 0 rgb(var(--fade),.2);
 --opacity: 0.5;
 --invert: 0;
 --overlay: 280deg, rgba(41,41,41,.5) 100%, rgba(0,0,0,0) 100%;
 --overlay2: 280deg, rgba(241,241,241,.2) 100%, rgba(0,0,0,0) 100%;
 --link: #eaeaea;
 --bodbg: linear-gradient(196deg, rgba(88,88,88,1) 0%, rgba(53,53,53,1) 66%);
  --bas: #194A2C;
 --bow: #86B87F;
 --gri: #A17A27;
 --cen: #566A98;
 --har: #4A0535;
 --hip: #D4D0CF;
 --kel: #43858C;
 --the: #11054A;
 --pix: #694978;
 --ali: #7493a6;
 --puf: #C9B902;
 --uni: #C967B6;
 --wyv: #7A1B23;
 --mag: #A3BA9D;
 
 --martin: 'martin';
 --cache: 'cache';
 --poppins: 'Poppins', sans-serif;
 
--bg1: url('https://files.jcink.net/uploads/sellyourseoul/Crimson_Rose/Lux_img_7.jpg');
 --bg2: url('https://files.jcink.net/uploads/sellyourseoul/Crimson_Rose/bg4_drk.jpg');
 --bg3: url('https://files.jcink.net/uploads/sellyourseoul/Crimson_Rose/cartographer.png');
 --bg4: url('https://files.jcink.net/uploads/sellyourseoul/Crimson_Rose/Lux_img_1.png');
 --bg5: url('https://files.jcink.net/uploads/sellyourseoul/Crimson_Rose/matteo_vistocco_mcqXQYPqy2o_unsplash.jpg');
}


@font-face {
 font-family: 'cache';
 src: url('https://files.jcink.net/uploads/sellyourseoul/Crimson_Rose/Cache_Rough.otf');
 font-weight: bold;
 font-style: normal;
}

@font-face {
 font-family: 'martin';
 src: url('https://files.jcink.net/uploads/sellyourseoul/Crimson_Rose/Martinesse.ttf');
 font-weight: bold;
 font-style: normal;
}

html { overflow-x: auto; }
form { display:inline; }

/****************************************
Body Background & Text Style
*****************************************/

body {
background: var(--bg3) repeat center center / auto fixed;
padding:0px;
margin:0px;
font: 500 14px/150% var(--poppins);
  color: var(--text);
}


/* set up dark variables */
body.darkmode {
--cr1: #C1C1C1;
--cr2: #eaeaea;
       --cr3: #DBDBDB;
--text: #222;
--fade: 0,0,0;
       --opacity: 1;
       --invert: 1;
       --overlay: 280deg, rgba(221, 221, 221,.7) 100%, rgba(255,255,255) 100%;
--drkbg: url('https://files.jcink.net/uploads/sellyourseoul/Crimson_Rose/beanstalk.png');
       --text: #484848;
  --shadow: -1px -1px 0 var(--cr1), 1px -1px 0 var(--cr1), -1px 1px 0 var(--cr1), 1px 1px 0 var(--cr1);
       --fade: 21,21,21;
       --link: #eaeaea;
       --bodbg: linear-gradient(196deg, rgba(214,214,214,1) 8%, rgba(163,163,163,1) 71%);
--bg2: url('https://files.jcink.net/uploads/sellyourseoul/Crimson_Rose/bg4_lite.jpg');
--bg3: url('https://files.jcink.net/uploads/sellyourseoul/Crimson_Rose/cartographer_lite.jpg');
}

body img {object-fit: cover;}

/****************************************
  Table Styles
*****************************************/

table, tr, td {
font-size: 12px;
color:  var(--333);
}

.impot{padding:20px; background: linear-gradient(230deg, var(--memfade)30%, var(--memfade2)100%), var(--bg4) no-repeat center / cover fixed; font:700 18px/100% var(--martin);color:var(--text);width:95%;border-bottom:1px solid var(--white); text-transform:lowercase;    margin-left: 9px;}
/****************************************
  Board Width
*****************************************/

#wrapper {width: 1200px; background: linear-gradient(360deg, var(--memfade) 5%, var(--cr2) 20%), var(--cr1); margin: 0px auto; padding-top: 20px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-content:flex-start; border-bottom: 10px solid var(--cr3); padding-bottom: 0px; border-radius: 10px;}

#innerwrapper { width: 96.5%;margin:10px 0 0 10px;padding: 10px; border:1px solid rgb(var(--fade),.1);}

/****************************************
  Link colors & tooltips
*****************************************/

a:link, a:visited, a:active {
text-decoration: none;
color:  var(--mem2);
transition-duration:1s;
}
a:hover {
color: var(--text);
text-decoration: none;
}

/* style your tooltips (title="") */
.ui-tooltip {
background: var(--cr2);
color: var(--mem2);
}


/****************************************
  Profile styles
*****************************************/

#profilename {
font-size:28px;
font-weight:bold;
}

#photowrap {
padding:6px;
}

#phototitle {
font-size:24px;
border-bottom:1px solid  var(--333);
}

#photoimg   {
text-align:center; margin-top:15px;
}

/****************************************
  UserCP/My Controls styles
*****************************************/

#ucpmenu {
line-height:150%;
width:22%;
border:1px solid  var(--cr1);
background-color:  var(--cr2);
}

#ucpmenu p  {
padding:2px 5px 6px 9px;
margin:0px;  
}

#ucpcontent {
background-color:  var(--cr2);
border:1px solid var(--cr1);
line-height:150%; width:auto;
}

#ucpcontent p  {
padding:10px;
margin:0px;
}

/****************************************
 Logo Strip
*****************************************/

#logostrip {display: none;}

#logo {
min-height: 60px;
text-align: left;
margin-top: 5px;
padding: 20px 20px 5px;
}


#logo a, #logo a:hover {
font-size: 36px;
text-decoration: none;
font-weight: bold;
color:  var(--mem);
}

/****************************************
 Search Bar
*****************************************/

#searchbar {
display: block;
float: right;
position: relative;
right: 10px;
top: 8px;
}

#searchbar .search-container {
   background-color: var(--cr2);
   box-shadow: 0 1px 3px rgba(0,0,0,0.4) inset;
   border: 1px solid  var(--ccc);
   display: block;
   height: 26px;
   position: relative;
   width: 200px;
}

#searchbar .search-input {
background: none repeat scroll 0 0 transparent;
border: 0;
color:  var(--mem2);
font-size: 12px;
width: 192px;
height: 26px;
padding: 1px 0 0 8px;
}

#searchbar .search-input:focus {
   color:  var(--333);
}

#searchbar .search-button {
background: var(--mem2);
border: 0;
bottom: 0;
margin: 0;
border-radius: 0;
display: block;
height: 26px;
padding: 0;
position: absolute;
right: 0;
text-indent: -3000em;
top: 0;
width: 26px;
cursor: pointer;
box-shadow: none;
}

/****************************************
 Navigation Bar / Submenu
*****************************************/

#submenu  {
font-size: 13px;
border: solid  var(--555);
       border-width: 1px 0;
background-color:  var(--mem);
       background-position: center center;
       margin-bottom: 3px;
}

#submenu img {
display: none;
}

#submenu a:link, #submenu a:visited, #submenu a:active {
text-decoration: none;
color: var(--c1text)!important;
       padding: 7px 7px;
       font-weight: bold;
}

#navi br {
display: none;
}

#navstrip  {
font-weight:bold;
padding:6px 0px 16px 0px;
}

/****************************************
  Calendar styling
*****************************************/

.caldate   {
text-align:right;
font-weight:bold;
font-size:11px;
color: var(--555);
background-color: var(--cr2);
padding:4px; margin:0px;
}

#calendarname {
font-size:22px;
font-weight:bold;
}

#padandcenter {
margin-left:auto;
margin-right:auto;
text-align:center;
padding:14px 0px 14px 0px;
}


/**************************************************
User Links Menu (Messages / View new posts / etc )
***************************************************/

#userlinks {
border: 1px solid  var(--cr1);
background-color:  var(--cr2);
list-style: none;
width: 960px;
margin: 0 auto;
}

#userlinks td {
color:  var(--text);
}

#userlinks a {
text-decoration: underline; padding: 1px;
}

#userlinks a:hover {
text-decoration: none;
}


/****************************************
  Topic View styles
*****************************************/

.activeuserstrip {
background-color:  var(--ccc); padding:6px
}

.normalname {
font-size: 12px;
font-weight: bold;
color:  var(--text);
}

.normalname a {
font-size: 12px;
}

.unreg {
font-size: 11px;
font-weight: bold;
color:  var(--text);
}

.post1 {
background-color:  var(--cr2);
}

.post2 {
background-color:  var(--cr2);
}

.postdetails {
font-size: 10px;
}

.postcolor   {
font-size: 12px; line-height: 160%;
}

.postlinksbar {
background-color: var(--ccc);
padding:10px;
margin-top:1px;
font-size:10px;
}

.signature   {
font-size: 10px;
color: var(--333);
line-height:150%;  
}


/*******************************
Pagination e.g. [1],2,3 ...
*******************************/

.pagination .pagination_current, .pagination a {
    padding: 2px 5px;
}

.pagination a:link, .pagination a:visited, .pagination a:active {
    border: 1px solid  var(--cr1);
    border-radius:3px;
    background-color: var(--cr2);
    padding-left:6px;
    padding-right:6px;
    color: var(--text);
    text-decoration:none;
}

.pagination a:hover {
background: var(--cr2);
text-decoration: none;
color: var(--text);
}

.pagination .pagination_current {
    background: none repeat scroll 0% 0%  var(--cr2);
    border: 1px solid  var(--mem);
    color:  var(--text);
    border-radius:3px;
    padding-left:6px;
    padding-right:6px;
}

.pagination_first, .pagination_last, .pagination_page {
    background: none repeat scroll 0% 0%  var(--cr1);
    border: 1px solid var(--cr2);
}

.pagination_pagetxt {
   display:none;
}

/****************************************
  Global general table/div row styles
*****************************************/

.row1,.row3,.row4,.row2 {
background-color:  var(--cr2);
padding: 5px;
}
.row2 a {color: var(--text);}
.row4 {background:transparent!important;}
.row4 a {color: var(--mem);}

#boardstats .row2 {
text-align: center;
}

.darkrow1 {
background-color:  var(--cr1);  color: var(--text);
}

.darkrow2 {
background-color: var(--cr1); color: var(--text);
}

td.darkrow2 {
display: none;
}

.darkrow3 {
background-color: var(--ccc);
color:  var(--333);
padding: 3px;
}

.hlight { background-color:  var(--cr2);  }
.dlight { background-color:  var(--cr2);  }

/****************************************
  Top table bars / gradient holders
*****************************************/

.maintitle {margin:10px auto; width: 95%; height: 135px; background: var(--cr3); padding: 20px; position:relative; color: var(--text);margin: auto;font: 400 2vw/100% var(--cache); overflow:hidden; text-align:Center;}

.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; padding: 20px;height: 135px; width: 95%; background: var(--cr1); color: var(--text);margin: auto;position:relative; font: 400 2vw/100% var(--cache); overflow:hidden; text-align:Center; display:flex; align-items:center; justify-content:center; display:flex; align-items:center; justify-content:center;}
.topic-desc {display:block; font: 300 14px/100% var(--poppins); margin-top: -20px;}
.topic-title {position:relative; top: 50px;}
.maintitle a:hover { text-decoration: none;}


/****************************************
 Bar directly below the maintitles
*****************************************/

.titlemedium {
font-weight:bold; color: var(--333);
padding: 2px 6px; margin:0px;
background-color: var(--ccc);
}

.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  {
text-decoration: none;
color:  var(--333);
}

/****************************************
 Table & Div Borders
*****************************************/

.tableborder {
background-color:  var(--ccc);
border:1px solid  var(--555); padding:0px; margin:0;
}

.tablefill {
background-color:  var(--cr2);
border:1px solid  var(--cr1);
padding:6px;
}

.tablepad {
background-color:  transparent;  
padding:6px;
}

.tablebasic {
width:100%; padding:0; margin:0px; border:0px;
}

.plainborder {
border:1px solid  var(--cr1);
background-color:  var(--cr2);
}

/****************************************
 QUOTE and CODE BBCode boxes
*****************************************/

#QUOTE {
white-space:normal;
font-size: 11px;
color:  var(--333);
background-color:  var(--cr2);
border: 0px;
padding:2px;
border:1px solid  var(--cr1);
margin-top:2px;
}


.code-scroll {
max-height: 250px;
overflow: auto;
padding-right: 5px;
}

.code-top {
margin: 0;
padding: 0;
text-align: center;
color: var(--c1text);
position: relative;
padding-right: 50px;
}
.code-highlight {
padding: 0px; margin:0px;
background-color: var(--c1text);
text-align: center;
text-transform: uppercase;
color: var(--text);
letter-spacing: 1px;
cursor: crosshair;
width: 60px;
line-height:60px;
font-size: 20px;
position: absolute;
top: 0px;
right: 0px;
}
.code-highlight:hover {background: var(--memfade); color: var(--text);}
.code-top .code-title {
font: italic normal 300 20px/100% mano;
text-transform: lowercase;
line-height: 60px;
background: var(--cr1);
}
.code-toggle {
cursor: crosshair;
}

.code-scroll.auto-code {
height: auto;
max-height: none;
}

#CODE-WRAP.nicole-code { border-collapse: collapse; }
#CODE  {
white-space:normal;
font-size: 11px;
background-color: var(--cr2);
border: 0px;
padding:12px;
margin-top:2px;
position:relative;
z-index:2;
}


/**********************************************
 Input buttons, e.g. submit, text input, etc
***********************************************/

.button-large {
background:  var(--cr1);
border-radius: 3px;
       padding: 5px 12px;
text-align:center;
margin:0px 5px 0px 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
       color: var(--c1text);
font-weight: bold;
       min-width: 75px;
       display: inline-block;
}


.button-small {
background:  var(--cr1);
border-radius:3px;
color: var(--text);
font-weight: bold;
font-size: 11px;
margin: 3px;
padding: 4px 7px;
text-decoration: none;
       min-width: 50px;
       max-width: 80px;
}

.post-buttons-top { margin-top: 3px; }

.button-large.closed {
       padding: 7px 12px;
text-align:center;
margin:0px 5px 0px 5px;
       border: 1px solid  var(--cr2);
       color:  var(--text);
font-weight: bold;
}

.forminput, .codebuttons, .textinput, .radiobutton, .checkbox {
border-radius: 5px;
background:  var(--cr1); border: 1px solid var(--cr2);
color:  var(--text);
font-size: 12px;
padding: 5px;
vertical-align: middle;
}
#subaccounts_menu .forminput{border:none!important; background:none;}
.forminput option {color: var(--text); background: var(--cr2);}


input[type=submit], input[type=button], input[type=reset] {
background: var(--cr2);
border-radius:3px;
color:   var(--text);
font: 400 12px/100% var(--poppins); text-transform:uppercase;
margin: 3px;
padding: 4px 8px;
text-decoration: none;
border: none;
}

.codebuttons  {
font-size: 10px;
}


/****************************************
 Form table cell styles, left/right/top
*****************************************/

.pformstrip {
background-color:  var(--ccc);
color: var(--333); font-weight:bold;
padding: 2px 5px;
margin-top:1px
}

.pformleft  {
padding:6px;
margin-top:1px;width:25%;
}

.pformleftw {
  padding:6px;
margin-top:1px;width:40%;
}

.pformright {
padding:6px; margin-top:1px;
}


/****************************************
Tabs on the portal profiles + sections
*****************************************/

.opentab {
color: var(--c1text);
padding:8px;float: left; width: auto;
background-color: var(--mem2);
margin-top:3px;
margin-right:2px;
font-size:11px;
border:  var(--555) 1px solid;
}

.closedtab {
color: var(--c1text);
padding:7px;float: left;width: auto;
background-color: var(--mem);
margin-top:6px;
margin-right:2px;
font-size:11px;
border-top:   var(--555) 1px solid;
border-right:  var(--555) 1px solid;
border-left:   var(--555) 1px solid;
}

.positiontab {
height: 34px; margin-left: 2px;
}

/****************************************
  Delete all cookies / mark read
*****************************************/

#delcookiesrow, #mark-as-read-subto {
background-color:  var(--cr2);
border: 1px solid  var(--cr1);
font-size: 10px;
padding: 5px;
       width: 300px; text-align:center;
       margin:-3px auto;
       padding-left:1px;
}

#mark-as-read-subto {
float: none;
padding-top: 3px;
}


/*******************************
    Board Statistics Links
*******************************/

.toplinks a {
color:  var(--c1text);
font-size: 11px;
text-decoration: none;
}

.toplinks {
margin: 0 11px -37px 0;
text-align: right;
color: transparent;
}

/*******************************
Mini Profile Seperators
*******************************/

.postbit {
border-bottom: solid 1px  var(--cr1);
color: var(--text);
background:  var(--cr2);
font-size: 11px;
       padding: 6px 7px;
}

/********************************
Miscellaneous
********************************/

/* image tag styles */
img        { vertical-align:middle; border:0px }
img.attach { border:2px outset  var(--555); padding:2px }

/* Forum Descriptions */
.desc { font-size:11px; color:  var(--333);  }

/* Edited by text */
.edit { font-size: 9px }

/* Topic Macros */

.wrapmini { float: left; }

/* Warning CSS */
.warngood { color:green }
.warnbad  { color:red }

/* Skin selector dropdown */
#skin_selector {
margin: 10px 0;
}


/* Online users list row */
.thin {
padding:6px 0px 6px 0px;
line-height:140%;
margin:2px 0px 2px 0px;
border-top:1px solid  var(--cr1);
border-bottom:1px solid var(--cr1);
}

/* Latest news area */
.newstext {
background-color:  var(--cr2);  
border: 1px solid var(--cr1);
padding: 6px 6px 2px 6px;
margin-bottom: 10px;
}

/* Highlighted text in search */
.searchlite {
color: var(--text);
font-weight:bold;  
background-color: var(--cr2);
}

/***************************************************
 GENERAL INFORMATION WEBPAGES
 REFERENCE:
 http://cttw.jcink.net/index.php?showtopic=22323
*****************************************************/
.guidebookie {width: 95%; height: 700px; background: var(--cr1); margin:auto;position:relative; display:flex;}
.guidetitle {padding: 20px; height: 94.1%; width: 150px; background: var(--mem);display:flex; justify-content:center; align-items:center;}
.guidetitle h1 { background:var(--cr1); padding: 10px 40px 15px 40px; width: 250px;font: 400 100px/100% var(--cache); position:relative; top: 175px; border-radius: 10px;}
.tabinfo-holder {
 margin: auto;
 padding: 1px; top: 0px;
 position: relative;
 display: flex;
 justify-content: space-between;
 height: 700px;
 flex-basis: 100%;
 align-items: stretch;
}
.information-tabs {
 display: inline-block;
 flex-basis:24%; margin-left: -190px;
 overflow: auto; width: 400px; overflow-x:hidden;
}
.information-tabs li, .information-tabs ul.gtabs {
 list-style:none;
 margin: 0px;
 position: relative;
 left: -20px;
}
.information-tabs a {
 padding: 6px;
 display: block;
 text-align: right;
 color:  var(--text);
 font-family: var(--poppins);
 text-transform: uppercase;
 font-size: 14px;
 line-height: 16px;
 text-decoration:none;
}
.information-tabs a:hover {
 color:  var(--text);
}
.information-tabs a.active {
 color:  var(--text);
}
.information-tabs a.active:after {
 display: inline-block;
 margin-left: 10px;
 content: ' «'
}
.information-tabs h1  {
 padding: 10px;
 text-align: center;
 color: var(--text);
 text-transform: lowercase;
 font: 300 20px/100% var(--martin);
}
.information-tabs  h2 {
 padding: 10px 30px 10px 50px;
 background: var(--cr2);
 color: var(--mem2);
 text-align: left; border-radius: 10px;
 line-height: 20px; position:relative; left: 30px;
 font-size: 15px; margin-left: 0px; text-shadow: var(--shadow);
 font-family:  var(--poppins); font-weight: 900;
}
.information-tabcontent {
 display: inline-block;
 background:  var(--cr2);
 border: 10px solid transparent;
 flex-basis: 87%;
 height: 600px;
 text-align: justify;
 padding: 15px;
 font-size: 12px;
 line-height: 14px; margin-top: 20px;
 overflow: auto; margin-left: 40px;
}
/****************************************
Mobile-specific Styles
*****************************************/

#mobile {
background-color:  var(--ccc);
}

/***********************************
Copyright: Removal is against Terms
************************************/
#copyright {
font-size: 10px; line-height: 12px; width: calc(185% - 0px); padding: 5px;
margin: 10px auto;display:flex; flex-direction:row;
align-items:center; background:rgb(var(--fade),.20); justify-content:center;
}

/*****************************************
UCP MENU
*****************************************/
.act-UserCP table tbody tr {
 display: flex;
 flex-direction: column;
}
.act-UserCP td#ucpmenu,
.act-UserCP td#ucpcontent {
 border: none;
 background: transparent;
}
.act-UserCP td#ucpmenu {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 width: 100%;
 grid-column-gap: 20px;
}
.act-UserCP td#ucpmenu p {
 grid-area: 3 / auto / span 1 / span 1;
 font-size: 0px;
 margin: 10px 0px;
}
.act-UserCP td#ucpmenu p a {
 text-transform: lowercase;
 font-size: 15px;
 font-family: var(--poppins);
 font-weight: bold;
 opacity: .8;
}
.act-UserCP td#ucpmenu p a:hover {opacity: 1;}
.act-UserCP td#ucpmenu .pformstrip {
 grid-area: 2 / auto / span 1 / span 1;
 background: transparent;
 border-bottom: 1px solid rgba(var(--fade),.5);
}
.act-UserCP td#ucpmenu .maintitle {
 grid-area: 1 / auto / span 1 / span 4;
 font-size: 50px; line-height: 300%;
 font-family: var(--cache);
}
.act-UserCP td#ucpmenu p:nth-of-type(2),
.act-UserCP td#ucpmenu div:nth-of-type(3) {
 grid-area: auto / 4 / span 1 / span 1;
}
.act-UserCP td#ucpcontent {
 background: rgba(var(--fade),.1);
 padding: 0px 5px;
 width: 99%;
}
#ucpcontent .maintitle {width: 97.5%; margin-left: -5px; font-size: 50px; line-height: 300%;}

.act-UserCP td#ucpcontent table tr {
 width: 84%!important;
 justify-self: stretch;
 align-self: stretch;
 border: none;
 background: transparent;
 display: grid;
 grid-template-columns: 210px 1fr;
 background: transparent;
 grid-gap: 10px;
}

.act-UserCP td#ucpcontent div.pformstrip {display: none;}

.act-UserCP td#ucpcontent table td.pformleft {
 width: 200px;
 min-height: 20px;
 background: rgba(255,255,255,.3);
 border-radius: 10px;
 color: var(--text);
 font-family: var(--poppins);
 text-transform: lowercase;
 font-weight: bold;
}
.act-UserCP td#ucpcontent table td.pformleft label {
 font-family: var(--poppins);
 text-transform: uppercase;
 color: var(--mem);
}
.act-UserCP td#ucpcontent table td.pformright {
 flex-grow: 1;
 width: 330px;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 justify-content: flex-end;
 background: transparent;
}
.act-UserCP td#ucpcontent table td.pformright input {
 border: none;
 border-bottom: 1px solid var(--cr1);
 background: transparent;
 color: var(--text);
}
.act-UserCP td#ucpcontent table tbody {
 display: grid;
 grid-template-columns: repeat(2, calc(50% - 10px) [col-start]);
 grid-gap: 10px;
 align-items: stretch;
 justify-content:stretch;
 align-content: stretch;
 width: 100%;
}
.act-UserCP td#ucpcontent table tr td {width: auto; display: block; }
.act-UserCP td#ucpcontent table td {border: none;}

.act-UserCP td#ucpcontent table tr td.pformstrip {
 align-items: center;
 justify-content: center;
 grid-area: auto / auto / span 2 / span 2;
 background: transparent;
 display: flex;
}
.act-UserCP td#ucpcontent table tr td.pformstrip input {
 padding: 10px;
 font-size: 20px;
 font-family: var(--poppins);
 text-transform: uppercase;
 border-radius: 5px;
 opacity: .8;
 cursor: pointer;
 margin: 10;
}
.act-UserCP table tr#field-website,
.act-UserCP table tr#field-location,
.act-UserCP table tr#field-interests {display: none!important;}

.act-UserCP td#ucpcontent table tr td.pformstrip input:hover {opacity: 1;}
.act-UserCP td#ucpcontent div.tableborder table,
.act-UserCP td#ucpcontent div.tableborder tbody {
 display: grid;
 grid-template-columns: repeat(6, auto [col-start]);
 grid-area: auto / auto / span 1 / span 6;
}
.act-UserCP td#ucpcontent div.tableborder tr {
 flex-grow: 1;
 grid-area: auto / auto / span 1 / span 6;
 align-content: center;
 display: grid;
 grid-template-columns: repeat(6, auto [col-start]);
 align-content: stretch;
 justify-content: stretch;
 align-items: stretch;
}
.act-UserCP td#ucpcontent div.tableborder td.darkrow3 {
 grid-area: auto / auto / span 1 / span 6;
}
.act-UserCP td#ucpcontent div.tableborder td,
.act-UserCP td#ucpcontent div.tableborder th {
 display: table-cell;
 width: 100%;
}
tr.dlight {
grid-template-columns: 100px 1fr 250px 50px!important;
}
#ucpcontent table {width: 100%;}

/***********************************************
hidden
***********************************************/
#userlinks {display:none;}
#submenu {display:none;}
.newstext {display:none;}

/***********************************************
header
***********************************************/

/** topbar **/
usermenu {width: 1190px; height: 75px; background: linear-gradient(var(--overlay), var(--cr1)); position:absolute; top:0px; left: 0; padding-left: 10px; display:flex; align-items:center; justify-content:flex-end; border-bottom:3px solid var(--mem);}
.navbar {padding: 5px; font: 14px/100% var(--poppins); color: var(--text);padding-bottom: 5px; margin-right: 40px;     display: flex; align-items: center;}
.navbar a {color: var(--cr4); text-decoration:none;transition:all 2s ease; background:linear-gradient(to left, var(--cr1) 50%, var(--memfade) 100%) right; background-size: 220%; padding: 5px; border-radius: 10px;}
.navbar a:hover {background-position: left; color: var(--text)!important;}



/** header **/

.crimheader { display: grid;-webkit-box-align: center;-ms-flex-align: center;align-items: center; padding: 50px 20px; min-height: 600px; width: 1200px; margin: auto; border-top: 3px solid rgb(var(--fade),.1); border-bottom: 3px solid rgb(var(--fade),.1); background: linear-gradient(196deg, var(--memfade) 8%, var(--memfade2) 100%); position: relative; visibility: visible; padding: 40px 0 50px 0; overflow:hidden;}

/** header 2 **/
.crimcenter {background: var(--bg5) no-repeat center center / cover; width: 90%; height: 90%; overflow:hidden; display: grid; margin: auto; border:1px solid rgb(var(--fade),.1); outline: 1px solid rgb(var(--fade),.2); outline-offset: 5px;  position:relative; top: 45px;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
 gap: 0px 0px;
 grid-template-areas:
   "leftside leftside leftside right-side right-side"
   "leftside leftside leftside right-side right-side"
   "leftside leftside leftside right-side right-side"
   "leftside leftside leftside right-side right-side"
   "leftside leftside leftside right-side right-side"
   "leftside leftside leftside staff staff"; }
.crimcenter::before {content:'';   backdrop-filter: blur(4px) opacity(100%);  position:absolute; z-index:1px; width: 100%; height: 100%;}
.leftside { grid-area: leftside; background: rgb(var(--fade),.3); position:relative; width: 80%; height: 78%; margin:45px 0px 0px 40px; border: 1px solid rgb(var(--fade),.1);}
.leftside img {width: 100%; object-fit:cover; filter:invert(var(--invert)); margin-top: -55px;}
.aniiconh {width: 30%; height: 30%; margin: 70px 0 0 30px;}
.lefttitleimg {position:relative; height: 90%;  width: 520px;position:absolute; top: 50px; left: 0;display:flex; align-items:center; justify-content:center;}
.lefttitleimg img {position:absolute; left:0px; top:-52px; width: 100%; filter: opacity(.4) invert(var(--invert));}
.lefttitleimg a {font: 900 70px/100% var(--martin); text-transform:lowercase; text-decoration:none; color: var(--cr1); text-shadow: var(--shadow2); position:absolute; left: 25px; bottom: 160px;}
.lefttitleimg a sub {display:block; font: 800 30px/100% var(--cache); color: var(--cr4); text-shadow: var(--shadow);}
.informationbox {padding: 10px; height: 125px; width: 90%; overflow:hidden; text-align:justify; position:absolute; left: 15px; bottom: -5px; font: 12.5px/170% var(--poppins); color:var(--white);}
.informationbox b { color: var(--mem); font-weight:900;}
.crstaff {width: 560px; height: 100px; position:absolute; bottom:0; left:0; display: flex; flex-direction:row; align-items:center; justify-content:flex-end;}
.crstaff:after {content:''; position:absolute; top: 70px; left:0; width: 100%; height:1px; background: rgb(var(--fade),.3);}
.crstaff a {width: 40px; height: 40px; object-fit:cover; border-radius: 100%; background: #eee; position:relative; z-index:3; border:7px solid var(--cr1); margin-top: 30px; margin-right: -5px;}
.crstaff img {width: 30px; height: 30px; object-fit:cover; border-radius: 100%;}
.right-side { grid-area: right-side; background:linear-gradient(230deg,var(--memfade)30%, var(--memfade2)100%), var(--bg5) no-repeat center / cover; border-left: 1px solid rgb(var(--fade),.1); position:relative; z-index:1; filter:blur(0px); margin-top: 25px; margin-right: 25px; height: 500px;}
.tab-icons { grid-area: 1 / 4 / 3 / 6; }
.tab-body { grid-area: 3 / 4 / 5 / 6; border:10px solid rgb(var(--fade),.2); outline:1px solid rgb(var(--fade),.3); position:Relative; width: 85%; height: 85%; margin:20px auto; padding-top: 18px; overflow:hidden;}
.right-side:hover .tab-body {opacity: 1;transition: .8s ease-in-out;}
.right-side .tab-body {opacity: 0;transition: .8s ease-in-out;}
.conlineleft {width: 1px; height:80%; background: rgb(var(--fade),.3); position:absolute; top:-30px; left: -35px; z-index:3;}

.tabnavi h1 {width:315px; height: 100px; margin-left: -29px; margin-top: -38px; background: var(--cr2); display:flex; flex-direction: row; align-items:center; justify-content:space-between; padding-left: 30px; padding-right: 10px;}
.tabimg {width: 305px; height: 160px; margin:auto; background: linear-gradient(var(--memfade)10%, var(--memfade2)100%), url('https://images.unsplash.com/photo-1598153346810-860daa814c4b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aGFycnklMjBwb3R0ZXJ8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80') no-repeat center center / cover; display:flex; align-items:center; justify-content:center; border-radius: 10px;}
.tabimg a {font: 900 40px/100% var(--cache); text-decoration:none; text-shadow:var(--shadow); color: var(--cr5); letter-spacing: 15px; border-bottom: 2px solid var(--cr4); width: 80%;position:relative; z-index:3; text-align:center;}
.tabbot {width:335px; height: 117px; margin-left: -29px; margin-top: 25px; background: var(--cr2); padding: 10px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around;}
.tabbot a {background: var(--mem2); padding: 5px; height: 10px; border-radius: 10px; font: 300 12px/100% var(--poppins); color: var(--white); text-decoration:none; min-width: 120px; justify-content:space-between; display:flex; align-items:center; margin-left: 4px; overflow:hidden;}
.tabbot i {background: var(--cr1); padding: 10px; margin-left: -5px;}

.tabfeatimg {width: 325px; height: 200px; margin:auto; margin-left: -10px;display:flex; align-items:center; justify-content:space-around; }
.tabfeatimg img {width: 100px; height: 190px; object-fit:cover; outline:1px solid rgb(var(--fade),.5); outline-offset: -10px; transition-duration:1.5s;}
 .tabfeatimg img:hover {transform:scale(1.2);}
.tabbfeat {width:330px; height: 75px; margin-left: -20px; margin-top: 25px; background: var(--cr2); padding: 10px; font: 300 12px/145% var(--poppins); text-align:justify; overflow:hidden;}
.tabbfeat b {color: var(--mem2); background: var(--cr1); padding: 1px;}

.tabannocimg {width: 305px; height: 200px; margin:auto; display:flex; align-items:center; justify-content:space-around; }
.tabannocimg img {width: 150px; height: 180px; object-fit:cover; outline:1px solid rgb(var(--fade),.5); outline-offset: -10px; transition-duration:1.5s;}
 .tabannocimg img:hover {transform:scale(1.2);}

/** header tabs **/

ul.tabs {margin: 0;padding: 0;list-style: none;height: 300px;width: 70px; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; position:absolute; left: -69px; top: 30px;}
ul.tabs i {font-size: 15px; font-weight: 100; color: var(--text); z-index:4; position:absolute;}
ul.tabs li {background: var(--cr1); padding: 10px; border-radius: 100%; border: 5px solid rgb(var(--fade),.4); width: 20px; height: 20px; position:relative; display:flex; align-items:Center; justify-content:center; top: 10px; z-index:3;}
ul.tabs li.active{position:Relative; z-index:4; background: var(--cr3);}
.tab_container {opacity: 1;transition: .8s ease-in-out;}
.tab_container{clear: both;background: pink; width: 95%; height: 97%; background: var(--cr1); color: var(--text); margin: auto;}
.tab_content{padding: 20px; padding-bottom: 75px;font-size: 1.2em;display: none;}
/** header tabs **/

ul.tabs {margin: 0;padding: 0;list-style: none;height: 300px;width: 70px; display:flex; flex-direction:column; justify-content:f;ex-start; align-items:center; position:absolute; left: -69px; top: 30px;}
ul.tabs i {font-size: 15px; font-weight: 100; color: var(--text); z-index:4; position:absolute;}
ul.tabs li {background: var(--cr1); padding: 10px; border-radius: 100%; border: 5px solid rgb(var(--fade),.4); width: 20px; height: 20px; position:relative; display:flex; align-items:Center; justify-content:center; top: 10px; z-index:3;}
ul.tabs li.active{position:Relative; z-index:4; background: var(--cr3);}
.tab_container {opacity: 1;transition: .8s ease-in-out;}
.tab_container{clear: both;background: pink; width: 100%; height: 97%; background: var(--cr1); color: var(--text); margin: auto;}
.tab_content{padding: 20px; padding-bottom: 75px;font-size: 1.2em;display: none;}

.staff { grid-area: staff; background: var(--cr2); display:flex; flex-direction:row; padding:10px; align-items:center; justify-content:space-around; position:relative;border-left: 1px solid rgb(var(--fade),.1);}
.staff::after {content:'Site Staff'; position:absolute; left:0; top:0; -webkit-text-fill-color: transparent;-webkit-text-stroke-width: 1px;letter-spacing: 6px;-webkit-text-stroke-color: rgba(var(--fade),.1); font: 500 70px/120% var(--cache); margin-left: 20px; letter-spacing: 20px; width: 100%;}
.staff a {width: 60px; height: 60px; object-fit:cover; border-radius: 100%; background: #eee; position:relative; z-index:3; border:7px solid var(--cr1); position:}
.staff img {width: 50px; height: 50px; object-fit:cover; border-radius: 100%;}

/**category title **/

#catinner {margin:10px auto; width: 95%; height: auto; background: var(--cr3); padding: 10px; position:relative;}
#catinner::after{content:''; width: 100%; height: 100%; border:1px solid rgb(var(--fade),.1); position:absolute; left: 10px; top: -10px;}
.cattitle{padding: 20px;height: 135px; width: 95%; background: var(--cr1);color: var(--text);margin: auto;position:relative; font: 400 2vw/100% var(--cache); overflow:hidden; text-align:Center; display:flex; align-items:center; justify-content:center;}
.cattitle a{font: 400 2vw/100% var(--cache);color: var(--text);text-decoration: none;border-bottom: none;transition: 0.3s;text-transform:lowercase;letter-spacing: 10px;text-shadow:none;position:absolute;z-index:2;width: 100%;left:30px;}
.catfor {padding:10px;
background: linear-gradient(var(--memfade)30%, var(--memfade)100%), var(--bg1) no-repeat center center / cover; background-attachment: fixed; width: 96.4%; margin:auto;  display:flex; flex-direction: row; flex-wrap:wrap;}

/** templates **/
/** admin temp **/
.admintemp {width: 500px; min-height: 300px; background:linear-gradient(10deg, var(--mem), var(--mem2)); margin: 20px auto; position:Relative; border-radius: 5px; border-top: 10px solid var(--mem2); border-bottom: 10px solid var(--mem2);}
.admintemp::after {content:''; width: 95%; height: calc(100% - 35px); border:1px solid rgb(255,255,255,.1); position:absolute; left: 10px; top: 15px; border-radius: 5px;}
.adtptop {padding: 10px; height: 100px; background: var(--cr1); margin-top: -1px;}
.adtptop h2 {text-align:center; font: 500 40px/100% 'poppins',sans-serif; color: var(--text);}
.adtptop sub {display:block; font: 100 12px/100% 'poppins',sans-serif; text-transform:uppercase;}
.adtpbottom {padding: 10px; height: 30px; background: var(--cr1);}
.adtpbody {margin: 20px auto; background: var(--cr2); min-height: 200px; width: 400px; border-radius: 10px; padding:30px; text-align:justify; position:relative; z-index:2;}
.adtpbody h1 {font: 300 25px/100% var(--martin); text-transform:capitalize; text-align:center; border-bottom:1px dotted var(--mem2);  border-top:1px dotted var(--mem2); background: var(--cr1); height: 20px; padding: 30px 20px 30px 20px; margin-top: 10px; border-radius: 5px;}
.adtpbody h2 {font: 300 50px/20px var(--cache); text-transform:capitalize; background: var(--memgrad); border-radius: 3px; text-align:right;}
.adtpbody h3 {font: 600 30px/100% var(--poppins); text-transform:capitalize;}
.adtpbody p {margin:auto; text-align:justify;width: 300px; line-height: 25px; padding-bottom: 30px; padding: 0 5px 0 5px; margin-top: 5px; padding-top: 10px;}
.adtpbody p img {float:left; width: 100px; height: 150px; -webkit-box-shadow: 0px 0px 6px 0px var(--cr1); box-shadow: 0px 0px 6px 0px var(--cr1); margin: 0px 15px 5px 0px; }
.adtpbody a {text-transform:uppercase; color: var(--cr5); text-decoration:none; position:relative; z-index:2;}
.adtpbody b {color:var(--mem); background: var(--text); text-transform:uppercase; padding:3px; border-radius:2px; font:900 14px/10% var(--poppins); height: 2px; width: auto;}
.adtpbody i {font:900 14px/10% var(--poppins); color: var(--mem2);}
.adtpbody img {width: 395px; max-height: 250px; object-fit:cover; border-radius: 5px;  margin: auto; -webkit-box-shadow: 0px 0px 6px 0px var(--cr1); box-shadow: 0px 0px 6px 0px var(--cr1);}
.adtpbody blockquote { border-left: 10px solid var(--mem2); padding: 10px; position:relative; z-index:2;}

basilisk{color: var(--bas); background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
bowtruckle {color: var(--bow); background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
griffin {color: var(--gri);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
centaur {color: var(--cen);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
harpy {color: var(--har);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
hippogriff {color: var(--hip);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
kelpie {color: var(--kel);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
thestral {color: var(--the);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
pixie {color: var(--pix);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
alias {color: var(--ali);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
puffskein {color: var(--puf);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
unicorn {color: var(--uni);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
wyvern {color: var(--wyv);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
magicalmuckracker {color: var(--mag);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
admin {color: var(--mag);background: rgb(var(--fade),.1); padding:1px 3px 1px 3px; border-radius: 3px; margin-top:5px;}
/** face claims **/

.crfctable {width: 400px; height: 470px; background:rgb(var(--fade),.1); border-radius:5px; display:flex; flex-direction:column; justify-content:space-around; align-items:center;padding-bottom: 10px; margin-top: 10px;}
.crfctable ltr { text-align:right; background:pink; align-self: flex-end; margin-right: 20px; font: 300 30px/100% var(--cache); text-transform:capitalize; background: var(--memgrad); border-radius: 3px;  }
.crfcbox {width: 370px; height: 170px; background: var(--cr1); box-shadow: 0 0 0 3px transparent; border: 5px solid transparent; border-radius: 4px; overflow:auto; position:relative; z-index:2;}
.crfccredit {background: var(--cr2); padding: 10px; text-align:center; height: 30px; max-width: 310px; font: 600 12px/100% var(--poppins); display:flex; align-items:center; justify-content:space-around; margin-top:5px; margin-left: 5px; border-radius: 5px;}
 .crfccredit a{text-decoration:none;}

  .crfccredit.basilisk {border: 3px solid var(--bas); color: var(--text); text-decoration:none;}
  .crfccredit.bowtruckle {border: 3px solid var(--bow); color: var(--text); text-decoration:none;}
  .crfccredit.griffin {border: 3px solid var(--gri); color: var(--text); text-decoration:none;}
  .crfccredit.centaur {border: 3px solid var(--cen); color: var(--text); text-decoration:none;}
  .crfccredit.harpy {border: 3px solid var(--har); color: var(--text); text-decoration:none;}
  .crfccredit.hippogriff {border: 3px solid var(--hip); color: var(--text); text-decoration:none;}
  .crfccredit.kelpie {border: 3px solid var(--kel); color: var(--text); text-decoration:none;}
  .crfccredit.thestral {border: 3px solid var(--the); color: var(--text); text-decoration:none;}
  .crfccredit.pixie {border: 3px solid var(--pix); color: var(--text); text-decoration:none;}
  .crfccredit.puffskein {border: 3px solid var(--puf); color: var(--text); text-decoration:none;}
  .crfccredit.unicorn {border: 3px solid var(--uni); color: var(--text); text-decoration:none;}
  .crfccredit.wyvern {border: 3px solid var(--wyv); color: var(--text); text-decoration:none;}
  .crfccredit.magicalmuckracker {border: 3px solid var(--mag); color: var(--text); text-decoration:none;}
  .crfccredit.alias {border: 3px solid var(--ali); color: var(--text); text-decoration:none;}

 
 /** canon list **/
 #canonlist {background: var(--cr1); padding-bottom: 60px; border-radius: 5px; position:Relative; z-index:2;}
 #canonlist h1 {background:none; font: 400 50px/100% var(--cache);padding: 10px; background: var(--cr1); border-radius: 0%; border:none; border-radius: 5px 5px 0 0;}
 #canonlist h4 {font: 100 20px/100% var(--poppins); text-transform:uppercase;}
 #canonlist block {display:block;}
 #canonlist line {width: 100%; height:1px; display:block;border-bottom:1px dotted var(--mem2);margin-bottom: 10px; margin-top: 10px;}
 .clibox {padding: 10px; width: 250px; margin: -40px auto;}
    #canonlist.basilisk {background: var(--bas); color: var(--text); text-decoration:none;}
    #canonlist.bowtruckle {background: var(--bow); color: var(--text); text-decoration:none;}
    #canonlist.griffin {background: var(--gri); color: var(--text); text-decoration:none;}
    #canonlist.centaur {background: var(--cen); color: var(--text); text-decoration:none;}
    #canonlist.harpy {background: var(--har); color: var(--text); text-decoration:none;}
    #canonlist.hippogriff {background: var(--hip); color: var(--text); text-decoration:none;}
    #canonlist.kelpie {background: var(--kel); color: var(--text); text-decoration:none;}
    #canonlist.thestral {background: var(--the); color: var(--text); text-decoration:none;}
    #canonlist.pixie {background: var(--pix); color: var(--text); text-decoration:none;}
    #canonlist.puffskein {background: var(--puf); color: var(--text); text-decoration:none;}
    #canonlist.unicorn {background: var(--uni); color: var(--text); text-decoration:none;}
    #canonlist.wyvern {background: var(--wyv); color: var(--text); text-decoration:none;}
    #canonlist.magicalmuckracker {background: var(--mag); color: var(--text); text-decoration:none;}
    #canonlist.alias {background: var(--ali); color: var(--text); text-decoration:none;}

/** mem dir temp **/
.memdir {width: 500px; height: 600px; background:linear-gradient(10deg, var(--memfade), var(--memfade2)), var(--bg2); margin: 20px auto; position:Relative; border-radius: 5px; border-top: 10px solid var(--mem2); border-bottom: 10px solid var(--mem2); overflow:hidden;}
.memdir::after {content:''; width: 95%; height: 98%; border:1px solid rgb(255,255,255,.1); position:absolute; left: 10px; top: 15px; border-radius: 5px;}
.memdirtop {padding: 10px; height: 100px; background: var(--cr1); margin-top: -1px;}
.memdirtop h2 {text-align:left; font: 500 40px/100% 'poppins',sans-serif; color: var(--text); text-indent:10px;}
.memdirtop sub {display:block; font: 100 12px/100% 'poppins',sans-serif; text-transform:uppercase;}
.memdirimg {width: 200px; height: 400px; border-radius: 20px; background: var(--cr1); padding: 10px; position:absolute; bottom: -20px; right:-20px; z-index:2;}
.memdirimg:before{content:"";position:absolute;bottom:70px;left:-40px;height:40px;width:40px;border-bottom-left-radius:50%;background:transparent;box-shadow:0 20px 0 0 var(--cr1);transform:rotate(0deg) scaleX(-1);}
.memdirimg:after{content:"";position:absolute;top:-40px;left:160px;height:40px;width:40px;z-index:-1;border-bottom-left-radius:50%;background:transparent;box-shadow:0 20px 0 0 var(--cr1);transform:rotate(0deg) scaleX(-1);}
.memdirimg img{width: 200px; height: 400px; border-radius: 20px; object-fit:cover;}
.memdirbot {padding: 10px; height: 30px; width: 100%;background: var(--cr1); position:absolute; bottom:0; lefT:0; z-index:1;}
.memcharinfo {width: 90%; margin:auto; padding:5px; position:absolute; top: 130px; left: 18px; font: 200 14px/100% var(--poppins); color: var(--text); text-align:center;}
.memcharlist {padding: 10px; background: rgb(var(--fade),.3); height: 305px; width: 250px; margin-top: 85px; margin-left: 20px; border-radius: 0px 0px 20px; overflow:auto; z-index:1; position:relative;     box-shadow: 0 0 0 3px transparent;border: 5px solid transparent;}
.memcharlist::-webkit-scrollbar {width: 2px;}
.memcharlist::-webkit-scrollbar-track {background: transparent;}
.memcharlist::-webkit-scrollbar-thumb {background: var(--text);}

.charbox {display:block; margin: 10px auto; text-align:center; border-bottom:1px solid var(--white); font: 300 35px/100% var(--cache);}
.charbox a {color: var(--cr1); text-decoration:none;}
.charbox sub {display:block;font: 700 14px/100% var(--poppins);}
.charbox a sub {color: var(--cr2)!important;}


#basilisk {color: var(--bas);}
#bowtruckle {color: var(--bow);}
#griffin {color: var(--gri);}
#centaur {color: var(--cen);}
#harpy {color: var(--har);}
#hippogriff {color: var(--hip);}
#kelpie {color: var(--kel);}
#thestral {color: var(--the);}
#pixie {color: var(--pix);}
#alias {color: var(--ali);}
#puffskein {color: var(--puf);}
#unicorn {color: var(--uni);}
#wyvern {color: var(--wyv);}
#magicalmuckracker {color: var(--mag);}