#marquee { 
width:100%;
max-width: 100%;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
opacity:0.8;
}


@font-face {
    font-family: 'DS';
    src: url('../css/ds_webfont/nintendo-ds-bios-webfont.woff2') format('woff2'),
         url('../css/ds_webfont/nintendo-ds-bios-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




.smaller
{font-size:22px;}


.arsenal-regular {
  font-family: "Arsenal", serif;
  font-weight: 400;
  font-style: normal;
}

.arsenal-bold {
  font-family: "Arsenal", serif;
  font-weight: 700;
  font-style: normal;
}

.arsenal-regular-italic {
  font-family: "Arsenal", serif;
  font-weight: 400;
  font-style: italic;
}

.arsenal-bold-italic {
  font-family: "Arsenal", serif;
  font-weight: 700;
  font-style: italic;
}



.unifrakturmaguntia-regular {
  font-family: "UnifrakturMaguntia", cursive;
  font-weight: 400;
  font-style: normal;
}

.averia-serif-libre-light {
  font-family: "Averia Serif Libre", serif;
  font-weight: 300;
  font-style: normal;
}

.averia-serif-libre-regular {
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: normal;
}

.averia-serif-libre-bold {
  font-family: "Averia Serif Libre", serif;
  font-weight: 700;
  font-style: normal;
}

.averia-serif-libre-light-italic {
  font-family: "Averia Serif Libre", serif;
  font-weight: 300;
  font-style: italic;
}

.averia-serif-libre-regular-italic {
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: italic;
}

.averia-serif-libre-bold-italic {
  font-family: "Averia Serif Libre", serif;
  font-weight: 700;
  font-style: italic;
}


.noto-color-emoji-regular {
  font-family: "Noto Color Emoji", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* unifrakturcook-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'UnifrakturCook';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/unifrakturcook-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* averia-libre-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Averia Libre';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/averia-libre-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* averia-libre-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Averia Libre';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/averia-libre-v16-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* averia-libre-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Averia Libre';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/averia-libre-v16-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




img{
max-width:50%;
height: auto;
text-shadow: 0 0 9px #fff, 0 0 9px #fff, 0 0 1px #fff, 0 0 2px #ff00de, 0 0 1px #ff00de, 0 0 1px #ff00de, 0 0 1px #ff00de, 0 0 1px #ff00de;
text-align:center;
}



body
{
text-align:center;
font-family: 'Averia Serif Libre'; 
margin: 0; padding: 0;
font-size:22px;
background-color: #0d0d0d;
color:#ff006b;
  background-image: linear-gradient(to bottom, #222, #444);
}





h1
{font-family: "UnifrakturCook";#ff006b}

h3
{font-family: "UnifrakturCook";#ff006b}


a
	{
	font-size:24px;
	font-weight:bold;
	color:rgb(0, 255, 140);
	text-decoration:none !important ;  animation: sweepin .5s ease-in-out;
	}
a:hover
	{
	text-decoration:none !important ;
	color: #ff0c7f;
	opacity:1;
	}

.medieval span
	{
	font-size:44px;
	font-weight:bold;
	color:#ff006b;
	text-decoration:none !important ;
	font-family: "UnifrakturCook";
	background-position: 100% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background 400ms;
	-webkit-background-clip: text;
	}
	
.medieval a
	{
	font-size:44px;
	font-weight:bold;
	color:#ff006b;
	text-decoration:none !important ;
	font-family: "UnifrakturCook";
	-webkit-text-stroke-color: rgb(0, 255, 140);
	animation: anim 1s linear infinite alternate;
	-webkit-text-fill-color: white;
	-webkit-text-stroke-width: 1px;
	text-shadow: rgb(255, 0, 0) 0px 0px 4px, rgb(0, 0, 255) 0px 0px 8px;
	background:
	linear-gradient(
	  to right,
	  rgba(100, 200, 200, 1),
	  rgba(100, 200, 200, 1)
	),
	linear-gradient(
	  to right,
	  rgba(255, 0, 0, 1),
	  rgba(255, 0, 180, 1),
	  rgba(0, 100, 200, 1)
	);
	background-position: 100% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background 400ms;
	-webkit-background-clip: text;
	animation: sweepin_opacity .5s ease-in-out;
	}
.medieval a:hover
	{
	font-size:44px;
	text-decoration:none !important ;
	color: #ff006b;
	-webkit-text-stroke-color: rgb(255, 0, 107);
	animation: anim 1s linear infinite alternate;
	-webkit-text-fill-color: #ff006b;
	-webkit-text-stroke-width: 1px;
	text-shadow: rgb(255, 0, 107) 0px 0px 9px, rgb(255, 0, 107) 0px 0px 16px;
	opacity:1;
	font-family: "UnifrakturCook";
	}
	
	
	
	/*
		color: #ff006b;
	-webkit-text-stroke-color: rgb(255, 0, 107);
	animation: anim 1s linear infinite alternate;
	-webkit-text-fill-color: #ff006b;
	-webkit-text-stroke-width: 1px;
	text-shadow: rgb(255, 0, 107) 0px 0px 9px, rgb(255, 0, 107) 0px 0px 16px;
	*/
	
	
.sidebar, .sidebar-fairy, .sidebar-xraf {
max-height:100%;
position: -webkit-sticky; /* for Safari users */
position: sticky;
top: 40px;
margin-left:40px;
float: left;
background-color: black;
background: linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        );background-blend-mode: darken;
border: 6px solid #ff006b;
transform: rotate(-12deg);
border-radius: 25px;
padding:5px;
}



.sidebar-fairy:hover
{
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%), url(https://xrafstar.monster/images/fairy_slice.png) no-repeat center center;background-size:160%;background-attachment: fixed;
padding-right: 100px;
	padding-bottom:100px;
}

/*https://xrafstar.monster/codex/world/INNOCENT/handler.png*/

.sidebar-xraf:hover,.sidebar-xraf:focus
{
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%),url(https://xrafstar.monster/codex/world/INNOCENT/handler.png) no-repeat center center;background-size:150%;background-attachment: fixed;
padding-right: 100px;
	padding-bottom:100px;
}



.sideways
{
transform: rotate(90deg);
}


.sidebar-credits {
max-height:100%;
position: -webkit-sticky; /* for Safari users */
position: sticky;
top: 40px;
margin-left:40px;
float: left;
background-color: none;
transform: rotate(-12deg);
border-radius: 25px;
font-size:34px;
color:#ff006b;
-webkit-text-stroke-color: #ff006b;
animation: anim 1s linear infinite alternate;
-webkit-text-fill-color: #ff006b;
-webkit-text-stroke-width: 1px;
text-shadow: #ff006b 0px 0px 4px, #ff006b 0px 0px 8px;
}
.sidebar-credits a {
	font-size:34px;
	color:#ff006b;
	text-decoration:none !important ;
	font-family: "UnifrakturCook";
	-webkit-text-stroke-color: rgb(0, 255, 140);
	animation: anim 1s linear infinite alternate;
	-webkit-text-fill-color: white;
	-webkit-text-stroke-width: 1px;
	text-shadow: rgb(255, 0, 0) 0px 0px 4px, rgb(0, 0, 255) 0px 0px 8px;
}


.sidebar div {
padding: 8px;
font-size: 24px;
display: block;
}

.sidebar a:hover {
cursor: pointer;
}

.body-text {
margin-left: 150px;
font-size: 18px;
}

.box1 {
font-family: 'Averia Libre';
font-weight:bold;
color:#ff006b;
font-size:30px;	
font-smooth: never;
-webkit-font-smoothing : none;
/*text-shadow: 2px 2px 2px white;*/
padding:20px;
margin:20px;
border: 6px solid #ff006b;
width:200px;
transform: rotate(-12deg);
border-radius: 25px;
display: table-cell;
background-color:black;
}

.box2 {
font-family: 'Averia Libre';
font-weight:bold;
color:#ff006b;
font-size:30px;	
font-smooth: never;
-webkit-font-smoothing : none;
/*text-shadow: 2px 2px 2px white;*/
background-color:none;
padding:20px;
margin:20px;
border: 6px solid #ff006b;
width:150px;
transform: rotate(-12deg);
border-radius: 25px;
display: table-cell;
background-color:black;
}


/* relevant styles */
.img__wrap {
  /*position: relative;
  display: inline-block;*/
  transform: rotate(-12deg);
  display: table-cell;
  float:left;
}

/* relevant styles */
.img__wrap_2 {
  /*position: relative;
  display: inline-block;*/
}

.img__img {
  vertical-align: bottom;
  max-width:100%;
  height: auto;
  text-shadow: 0 0 9px #fff, 0 0 9px #fff, 0 0 1px #fff, 0 0 2px #ff00de, 0 0 1px #ff00de, 0 0 1px #ff00de, 0 0 1px #ff00de, 0 0 1px #ff00de;
  text-align:center;
}

.img__description_layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /*background: rgba(36, 62, 206, 0.6);*/
  color: #ff006b;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /*float:left;*/
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
  font-size:100px;
}


.img__description_layer_2 {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ff006b;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s, visibility .2s;
  font-size:100px;
}

.img__wrap:hover .img__description_layer {
  visibility: visible;
  opacity: 1;
}

.img__wrap_2:hover .img__description_layer_2 {
  visibility: visible;
  opacity: 1;
}

/*unused i think*/
#trigger{
    z-index: 2;
}

#bg{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    z-index: -1;
	width:100%;background-color:rgba(0,0,0, 0.8);background: #5B22B1 url(https://xrafstar.monster/images/pillsbright.gif) repeat center center;background-size:cover;background-attachment: fixed;
}



// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

body.perfect_tense
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width:100%;background: black url(https://xrafstar.monster/codex/games/images/abuse_bg_small.gif) no-repeat center center;background-size:cover;background-attachment: fixed;
}

div.cancer_you
{
width:100%;background: black url(https://xrafstar.monster/stories/18footleash/images/cancer_krabat.gif) no-repeat center center;background-size:cover;background-attachment: fixed;
}

div.cancer_me
{
width:100%;background: black url(https://xrafstar.monster/pics/Cancertarded.png) no-repeat center center;background-size:cover;background-attachment: fixed;
}

div.cancer_shrine
{
width:100%;background: black url(https://xrafstar.monster/stories/18footleash/images/sims1.png) no-repeat center center;background-size:cover;background-attachment: fixed;
}


body.maggot_therapy
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width:100%;background: black url(https://xrafstar.monster/codex/games/images/maggot_soup.png) no-repeat center center;background-size:cover;background-attachment: fixed;
}

body.world
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: black url(https://xrafstar.monster/codex/world/images/worldmap.gif) no-repeat center center;background-size:cover;background-attachment: fixed;
}

body.cunt
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: linear-gradient(
          rgba(0, 0, 0, 0.5), 
          rgba(0, 0, 0, 0.9)
        ), url(https://xrafstar.monster/stories/cunt/images/lipstick.gif) no-repeat center center;background-size:cover;background-attachment: fixed;
}



body.gyre
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: linear-gradient(
          rgba(0.1, 0, 0, 0.1), 
          rgba(0, 0, 0, 1)
        ), url(https://xrafstar.monster/codex/world/gyre/shrine.gif) no-repeat center center;background-size:cover;background-attachment: fixed;
}

body.corruption
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: linear-gradient(
          rgba(0.1, 0, 0, 0.1), 
          rgba(0, 0, 0, 1)
        ), url(https://xrafstar.monster/codex/world/corruption/uhohh.gif) no-repeat center center;background-size:cover;background-attachment: fixed;
}

body.weakness
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: linear-gradient(
          rgba(0, 0, 0, 0.9), 
          rgba(0, 0, 0, 0.2)
        ), url(https://xrafstar.monster/stories/serious_weakness/invert.jpg) no-repeat center center;background-size:cover;background-attachment: fixed;
}

body.entities
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ), url(https://xrafstar.monster/codex/games/images/abuse_bg_small.gif),url(https://xrafstar.monster/stories/18footleash/constellations/cancer_overbite_slice.png) no-repeat center center;background-blend-mode: color-dodge;background-size:cover;background-attachment: fixed;
}



body.games
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: linear-gradient(
          rgba(0, 0, 0, 0.1), 
          rgba(0, 0, 0, 0.9)
        ), url(https://xrafstar.monster/codex/games/images/fantasy/plaza.gif) no-repeat center center;background-size:cover;background-attachment: fixed;
}

body.geography
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: black url(https://xrafstar.monster/codex/world/images/purple.png) no-repeat center center;background-size:cover;background-attachment: fixed;
}



body.cupbearer
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: black url(https://xrafstar.monster/stories/cupbearer/church.png) no-repeat center center;background-size:cover;background-attachment: fixed;
}

body.tracker
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: black url(https://xrafstar.monster/codex/images/rpg_garden.png) no-repeat center center;background-size:cover;background-attachment: fixed;
}


body.overworld
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: black url(https://xrafstar.monster/codex/images/pseud.png) no-repeat center center;background-size:cover;background-attachment: fixed;
}

body.classes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: black url(https://xrafstar.monster/codex/lore/images/ffl.jpg) no-repeat center center;background-size:auto;background-attachment: fixed;
}

body.leash
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ), url(https://xrafstar.monster/stories/18footleash/images/cancer_puke.png) no-repeat center center;background-size:cover;background-attachment: fixed;background-blend-mode: darken;
}



body.VIP
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: linear-gradient(
          rgba(0, 0, 0, 0.1), 
          rgba(0, 0, 0, 0.9)
        ), url(https://xrafstar.monster/codex/VIP/casino.png) no-repeat center center;background-size:cover;background-attachment: fixed;background-blend-mode: darken;
}

body.nncnt
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: black url(https://xrafstar.monster/codex/games/images/intro.gif) no-repeat center center;background-size:cover;background-attachment: fixed;
}


body.fantasy
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: black url(https://xrafstar.monster/codex/games/images/fantasy/plaza.gif) no-repeat center center;background-size:cover;background-attachment: fixed;
}

body.brackets
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: black url(https://xrafstar.monster/codex/world/brackets/store.png) repeat center center;background-size:100% 100%;background-attachment: fixed;
}

body.me 
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: black url(https://xrafstar.monster/codex/images/fag.png) no-repeat center center;background-size:420px;background-attachment: fixed;
}

body.xrafstar
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: black url() no-repeat center center;background-size:cover;background-attachment: fixed;
}

#bg-overworld{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    z-index: -1;
	width:100%;background-color:rgba(0,0,0, 0.8);background: #5B22B1 url(https://xrafstar.monster/codex/images/pseud.png) repeat center center;background-size:cover;background-attachment: fixed;
}

#trigger_sw:hover ~ #bg {
	width:100%;background-color:rgba(0,0,0, 0.8);background: #5B22B1 url(https://xrafstar.monster/story_list/serious_weakness/serious_weakness_cover_art.png) repeat center center;background-size:cover;background-attachment: fixed;
}​

#trigger_lk:hover ~ #bg {
	width:100%;background-color:rgba(0,0,0, 0.8);background: #5B22B1 url(https://xrafstar.monster/story_list/lks_cover.png) repeat center center;background-size:cover;background-attachment: fixed;
}​


.hover_enclose{background-color:green;
  color:white;
  height:40px;
}

.one:hover + .two {
display:none;
}


.img__wrap:hover .img__img {
  visibility: visible;
  opacity: 0;
}

.img__description {
  transition: .3s;
  transform: translateY(1em) perspective(17px) skew(30deg, 20deg);
  font-family: 'Averia Libre'; 
  font-size:60px;
}

.img__description_2 {
  transition: .3s;
  transform: translateY(1em) perspective(17px) skew(20deg, 10deg);
  font-family: 'Averia Libre'; 
  font-size:60px;
}


.img__wrap:hover .img__description {
  transform: translateY(0);
}



.titlesmaller
{color:black;font-size:40px;}


	
	
	
	
	
	
#showcase {vertical-align:middle; text-align:center; margin:0 auto; width: 80%; border-collapse:separate;} #showcase img {width:100%; max-width:100%; height: auto; margin: 20px;} 

img.cover {}



::-moz-selection { /* Code for Firefox */
    
	color:transparent;


}
::selection {
	color:transparent;
}



.title {color:black;font-size:50px;}


/* .bg
	{background-color:black;color:white;} */



p
{
color:white;
font-size:22px;
opacity:0.9;
padding:5px;
margin-left: auto;
    margin-right: auto;
    width: 20em
}

.big
{color:black;
font-size:40;
text-align:center;
font-weight:bold;
}



p.white {color:white;text-align:justify;}


h3{font-size:44px;padding:0px;margin:0px;}
h4{font-size:32px;padding:0px;margin:0px;}

.boxed-img {
	float:left;width:100%;
} 

.boxed {
background-color:black;
padding:5px;
text-align:center;
margin-left: auto;
margin-right: auto;
width: 20em;
color:#c5a6ff;
float: left;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #ff006b;
font-family: 'Averia Libre';
} 

.boxed-center {
background-color:black;
padding:5px;
text-align:center;
margin-left: auto;
margin-right: auto;
width: 16em;
color:#c5a6ff;
border: 2px solid #ff006b;
font-family: 'Averia Libre';
} 

.boxed-ghost {
background-color:black;
padding:5px;
text-align:center;
margin-left: auto;
margin-right: auto;
width: 20em;
color:#c5a6ff;
float: left;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #ff006b;
font-family: 'Averia Libre';
opacity:0.5;
} 


.brackets {
background-color:black;
padding:5px;
width: 20em;
color:#c5a6ff;
margin:80px;
font-family: 'Averia Libre';
} 

.boxed-glow {
background-color:black;
padding:5px;
text-align:center;
margin-left: auto;
margin-right: auto;
width: 20em;
color:#c5a6ff;
float: left;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #ff006b;
font-family: 'Averia Libre';
-webkit-text-stroke-color: #ff006b;
  animation: anim 1s linear infinite alternate;
  -webkit-text-fill-color: #ff006b;
  -webkit-text-stroke-width: 1px;
  text-shadow: #ff006b 0px 0px 3px, #ff006b 0px 0px 4px;
} 



.boxed-borderless {
text-align:center;
margin-left: 10px;
margin-right: auto;
color:#c5a6ff;
float: left;
padding: 5px;
font-family: 'Averia Libre'; 
} 


.big-text-cant {
text-align:center;
margin-left: 50px;
margin-right: auto;
color:#c5a6ff;
padding: 25px;
font-family: 'Averia Libre'; 
font-size: 40px;
max-height:100%;
position: -webkit-sticky; /* for Safari users */
position: sticky;
top: 40px;
background-color: none;
border: 0px solid #ff006b;
transform: rotate(-12deg);
border-radius: 25px;
width:500px;
opacity:0.8;
} 

.boxed-solo {
background-color: #ff006b !important;
padding:5px;
text-align:center;
margin-left: auto;
margin-right: auto;
width: 20em;
color:black;
-webkit-text-stroke-color: black;
  animation: anim 1s linear infinite alternate;
  -webkit-text-fill-color: black;
  -webkit-text-stroke-width: 0px;
  text-shadow: black 0px 0px 0px, black 0px 0px 0px;
} 

.boxed-solo-mini {
background-color: #ff006b !important;
padding:5px;
text-align:center;
margin-left: auto;
margin-right: auto;
width: 6em;
color:black;
font-size:1.25em;
font-family: 'Averia Libre'; 
-webkit-text-stroke-color: black;
  animation: anim 1s linear infinite alternate;
  -webkit-text-fill-color: black;
  -webkit-text-stroke-width: 0px;
  text-shadow: black 0px 0px 0px, black 0px 0px 0px;
} 

.boxed-solo-mini-wide {
border: 2px solid #ff006b;
border-radius:25px;
/*background-color: #ff006b !important;*/
padding:12px;
text-align:center;
margin-left: auto;
margin-right: auto;
width: 286px;
color:#B289FF;
font-size:1.25em;
font-family: 'Averia Libre'; 
} 


.softbox {
padding:5px;
text-align:center;
margin-left: auto;
margin-right: auto;
width: 20em;
color:white;
float: left;
margin-left: 10px;
margin-top: 10px;
padding: 5px;
} 



	

	
.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
  -webkit-text-stroke-color: rgb(0, 255, 140);
  animation: anim 1s linear infinite alternate;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  text-shadow: rgb(255, 0, 0) 0px 0px 4px, rgb(0, 0, 255) 0px 0px 8px;
  font-family: "UnifrakturCook", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji";
}


.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 15px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 120%;
  width:300px;
}



.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 150%;
  margin-top: -5px;
  /*border-width: 5px;
  border-style: solid;
  border-color: transparent none transparent transparent;*/
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext-chill {
  visibility: hidden;
  background-color: black;
  text-align: center;
  border-radius: 6px;
  padding: 15px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 130%;
  width:300px;
  font-family: 'Averia Libre';
  font-size:24px;
  color: #B289FF;
}

.tooltip .tooltiptext-chill::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 150%;
  margin-top: -5px;
  /*border-width: 5px;
  border-style: solid;
  border-color: transparent none transparent transparent;*/
}
.tooltip:hover .tooltiptext-chill {
  visibility: visible;
}


img.rounded {
  border-radius: 30px;
  width:100px;
  margin-top:-30px;
}

.illuminated-title
{
font-family: "UnifrakturMaguntia";
font-size:164px;
-webkit-text-stroke-color: rgb(0, 255, 140);
animation: anim 1s linear infinite alternate;
-webkit-text-fill-color: rgb(0, 255, 140);
text-shadow: rgb(0, 255, 140) 0px 0px 4px, rgb(0, 255, 140) 0px 0px 8px;
margin: auto;

text-align:center;
margin-top:24px;
margin-bottom:12px;
}

.illuminated-title-small
{
font-family: "UnifrakturMaguntia";
font-size:64px;
-webkit-text-stroke-color: rgb(0, 255, 140);
animation: anim 1s linear infinite alternate;
-webkit-text-fill-color: rgb(0, 255, 140);
text-shadow: rgb(0, 255, 140) 0px 0px 4px, rgb(0, 255, 140) 0px 0px 8px;
margin: auto;
width: 60%;
text-align:center;
margin-top:24px;
margin-bottom:12px;
}

.illuminated-asterisk
{
font-family: "UnifrakturMaguntia";
font-size:164px;
-webkit-text-stroke-color: rgb(0, 255, 140);
animation: anim 1s linear infinite alternate;
-webkit-text-fill-color: rgb(0, 255, 140);
text-shadow: rgb(0, 255, 140) 0px 0px 4px, rgb(0, 255, 140) 0px 0px 8px;
margin: auto;
width: 60%;
text-align:center;
margin-top:24px;
margin-bottom:-64px;
}


.illuminated
{
-webkit-text-stroke-color: #ff006b;
animation: anim 1s linear infinite alternate;
text-shadow: #ff006b 0px 0px 1px, #ff006b 0px 0px 2px;
font-size:52px;
padding:12px;
margin: auto;
width: 60%;
text-align:left;
}

.illuminated-mid
{
font-size:28px;
padding:12px;
margin: auto;
width: 60%;
text-align:left;
}



.illuminated-small
{
text-shadow: #c5a6ff 0px 0px 1px, #c5a6ff 0px 0px 2px;
color:#c5a6ff;
font-size:28px;
padding:12px;
margin: auto;
width: 60%;
text-align:left;
}

.illuminated-normal
{
color:#c5a6ff;
font-size:22px;
padding:12px;
margin: auto;
width: 60%;
text-align:left;
}



ul.cool_list_star > li:nth-child(n) {
  list-style: "✺   ";
  list-style-position: outside;
}

ul.cool_list_fly > li:nth-child(n) {
  margin-top: 10px;  
  list-style: "🪰  ";
  list-style-position: outside;
  font-family: "Averia Libre", "UnifrakturCook", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji";
    color:#ff006b;
}

ul.cool_list_star2 > li:nth-child(n) {
  margin-top: 10px;  
  list-style: "✦  ";
  list-style-position: outside;
  color:#c5a6ff;
}

 /* Style the button that is used to open and close the collapsible content */
.collapsible {
	background-color: black;
	cursor: help;
	padding: 18px;
	width: 140px;
	border: none;
	outline: none;
	font-size: 64px;
	font-family: 'UnifrakturCook';
	color:rgb(0, 255, 140);
	text-align:center;
	border-radius: 25px;
}


 /* Style the button that is used to open and close the collapsible content */
.collapsible2 {
	cursor: help;
	font-size:24px;
	border: 2px solid #ff006b;
	font-family: 'Averia Libre';
	background-color:black;
	color:rgb(0, 255, 140);
	padding:10px;
	border-radius: 2px;
}

 /* Style the button that is used to open and close the collapsible content */
.collapsible_big {
	cursor: help;
	font-family: 'Averia Libre';
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: rgb(0, 255, 140);
  color:black;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible2:hover {
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible_big:hover {
  background-color: rgb(0, 255, 140);
}



/* Style the collapsible content. Note: hidden by default */
.content {
	border-radius: 2px;
	/*padding: 0 2px;*/
	max-height: 0;
	text-align:center;
	width:800px;
	font-size:24px;
	position:relative;
	overflow: hidden;
	left: 50%;
	transition: max-height 0.1s ease-out;
	color:#ff006b;
	/*margin-top:-20px;*/
	text-align:left;
} 


.content a
{	font-size:28px;
	background-color: black;
	-webkit-text-stroke-color: rgb(0, 255, 140);
	-webkit-text-fill-color: rgb(0, 255, 140);
	-webkit-text-stroke-width: 1px;
	text-shadow: rgb(0, 255, 140) 0px 0px 1px, rgb(0, 255, 140) 0px 0px 2px;
}


/* Style the collapsible content. Note: hidden by default */
.content2 {
border-radius: 2px;
	padding: 0 12px;
	max-height: 0;
	text-align:center;
	width:500px;
	font-size:24px;
	position:relative;
	overflow: hidden;
	left: 50%;
	transition: max-height 0.1s ease-out;
	background-color: black;
	color:#ff006b;
	margin-top:-20px;
	text-align:left;
} 



::-moz-selection { /* Code for Firefox */
	-webkit-text-stroke-color: rgb(0, 255, 140);
	-webkit-text-fill-color: rgb(0, 255, 140);
	-webkit-text-stroke-width: 2px;
	text-shadow: rgb(0, 255, 140) 0px 0px 13px, rgb(0, 255, 140) 0px 0px 16px;
}

::selection {
	-webkit-text-stroke-color: rgb(0, 255, 140);
	-webkit-text-fill-color: rgb(0, 255, 140);
	-webkit-text-stroke-width: 2px;
	text-shadow: rgb(0, 255, 140) 0px 0px 13px, rgb(0, 255, 140) 0px 0px 16px;
}













h1 {
  text-align: center;
  font-family: 'Averia Serif Libre'; 
  -webkit-text-fill-color: rgb(0, 255, 140);
  text-shadow: rgb(0, 255, 140) 0px 0px 4px, rgb(0, 255, 140) 0px 0px 8px;
  color:rgb(0, 255, 140);
}

.timeline {
  position: relative;
  padding: 1rem;
  margin: 0 auto;
  max-width: 1300px;
}
.timeline:before {
  content: "";
  position: absolute;
  height: 100%;
  border: 1px solid hotpink;
  right: 40px;
  top: 0;
}
.timeline:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 700px) {
  .timeline {
    padding: 2rem;
  }
  .timeline:before {
    left: calc(50% - 1px);
    right: auto;
  }
}

.timeline__item {
  padding: 1rem;
  border: 2px solid hotpink;
  border-image: linear-gradient(to right, #f6e2b3 0%, hotpink 100%);
  border-image-slice: 1;
  position: relative;
  margin: 1rem 3rem 1rem 1rem;
  clear: both;
}
.timeline__item:after, .timeline__item:before {
  content: "";
  position: absolute;
}
.timeline__item:before {
  right: -10px;
  top: calc(50% - 5px);
  border-style: solid;
  border-color: hotpink hotpink transparent transparent;
  border-width: 10px;
  transform: rotate(45deg);
}
@media screen and (min-width: 700px) {
  .timeline__item {
    width: 44%;
    margin: 1rem;
  }
  .timeline__item:nth-of-type(2n) {
    float: right;
    margin: 1rem;
    border-image: linear-gradient(to right, hotpink 0%, #f6e2b3 100%);
    border-image-slice: 1;
  }
  .timeline__item:nth-of-type(2n):before {
    right: auto;
    left: -10px;
    border-color: transparent transparent hotpink hotpink;
  }
}

.timeline__item--year {
  text-align: center;
  max-width: 150px;
  margin: 0 48px 0 auto;
  font-size: 1.8rem;
  background-color: #333;
  line-height: 1;
  border-image: none;
  padding: 0.5rem 1rem 1rem;
}
.timeline__item--year:before {
  display: none;
}
@media screen and (min-width: 700px) {
  .timeline__item--year {
    text-align: center;
    margin: 0 auto;
  }
  .timeline__item--year:nth-of-type(2n) {
    float: none;
    margin: 0 auto;
    border-image: none;
  }
  .timeline__item--year:nth-of-type(2n):before {
    display: none;
  }
}

.timeline__title {
  margin: 0;
  font-family: 'Averia Serif Libre'; 
  color:rgb(0, 255, 140);
  -webkit-text-fill-color: rgb(0, 255, 140);
  text-shadow: rgb(0, 255, 140) 0px 0px 4px, rgb(0, 255, 140) 0px 0px 8px;
  font-size: 1.5em;
}

.timeline__blurb {
  line-height: 1.5;
  font-size: 1rem;
  margin: 0.5rem 0 0;
}







toggle { display:none; }
toggle:target { display:block; }




section {
}
section:nth-of-type(even) {
}

nav {
  mix-blend-mode: difference;
  z-index: 100;
}
nav ul {
  position: fixed;
  top: 60px;
  right: 40px;
  height: 100vh;
  visibility: hidden;
  pointer-events: none;
  list-style: none;
  width: 35px;
  transform: rotate(-12deg);
 width: 240px;
  text-align: end;
}
nav ul li {
  font-family: 'Averia Serif Libre'; 
  padding: 0.25em 0;
  -webkit-text-stroke-color: rgb(0, 255, 140);
  animation: anim 1s linear infinite alternate;
  -webkit-text-fill-color: rgb(0, 255, 140);
  text-shadow: rgb(0, 255, 140) 0px 0px 4px, rgb(0, 255, 140) 0px 0px 8px;
  /*-ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;*/
}

nav a {
  font-size:34px;
}

nav a:hover {
	text-decoration:none !important ;
	color: #ff006b;
	-webkit-text-stroke-color: rgb(255, 0, 107);
	animation: anim 1s linear infinite alternate;
	-webkit-text-fill-color: #ff006b;
	-webkit-text-stroke-width: 1px;
	text-shadow: rgb(255, 0, 107) 0px 0px 9px, rgb(255, 0, 107) 0px 0px 16px;
	opacity:1;
}


.toggle_link {
} /* trash? */


/*

@media and (max-width:480px)  {
	nav ul li {
  font-family: 'UnifrakturCook' !important; 
  padding: 0.25em 0;
font-size:200px;
  -webkit-text-stroke-color: rgb(0, 255, 140);
  animation: anim 1s linear infinite alternate;
  -webkit-text-fill-color: rgb(0, 255, 140);
  text-shadow: rgb(0, 255, 140) 0px 0px 4px, rgb(0, 255, 140) 0px 0px 8px;
  /*-ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;*/
	  /*
}
}

*/

nav.active ul {
  visibility: visible;
  pointer-events: initial;
  transition-delay: 0.1s;
}

.nav-icon {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  cursor: pointer;
  position: fixed;
  top: 15px;
  right: 15px;
transition: all 1s ease-out;
border: none !important;
}
.nav-icon span {
  position: absolute;
  top: 15px;
  display: block;
  height: 3px;
  height: 3px;
  right: 5px;
  	font-size:44px;
	font-weight:bold;
	color:#ff006b;
	text-decoration:none !important ;
	font-family: "UnifrakturCook";
	-webkit-text-stroke-color: rgb(0, 255, 140);
	animation: anim 1s linear infinite alternate;
	-webkit-text-fill-color: white;
	-webkit-text-stroke-width: 1px;
	text-shadow: rgb(255, 0, 0) 0px 0px 4px, rgb(0, 0, 255) 0px 0px 8px;
	background:
	linear-gradient(
	  to right,
	  rgba(100, 200, 200, 1),
	  rgba(100, 200, 200, 1)
	),
	linear-gradient(
	  to right,
	  rgba(255, 0, 0, 1),
	  rgba(255, 0, 180, 1),
	  rgba(0, 100, 200, 1)
	);
	background-position: 100% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background 400ms;
	-webkit-background-clip: text;
	opacity:0.3;
}

.nav-icon span:hover 
{
	opacity:1;	
}

/*
.nav-icon span:before, .nav-icon span:after {
  width: 100%;
  height: 3px;
  background: #fff;
  content: "";
  display: block;
  left: 0;
  position: absolute;
}
.nav-icon span:before {
  top: -8px;
}
.nav-icon span:after {
  bottom: -8px;
}*/

.active .nav-icon span {
  transform: rotate(90deg);
 transition: all 0.1s ease-in-out;
}


/* ICONS */


	 
	  
	  /* Rules for sizing the icon. */
.material-icons-round.md-18 { font-size: 18px; }
.material-icons-round.md-24 { font-size: 24px; }
.material-icons-round.md-36 { font-size: 36px; }
.material-icons-round.md-48 { font-size: 48px; }

.material-icons { color: hotpink; vertical-align: bottom;}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  vertical-align: bottom;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  color: hotpink; 
}

body.leashline
{
	text-align:center;
position: absolute;
top: 480px;
right: 0;
bottom: 0;
left: -5%;
height: 100%;
z-index: -1;
width:100%;
background: linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ), url(https://xrafstar.monster/stories/18footleash/images/cancer_krabat.gif),url(https://xrafstar.monster/stories/18footleash/constellations/cancer_overbite_slice.png) no-repeat center center;background-blend-mode: color-dodge;background-size:cover;background-attachment: fixed;

/* https://xrafstar.monster/stories/18footleash/constellations/cancer_overbite_slice.png*/
/*background: linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ), url(https://xrafstar.monster/stories/18footleash/constellations/cancer_puke_slice.png) no-repeat center center;background-size:cover;background-attachment: fixed;background-blend-mode: darken;*/
		
color:hotpink;
 display: flex;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
}


body.leash_sims
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
width:100%;background: linear-gradient(
          rgba(0, 0, 0, 0.2), 
          rgba(0, 0, 0, 0.2)
        ), url(https://xrafstar.monster/codex/games/images/abuse_bg_small.gif), url(https://xrafstar.monster/stories/18footleash/sims/knees.png) no-repeat center center;background-blend-mode: color-dodge;background-size:cover;background-attachment: fixed;
		
}

body.cancer_ref
{
position: absolute;
top: 480px;
right: 0;
bottom: 0;
left: -5%;
height: 100%;
z-index: -1;
width:100%;
background: linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ), url(https://xrafstar.monster/codex/games/images/abuse_bg_small.gif),url(https://xrafstar.monster/fanart/images/anon_cancer_bunny.jpg) no-repeat center center;background-blend-mode: color-dodge;background-size:cover;background-attachment: fixed;

/*background: linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ), url(https://xrafstar.monster/stories/18footleash/constellations/cancer_puke_slice.png) no-repeat center center;background-size:cover;background-attachment: fixed;background-blend-mode: darken;*/
		
color:hotpink;
 display: flex;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
}


body.cancer_ref_
{
position: absolute;
top: 100px;
right: 0;
bottom: 0;
left: -5%;
height: 100%;
z-index: -1;
width:100%;
background: linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ), url(https://xrafstar.monster/codex/games/images/abuse_bg_small.gif),url(https://xrafstar.monster/stories/xrafstar_killers/images/vich_bigbadbug.png) no-repeat center center;background-blend-mode: color-dodge;background-size:cover;background-attachment: fixed;

		
color:hotpink;
 display: flex;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
}



/* hierarchical */

.container {

  position: relative;
  display: block;
  width: 600px;
  margin-left:64px;
}

.pink_button
{
	
  margin-left:64px;
	  position: relative;
  margin-top: 0.25em;
  font-size:16px;
  padding: 0.1em 0.5em 0.2em;
  width:80px;
  background: black;
  cursor: crosshair;
  border: 2px solid hotpink;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  border-radius:10px;
  
      display: flex;
    align-items: center;
    text-decoration: none;
	height:24px;
}

.pink_button::before {
    content: 'RUN';
    overflow: hidden;
    width: 0px;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    margin-right: 0px;
    white-space: nowrap;
}

.pink_button:hover::before {
    width:50px;    transition: all 0.3s ease;
}

.pink_button_2
{
	
	float:left;
  margin-left:64px;
	  position: relative;
  margin-top: 0.25em;
  font-size:16px;
  padding: 0.1em 0.5em 0.2em;
  width:80px;
  background: black;
  cursor: crosshair;
  border: 2px solid hotpink;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  border-radius:10px;
  
      display: flex;
    align-items: center;
    text-decoration: none;
	height:24px;
}

.pink_button_2::before {
    content: 'RESET';
    overflow: hidden;
    width: 0px;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    margin-right:0px;
    white-space: nowrap;
}

.pink_button_2:hover::before {
    width:50px;    transition: all 0.3s ease;
}
/*
.pink_button:hover
{filter: drop-shadow(0 0 0.25rem crimson);}*/
 

/*width: 200px;
	height:16px;*/

 
 /*filter: drop-shadow(0 0 30px black);*/
 
details {

  width: auto;
  height: auto;
  max-height: 2.5em !important;
  transition: all 0.1s ease;
  
}
details ::-webkit-details-marker {
  display: none;
}
details > summary {
  position: relative;
  margin-top: 0.25em;
  padding: 0.1em 0.5em 0.2em;
  background: black;
  cursor: crosshair;
   border: 2px solid hotpink;
       animation: sweepin .5s ease-in-out;
}

 .spinny
 {
	 -webkit-animation: in 1s;
 }
 
 
.spinny:hover
 {
 transition: all 0.8s ease;box-shadow: inset 32px 1000px 30px black;-webkit-animation: out 1s;
 }
 
  @-webkit-keyframes in {
    from   { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg);}
}

@-webkit-keyframes out {
    0%   { -webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(0deg); }
}
 
 /* shadow drops and rises */
 
 .darken
 {
 }
 
 
.darken:hover
 {
 transition: all 0.8s ease;box-shadow: inset 32px 1000px 30px black;
 }
 


details > summary:hover
{
transition: all 0.1s ease;background-image: linear-gradient(hotpink, #ff5089);color:black;
}

details[open] > summary:hover
{
transition: all 0.1s ease;border: 2px solid black;
}



details > summary:before {
  content: "➕";
  color: black;
  font-size: 0.5em;
  margin-right: 0.5em;
  
}
details[open] > summary {
  background-image: linear-gradient(hotpink, #ff5089);
  color: black;
   border: 2px solid none solid solid;
   /*border-color:black;*/
 
}
details[open] > summary:before {
  content: "➖";
  color: #ccc;
}

.folder {
  margin: 0 0 0em 0.86em;
  padding: 0.5em 0em 0.5em 3.5em;
 /* border-left: 0.1em #ccc dotted;
  border-bottom: 0.1em #ccc dotted;*/
}
.folder p {
  margin: 0;
 border: 2px solid hotpink;
 background:black;
    animation: sweepin .5s ease-in-out;
	opacity:1;
	text-align:left;
	padding:14px;
}



/*
#scout.folder
{
	   background: black url(https://xrafstar.monster/stories/18footleash/images/krabat_cancer.png) no-repeat center center;background-size:cover;background-attachment: fixed;	
}*/

details[open] {
  height: auto;
  max-height: 99em !important;
   transition: all 1.2s ease;
	
  /*animation: sweepin .5s ease-in-out;*/
  
}


details[open] #fever {
  height: auto;
  max-height: 99em !important;
  transition: all 1.1s ease;
  
   background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1)),url(https://xrafstar.monster/fanart/images/deadboycourt_fallen.png) no-repeat center center;background-size:cover;	background-origin:border-box;
}


{     content: '';     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;   
;background-blend-mode: color-dodge;background-size:cover;background-attachment: scroll;font-size:10px;}

details[open] #scout {
  height: auto;
  max-height: 99em !important;
  transition: all 1.1s ease;
  
   background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1)),url(https://xrafstar.monster/fanart/images/vich_cancermagika.png) no-repeat center center;background-size:cover;	background-origin:border-box;
}

details[open] #junkie {
  height: auto;
  max-height: 99em !important;
  transition: all 1.1s ease;
background: linear-gradient(
rgba(0, 0, 0, 0.7), 
rgba(0, 0, 0, 0.7)
), url(https://xrafstar.monster/codex/games/images/abuse_bg_small.gif),url(https://xrafstar.monster/stories/18footleash/images/mounting_sheen_slice.png) no-repeat center center;background-blend-mode: color-dodge;background-size:cover;background-attachment: scroll;
}

details[open] #persona {
  height: auto;
  max-height: 99em !important;
  transition: all 1.1s ease;
   background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1)), url(https://xrafstar.monster/stories/xrafstar_killers/images/vich_bigbadbug.png) no-repeat center center;background-size:cover;background-origin:border-box;
}

details[open] #fashion {
  height: auto;
  max-height: 99em !important;
  transition: all 1.1s ease;
  
     background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1)), url(https://xrafstar.monster/stories/18footleash/images/sims1.png) no-repeat center center;background-size:cover;background-origin:border-box;
	 
}


details[open] #connections {
  height: auto;
  max-height: 99em !important;
  transition: all 1.1s ease;
  
     background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1)), url(https://xrafstar.monster/stories/xrafstar_killers/images/xrafstarkillers.png) no-repeat center center;background-size:cover;background-origin:border-box;
	 
}

/*
.folder #scout{
	   background: black url(https://xrafstar.monster/stories/18footleash/images/krabat_cancer.png) no-repeat center center;background-size:cover;background-attachment: fixed;	
} */




details.close {
  animation: sweepout .5s ease-in-out;
}



details:not([open]) .folder {
  height: 0px !important;
}



@keyframes sweepin {
  0% {
    opacity: 0;
    margin-left: -10px
  }
  100% {
    opacity: 1;
    margin-left: 0px
  }
}

@keyframes sweepout {
  0% {
    opacity: 1;
    margin-left: 0px
  }
  100% {
    opacity: 0;
    margin-left: -10px
  }
}

@keyframes sweepin_opacity {
  0% {
    opacity: 0;
    margin-left: -10px
  }
  100% {
    opacity: 1;
    margin-left: 0px
  }
}

@keyframes sweepout_opacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


::marker{ display:none; } summary{ list-style: none }


https://xrafstar.monster/pics/adult_acne_princess.png


	
	.masking::before {     content: '';     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;    backdrop-filter: blur(22px);}
	
	
.bg_fly::before {     content: '';     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;
background: linear-gradient(
rgba(0, 0, 0, 0.7), 
rgba(0, 0, 0, 0.7)
), url(https://xrafstar.monster/pics/adult_acne_princess.png),url(https://xrafstar.monster/stories/18footleash/constellations/cancer_overbite_slice.png) no-repeat center center;background-blend-mode: screen;background-size:cover;background-attachment: scroll;
    font-size:10px;}
	
	/*.bg_fly::before {     content: '';     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;        background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1)), url('https://xrafstar.monster/stories/18footleash/images/cancer_krabat.gif');
    background-size: cover;font-size:10px;}*/

   
   
.bg_puke::before {     content: '';     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;        background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.7)), url(https://xrafstar.monster/stories/18footleash/images/id_slice.jpg);
    background-size: cover;font-size:10px;background-color:black}
	
.bg_fever::before {     content: '';     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;   
background: linear-gradient(
rgba(0, 0, 0, 0.7), 
rgba(0, 0, 0, 0.7)
), url(https://xrafstar.monster/codex/games/images/abuse_bg_small.gif),url(https://xrafstar.monster/fanart/images/deadboycourt_fallen.png) no-repeat center center;background-blend-mode: color-dodge;background-size:cover;background-attachment: scroll;font-size:10px;}
	
	
.bg_cancer_tableaux::before {     content: '';     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;
background: linear-gradient(
rgba(0, 0, 0, 0.7), 
rgba(0, 0, 0, 0.7)
), url(https://xrafstar.monster/codex/games/images/abuse_bg_small.gif),url(https://xrafstar.monster/stories/18footleash/images/id_slice.jpg) no-repeat center center;background-blend-mode: color-dodge;background-size:cover;background-attachment: scroll;
    font-size:10px;}
	
.bg_cancer_sims::before {     content: '';     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;        	background: linear-gradient(
rgba(0, 0, 0, 0.7), 
rgba(0, 0, 0, 0.7)
), url(https://xrafstar.monster/codex/games/images/abuse_bg_small.gif),url(https://xrafstar.monster/fanart/images/vich_cancermagika.png) no-repeat center center;background-blend-mode: color-dodge;background-size:cover;background-attachment: scroll;
    font-size:10px;}
	
.bg_cancer_connections::before {     content: '';     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;        	background: linear-gradient(
rgba(0, 0, 0, 0.7), 
rgba(0, 0, 0, 0.7)
), url(https://xrafstar.monster/codex/games/images/abuse_bg_small.gif),url(https://xrafstar.monster/stories/xrafstar_killers/images/strat_guide.png) no-repeat center center;background-blend-mode: color-dodge;background-size:cover;background-attachment: scroll;
    font-size:10px;}
	
.bg_suitcase::before {     content: '';     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;   
background: linear-gradient(
rgba(0, 0, 0, 0.7), 
rgba(0, 0, 0, 0.7)
), url(https://xrafstar.monster/codex/games/images/abuse_bg_small.gif),url(https://xrafstar.monster/fanart/images/deadboycourt_fallen.png) no-repeat center center;background-blend-mode: color-dodge;background-size:cover;background-attachment: scroll;font-size:10px;}
	


.blur   {
    filter: invert(80%);
    -webkit-filter: invert(80%);
    -moz-filter: invert(80%);
    -o-filter: invert(80%);
    -ms-filter: invert(80%);
}


.noblur   {
	filter: invert(80%);
}









.myImg {
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.myImg:hover {opacity: 0.9;}

.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.9); 
}

.modal-content {
  margin: auto;
  display: block;
  width: 50%;
  max-width: 800px;
  align-content: center;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.modal-content, #caption {  
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}