:root{
    
    --Main-font:'Open Sans';
    --Sub-font:'PT Sans';
    --Bold-font:'Nunito';
    --Title-font:'Pacifico';
    --Summary-font:'Source Serif Pro';
    --Tags-font:'Source Code Pro';
    --Info-font:'Merriweather';
    
}

@media only screen and (max-width: 700px) {  
#desc {display:none}

#glenplayer02 {display:none!important}
body {background-attachment:scroll;}

#sidebar {width:50%;display:none;
position:fixed;z-index:999999;
min-height:100%;margin-top:0;margin-left:0;box-shadow:rgba(0,0,0,0.2) 3px 3px 3px;font-size:11px;
}

#sidebar .cutie img {margin-top:5px;margin-bottom:15px;}
#sidebar .cutie1 img {display:none}

.link4{
display:block;
}
}

@media only screen and (max-width: 500px) {  
  
   #content {width:90vw;}
  
  .entry {width:75vw;margin:0 12px 10vw 5vw;}

  
}

@media only screen and (min-width: 501px) and (max-width: 700px) {  
  
 #content {width:90vw}
  
  .entry {width:35vw;margin:0 12px 7vw 5vw;}
  
}

@media only screen and (min-width: 701px)  {
  
  #triangle {margin:auto;margin-top:-25px;border-color:  transparent transparent #b2d9dd  transparent;border-style: solid;border-width: 0 10px 20px 10px;height: 0px;width: 0px;position:fixed;display:inline-block;text-align:center;margin-left:-10px;
}

#triangle2 {margin:auto;margin-top:-23px;border-color:  transparent transparent #fff  transparent;border-style: solid;border-width: 0 10px 20px 10px;height: 0px;width: 0px;position:fixed;display:inline-block;text-align:center;;margin-left:-10px;}

#desc {text-align:center;color:#a289c4;line-height:150%;margin-bottom:-10px;}
#desc span {display:inline-block;font-size:7px;padding-left:3px;padding-right:3px;transition:0.15s;}

.boxcontent {display:none;height:158px;margin-top:8px;}
.simplebar-scrollbar::before {
  width:3px;border-radius:10px;
  transition:0.25s all;
  background-color:#d4bae0;margin-left:2px;
}

.sub .link1 {margin-left:39px!important;}

  
  #content {width:calc(100% - 420px);}
  
  .entry {width:230px;margin:0px 12px 25px 12px;}
  

  
  body {background-attachment:fixed!important;}
  
 .back {display:none;}


#sidebar {display:block;z-index:3;position:fixed; top:275px;left:4.5%;width:115px;border-radius:5px;box-shadow:rgba(0,0,0,0.1) 1px 2px 3px;10px;font-size:10px;}
.sidebar2 {position:fixed;top:170px!important;transition:all 0.5s;
}



#sidebar .cutie img {margin-top:-100px;padding:2px;background:#fcfae3;box-shadow:1px 1px 2px rgba(0,0,0,0.1);border:1px solid #cec4ed;transition:.75s}
#sidebar .cutie2 img:hover {opacity:0;box-shadow:none}


.link4{
display:none;
}

}



.tooltip {text-transform:lowercase;
	display:none;
	position:absolute;
	background-color:rgba(44,32,32,.9);
	border:2px double white;
	padding:5px;
	margin: -5px 0px auto 0px;
	color:#fff;
	font-size:9.5px;
	font-family:var(--Summary-font);
	letter-spacing:1px;
	z-index:9999999999;
}







body, a, a:hover { cursor:url(/fanfic/cursor.gif), auto }

body {background: url(/fanfic/background.gif)  center repeat;
background-position:fixed;
    margin:0;
    padding:0;
    text-align:center;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;letter-spacing:1px;
    font-family:var(--Main-font);
    line-height:125%;
    font-size:11px;
    color:#3d2a2a;
    text-align:center;
    
}





  /*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
   position:fixed;
   bottom:15px;
   margin-left:20px;
   display:flex;
   z-index:99;
   transition:.5s;
   opacity:1;
}

#glenplayer02:hover {width:auto;}

#glenplayer02 a {text-decoration:none;}

#glenplayer02 > div {
   align-self:center;
   -webkit-align-self:center;
}

.music-controls {
   user-select:none;
   -webkit-user-select:none;
   width:13px;
   font-size:13px;
   cursor:inherit;
}

.playy, .pausee {color:#3d2a2a;} /* color of play & pause buttons */

.pausee {display:none;}

.sonata {
   margin-left:10px;
   color:#3d2a2a; /* color of music note symbol */
}

.labeltext {
   margin-left:8px;
   font-family:var(--Tags-font);
   font-size:9px;
   color:#3d2a2a; /* color of song title */
} 

#header {width:100%;height:auto;
background:#fff;
text-align:left;border-bottom:0px double #f7c9e9;
top:0;
}



#header .container {

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
#header .title {margin-left:4%;margin-bottom:25px;}	

#header .title h1 {font-family:var(--Title-font);
text-transform:lowercase;text-shadow:-2px 1px 2px rgb(0,0,0,.05) ;
font-size:35px;line-height: 100%;color:#f48cba;letter-spacing:0px;}
#header .byline {font-family:var(--Sub-font);font-style:none;font-size:10px;text-transform:uppercase;letter-spacing:2px;margin-top:-23px;margin-left:12px;z-index:2;color:#7aa553;}
#header .title h1 span {animation: myAnim 3s ease 0s infinite normal forwards;}
#header .byline:before {content:'« '}
#header .byline:after {content:' »'}
#header .byline a {color:#db8abd; text-decoration:underline}

@keyframes myAnim {
  0% {
    animation-timing-function: ease-out;
    transform: scale(1);
    transform-origin: center center;
    
  }

  10% {
    animation-timing-function: ease-in;
    transform: scale(0.91);
    
  }

  17% {
    animation-timing-function: ease-out;
    transform: scale(0.98);
    
  }

  33% {
    animation-timing-function: ease-in;
    transform: scale(0.87);
    
  }

  45% {
    animation-timing-function: ease-out;
    transform: scale(1);
    
  }
}



#sidebar {background-color:#fff;padding:5px;padding-bottom:12px;font-family:var(--Bold-font);border:1px solid #b2d9dd;font-weight:bold;}


#sidebar .cutie img {width:60px;height:60px;border-radius:100%;}


.back {margin:10px;width:12px;font-size:12px;padding:5px;border-radius:100%;color:#cab6ed;border:1px solid #cab6ed;transition: all 0.5s ease;}
.back:hover {opacity:0.5}


.sub {font-size:15px;z-index:2;margin:-8px auto 0px auto;width:100%;}
.sub a {text-align:center;display:inline-block;padding:5px;padding-top:0px;transition: all 0.5s ease;color:white;margin:0 12px 0px 12px;;} 
.sub .link1 {background-color:#ef6f6f;padding:5px;border-radius:100%;border:2px solid white;}
.sub .link2 {background-color:#6fefb7;padding:5px;border-radius:100%;border:2px solid white;}
.sub .link3 {background-color:#efde6f;padding:5px;border-radius:100%;border:2px solid white;}
.sub .link4 {background-color:#6ee7ef;padding:5px;border-radius:100%;border:2px solid white;}
.sub .link1, .link2, .link3, .link4 {cursor:crosshair;}
.sub2 {position:fixed;width:100%;
 top:0;background:#fff;padding-top:13px;padding-bottom:0px;transition:all 0.5s ease;
}

.sub2 .link1 {background-color:white!important;color:#ef6f6f!important;border-radius:0px;}
.sub2 .link1:hover {box-shadow: #ef6f6f 0px 2px;transition:all 0.5s ;}
.sub2 .link2 {background-color:white!important;color:#6fefb7!important;border-radius:0px;}
.sub2 .link2:hover {box-shadow: #6fefb7 0px 2px;transition:all 0.5s ;}
.sub2 .link3 {background-color:white!important;color:#efde6f!important;border-radius:0px;}
.sub2 .link3:hover {box-shadow: #efde6f 0px 2px;transition:all 0.5s ;}
.sub2 .link4 {background-color:white!important;color:#6ee7ef!important;border-radius:0px;}
.sub2 .link4:hover {box-shadow: #6ee7ef 0px 2px;transition:all 0.5s ;}

#sidebar ul {display:block; text-align:left;list-style:none;font-family:var(--Sub-font);font-weight:normal;padding:5px;padding-top:0px;padding-bottom:0;margin:0;margin-top:-5px; text-transform:lowercase;font-size:inherit;}


#sidebar li {display:block;
  list-style:none;}
  
#sidebar li a {text-decoration:none;color:inherit;transition: all 0.25s ease;}
#sidebar li a::before {content:'\ebc6';font-family:'honeybee';margin-right:5px;margin-bottom:2px;font-size:8px;color:#9a89cb;}
#sidebar li a:hover {color:#75b3ca; margin-left:7px;}
#sidebar .istimewa li a::before {content:'*';margin-left:3px;margin-bottom:2px;margin-right:6px;margin-bottom:2px;font-size:8px;color:#ef6c6c;}
#sidebar .istimewa .selected::before {content:'*'!important;margin-left:3px;margin-bottom:2px;margin-right:6px;margin-bottom:2px;font-size:8px;color:#ef6c6c;}
#sidebar .istimewa li a {color:#ef6c6c;}
#sidebar .istimewa .selected {color:#3d2a2a;}
#sidebar .istimewa li a:hover {color:#ef6c6c;margin-left:0!important;}




#sidebar .boxdesc {color:#514747;padding:5px;padding-top:0;padding-bottom:0;text-align:justify;line-height:110%;font-family:var(--Sub-font);font-weight:normal;}
#sidebar .boxdesc i {color:#e58585 ;font-style:normal;}



.selected:hover {margin-left:0!important;color:#3d2a2a!important;}

.selected::before {content:'\ec8b'!important;color:#dda8c2!important;
font-family:'honeybee';font-style:normal;margin-right:4px;margin-bottom:2px;font-size:8px;}
.selected {color:#75b3ca}





#links {}
#links a {
  
}

#content {color:#ffd870;text-align:center;margin:35px auto 0px auto;font-style:none;height:100%;padding:5px;padding-bottom:50px;}
.entry {text-align:left;background-color:#fff;color:#3d2a2a;border:1px solid #b6ddb2;padding:6px;font-size:10px;
transition: all 0.25s ease;box-shadow:rgba(0,0,0,0.2) 3px 3px 3px;float:left;
}
#content ul, li {list-style:none;}
.entry:hover {border:1px dotted #b6ddb2;}
.entry .title {text-transform:uppercase;font-weight:bold;font-family:var(--Bold-font);}
.entry .title a {color:#3d2a2a;text-decoration:none;transition: 0.25s;transition-delay:0.15s;}
.entry .title a::after {}
    

.entry .title a:hover {box-shadow: inset 0px -5px #aeefb5;text-decoration:none;}
.entry .by {text-transform:lowercase;font-style:italic;color:#e892ba;}
.entry .by:before {content:'by '}
.entry .info {color:#4c5863;}
.entry .summary {text-transform:uppercase;margin-top:0px;}
.entry .summary:before {content:'words: ';font-weight:light;color:#9c82be;font-family:var(--Info-font);font-size:9px}
.entry .summary blockquote {font-size:9.5px;text-transform:none;border-left:2px solid #f5dea5;padding: 5px 5px;margin-left:7px;font-family:var(--Summary-font);color:#322828;width:90%;}
.entry .comments {color:#3d2a2a;text-align:left;margin-top:5px;}
.entry .comments:before {content:'comments: ';font-weight:light;color:#87aae4;font-family:var(--Info-font);font-size:9px;text-transform:uppercase;}
.entry .summary a, .entry .comments a {box-shadow: inset 0px -2px #aeefb5;text-decoration:none;color:inherit;transition: 0.25s;}
.entry .summary a:hover, .entry .comments a:hover {color: #92e89a;}
.entry .tags {margin-top:6px;margin-left:-6px;margin-right:-6px;margin-bottom:-6px;background-color:#ffefc8;text-transform:uppercase;font-family:var(--Tags-font);padding:6px;border:1px solid #ffefc8;letter-spacing:0.5px}
.entry .tags:before {content:'tags: '}
.entry .tags li {list-style:none;display:inline-block;margin:0px;padding: 3px;padding-bottom:2px; padding-left:0px; padding-top:2px;margin-left:2px;color:#4c9158 ;}






body a{}
body a:hover{}








::-moz-selection {background:#c7ebfc;color:#7b8c9a;text-shadow:0px 1px #eee  ;
    
}

::selection {background:#c7ebfc;color:#7b8c9a;text-shadow:1px 1 px #eee  ;
  
}

#pop {
    width:100%;
    height:100%;
    top:0;left:0;
    position:fixed;
    z-index:999;
    background:rgba(255,255,255,.85); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.)  */
    display:none;
}


.fade {
    top:0;
    left:0;
    position:fixed;
    z-index:1000;
    width:100%;
    height:100%;
}

.popup {
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position:fixed;
    background:#fff; /* background of popup box */
    background-image: url("");
    z-index:10000;
    width:75vw;
    max-width:350px; /* width of popup */
    border: 1px solid #F7C5D5; /* popup border */
    padding: 20px;
    font-size: 11px;
    text-align:left;
     font-family:var(--Tags-font);
     color:#9a89cb;
     
}

.popup a {text-transform:uppercase;color:#75b3ca;text-decoration:none;}

.popup li {line-height:150%;list-style-type:none;margin-left:5px;}
.popup li:before {content:'\ea55';font-family:'Honeybee';color:#ef99b0;font-size:8px;margin-right:5px;}


.popup h1 {font-family:var(--Title-font);color:#e5b6ed;letter-spacing:0px;}


.close {float:right;transition: all 0.5s ease}
.close span {float:right;
     margin: -10px -10px 0px 0px;width:12px;font-size:12px;padding:5px;border-radius:100%;color:#cab6ed;border:1px solid #cab6ed;transition: all 0.5s ease;}
.close:hover {opacity:0.5}



</style>