body {color:#444;font-family: 'Roboto', sans-serif;font-size:15px;line-height:150%;background:#222;}

a {color:#bb7ec3;}

spoiler {background:#444;}

spoiler:hover {background:transparent;}

ul {padding:0 20px;}
ul ul {padding-bottom:15px;}

#site-wrapper {max-width:540px;margin:50px auto;overflow:hidden;}

/* SITE HEADER */
#content-header {color:#bb7ec3;text-align:center;}

#site-title {
  font-family: 'Libre Caslon Text', serif;
  font-size:56px;
  font-weight:bold;
  line-height:150%;
}

#site-subtitle:before {content:'multi-muse written by beetle';display:block;}
#site-subtitle:after {content:'he/him • 28 • est';display:block;}

/* site naviation */
#navigation {margin:20px 0 50px 0;text-align:center;}
#navigation a {color:#bb7ec3;font-weight:bold;text-decoration:none;margin:0 10px;}
#navigation #active {border-bottom:3px solid #bb7ec3;padding-bottom:5px;}

/* SITE CONTENT */
#content-body {text-align:justify;background: #efefef;border-radius:6px;padding:20px;}

/* MUSE PAGE STYLING */
/* filters */
.filters {line-height: 170%;margin-bottom:15px;}
.filters ul {margin:0;padding:0;margin-bottom:10px;}
.filters li {display: inline; list-style-type: none;}

/* makes sure long fandom names are always on the same line */
.filters a {white-space: nowrap;}

/* makes space between filter options, there's a better way to do this but I am simply too lazy */
.space {margin: 5px;}

/* filter "button" */
.btn {font-size:15px!important;text-decoration:none;color:#242424;padding-bottom:2px;border-bottom:1px solid #bb7ec3;}
.selected {border-bottom:3px solid #bb7ec3;font-weight:bold;}
.btn:hover {border-bottom:3px solid #bb7ec3;}

.grid {display:flex;flex-wrap:wrap;}

/* character wrapper */
.muselist .item {display: grid;width:50%;align-items:center;justify-content:flex-start;margin-top:10px;}

/* character icon */
.item .ch-icon {grid-area: 1 / 1 / 3 / 2;}
.item img {height:60px;margin-right:10px;border-radius:6px;}

/* fandom / verse */
.item .ch-fandom {font-size:13px;font-style:italic;line-height:100%;color:#7e5c82;grid-area: 2 / 2 / 3 / 3;}

/* character name */
.item .ch-name {font-family: 'Libre Caslon Text', serif;font-size:20px;font-weight:bold;grid-area: 1 / 2 / 2 / 3;height:40px;display:flex;flex-wrap:wrap;align-items:center;line-height:22px;}

.item .ch-name i {font-size:14px;display:block;margin-top:-2px;font-weight:normal;width:100%;}

.item .ch-name a {color:#444;border-bottom:1px solid #bb7ec3;text-decoration:none;}

/* CHARACTER PAGE STYLING */

/* character profile name */
#char-name {text-align:center;}
#char-name h1 {margin:0;padding:0;}
#char-name h2 {font-weight:normal;font-style:italic;font-size:16px;line-height:150%;padding:0;margin:0;margin-bottom:15px;}

/* quick stats wrapper */
.quick-box {
  display:flex;
  margin-bottom:-5px;
}

/* quick stats avatar */
.char-avatar {
  border-radius:25px;
  margin-right:10px;
  height:145px;
  float:left;
}

/* quick stats info */
.quick-box p {margin:7px 0;}
.quick-box p:first-child {margin-top:0;}
.quick-box i {font-size:11px;}

.quick-box #age:before,.quick-box #gender:before,.quick-box #species:before {display:block;font-weight:bold;}

.quick-box #age:before {content:'Age';}
.quick-box #gender:before {content:'Gender';}
.quick-box #species:before {content:'Species';}

#biofilters {text-align:center;margin-top:15px;position:sticky;top:0;}
.syn, .notes, .hooks, .verses {display:block;margin-top:-10px;}

.syn b, .notes b, .hooks b, .verses b {font-size:16px;}

.verse {font-family: 'Libre Caslon Text', serif;font-size: 16px;}

/* RANDOMIZER STYLING */
#ra-avatar {
  height:100px;
  float:left;
  margin-right: 15px;
  border-radius:6px;
}

#none {display:none;}
  
button {margin:0;padding:0;border:none;background:transparent;color:#b559c2;}