body {background-position:center;background-image:url(https://fondness.neocities.org/fanfic_2/patternbycocorini.png);background-attachment:fixed;scroll-behavior: smooth; }
body, a, a:active {cursor: url(https://fondness.neocities.org/fanfic_2/cursorbywhimsical.gif), auto;	scroll-behavior: smooth;}



::-moz-selection { /* Code for Firefox */
   text-shadow: 1px 1px 2px #9c99c6;
   color:#9fa1b5;
  background: white;
}

::selection {
  text-shadow: 1px 1px 2px #9c99c6;
  color:#9fa1b5;
  background: white;
}

#container1 {margin:auto;
max-width:100vw;min-height:100vh;}

.container2 {;margin:auto;width:80vw;max-width:95vw;height:100%;margin-bottom:80px;}

.header {margin:auto;margin-top:2%;text-align:center}

.header .pic {margin:auto;background:transparent;margin-bottom:15px;width:110px;height:110px;border:2px solid white;border-radius:100%;-webkit-box-shadow: 2px 2px 25px 2px rgba(201,217,240,0.75);
-moz-box-shadow: 2px 2px 25px 2px rgba(201,217,240,0.75);
box-shadow: 2px 2px 25px 2px rgba(201,217,240,0.75);;}
.header .pic img {width:110px;height:110;border-radius:100%;border:1px dashed #82b4d6}
.header h1 {margin:0;font-family:'Sacramento';font-size:2.7em;color:#5883A3;text-shadow:1px 2px rgba(212, 214, 216,0.5);font-weight:normal;}
.header i {color:#ED7173;font-size:0.6em;}
.header .description {text-align:center;font-family:'Sono';color:#8B9DAB;text-shadow:1px 2px 2px rgba(212, 214, 216,0.7);font-size:0.75em}
.header .description a {border-bottom: 1px dotted #82b4d6;color:#8B9DAB}
.header .description a:hover {transition:.5s;color:#82b4d6}



#content {max-width:99%;margin-left:15%;margin-top:10px;}

#footer {position:fixed; width:100%;bottom:0;height:45px;background:white;border-top:2px solid #bde5b5;text-align:center;z-index:2}
#footer .links li {list-style:none;display:inline-block;margin-top:7px;margin-bottom:5px;font-size:1.69em;margin-left:19px;margin-right:19px;}
#footer .links li a {text-decoration:none;}
#footer .links li:nth-child(1) a {color:#E0514A}
#footer .links li:nth-child(2) a {color:#F4DD67}
#footer .links li:nth-child(3) a {color:#85DB9B}
#footer .links li:nth-child(4) a{color:#6ECBE5}

#footer a:hover {transition:1s all;opacity:0.5}

#pic {z-index:2;bottom:-10px;left:3px;position:fixed;}
#pic img {max-width:325px}





/* basic grid setup */
.grid {
  display:inline-block;
  margin-top:25px;

}


.entry {
  padding: 0.5em;
  
}


.entry {display:inline-block;
  border-radius: 0;
  background-color: white;
  box-shadow:3px 2px 2px 0px rgba(212, 214, 216,0.5);
  
}

.entry {
  margin: auto;
  line-height: 110%;
  padding:10px;
  background-color:#c0d6ed;
    
    width: 100%;
	-webkit-transition:1s ease all;
    max-width:330px;
 margin:5px;
}

.entry b, strong {color:#c09ce2;font-size:inherit;font-family:'ABeeZee'}

.entry i, em {color:#a0dbbe;font-size:1.1em;font-family:'Farsan';}

.entry blockquote a {color:#edadd3;text-decoration:none;transition:0.5s;font-family:'Habibi'}
.entry blockquote a:hover {border-bottom:1px dotted #e585be;color:#fcdbef}

.entrycontent {background:white;width:310px;
  ;padding:5px;border:5px solid white;}

.entry .title {
font-family:'Urbanist', helvetica, sans-serif;
font-weight:300;
letter-spacing:0.05em;
font-size:1em;
line-height:1.10em;
max-width:80%;
text-align:center;
margin-top:auto;
margin-left:auto;
margin-right:auto;
margin-bottom:5px;
text-transform:uppercase;
color:#677899;

}

.entry .title a {text-decoration:none;color:#677899;transition:0.5s;border-bottom:0px}
.entry .title a:hover {color:#a0b3d8;text-shadow: -1px 0px 5px #a0b3d8;}
.entry .title .fav {float:right;font-size:1.2em;margin-right:-32px;margin-top:-3px;}
.entry .title .fav i {color:#edd265}

.entry .title .info {font-family:Mulish;
font-size:0.75em;letter-spacing:0px;line-height:100%;
text-transform:lowercase;margin:3px;margin-top:-1px;
color:#a9b7d1}



.entry .title .info li
{list-style:none;display:inline;}

.entry .title .info li:after {
 content:' ∙ '; 
}

.entry .title .info li:last-child:after {
  content:'';}
  

.entry .title .by {
  text-transform:lowercase;
  font-family:'Sono', 'Times New Roman', serif;
  font-size:0.7em;
  line-height:0.7em;
  margin-top:2px;
  margin-bottom:7px;
  font-weight:normal;
  font-style:italic;
  color:#6a80ab;letter-spacing:1px;}
  
.entry .title .by:before {
  content:'by ';
}

.entry .summary {
  padding:3%;
  padding-top:2%;
  margin-left:9%;
  margin-right:9%;
  margin-top:0%;
  margin-bottom:3%;
  font-family:'Fredoka';
  color:#6b6b75;
  border-left:1px dashed #85c2d1;
  border-top:1px dashed #85c2d1;
  letter-spacing:1px;
  font-size:0.75em;
  text-align:left;
  
  
  }
  


.wrap {margin-bottom:15px;margin-top:15px;margin-left:5px;margin-right:5px;}

.wrap .tag {height:0;opacity:0;transition: 0.4s all;text-align:center;color:#42485e;font-family:'Urbanist';font-size:0.75em;margin-top:5px;}
.wrap:hover .tag {height:auto;opacity:1;}

.wrap .tag li {list-style:none;display:inline;padding:3px;margin:10px;background-color:white}

.wrap .tag li::before {content: '#' }

.wrap .tag li:nth-child(1) {border-bottom:2px solid #ef9797}
.wrap .tag li:nth-child(2) {border-bottom:2px solid #f2bc91}
.wrap .tag li:nth-child(3) {border-bottom:2px solid #f4d073}
.wrap .tag li:nth-child(4) {border-bottom:2px solid #a1e2a1}


.entry .comment {margin-left:9%;text-align:left;
  margin-right:9%;
  margin-top:3%;
  margin-bottom:3%;
  font-family:'Urbanist';text-transform:uppercase;font-size:0.9em;color:#677899;letter-spacing:1px;text-align:left}
  
.entry .comment blockquote {font-size:0.85em;font-family:'Fredoka';text-transform:none;font-style:none;margin:0;margin-top:3%;margin-left:3%;;color:#6b6b75;border-right:1px dashed #85c2d1;border-bottom:1px dashed #85c2d1;padding:2%;letter-spacing:1px;}


@media screen and (max-width: 1000px) {
  
  #pic {display:none}
  glenplayer02 {display:none}
  
 #container1 {
   margin: auto auto auto auto;
width:100vw;  
  
}

 .container2 {
   margin: auto auto auto auto;
max-width:100%;
  
}

.entry {height:auto;margin:auto;}
.wrap .tag {height:auto;opacity:1}
.entrycontent {margin:auto;}

.ggrid {grid-gap: 1.5em;
  grid-template-columns: repeat(1, 1fr);
  
}
.simplebar-scrollbar::before {display:none}
  
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(174, 174, 229, 0.5);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 999999;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 25px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h1 {
  margin-top: 0;
  font-size:2.7em;color:#5883A3;text-shadow:1px 2px rgba(212, 214, 216,0.5);font-weight:normal;
  font-family: 'Sacramento', Arial, sans-serif;
}
.popup h1 i {color:#f7de62;font-size:0.8em }
.popup h2 {margin-top: 0;margin-bottom:0;
  font-size:2.2em;color:#5883A3;text-shadow:1px 2px rgba(212, 214, 216,0.5);font-weight:normal;
  font-family: 'Sacramento', Arial, sans-serif;}
.popup .close {
  position: absolute;
  top: 10px;
  right: 30px;
  transition: all 200ms;
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
  color: #6ca0cc;
}
.popup .close:hover {
  color: #bfdbf2;
}
.popup .content {
  margin-top:-35px;
  max-height: 30%;
  overflow: auto;
  font-family:'Sono';
  width:90%;
  font-size:0.85em;
  color:#798daa;text-shadow:1px 2px 2px rgba(212, 214, 216,0.7)
}

.popup .content li {list-style-type: circle;margin-bottom:5px;margin-top:5px;line-height:1.3em;}
.popup .content li a {text-decoration:none;border-bottom:1px dotted #2d2668;color:#798daa}
.popup .content li a:hover {transition:0.3s all;color:#5d5a72}

#popup2 li {list-style:none;display:inline-block;}
#popup2 li a {font-family:'ABeeZee';background:#f2e6ff;color:#7c7fa3;border-radius:5px;margin:3px;padding:2px;border:2px solid #e888b6;font-size:0.89em;}

@media screen and (max-width: 700px){
  #content {margin:auto}
  .popup{
    width: 70%;
  }
  
  .content {width:100%}
}