/*TOC*/
.toc {
background-color:white;
float:left;
padding: 10px;
position: sticky;
top: 0px;

}

.toc li {
margin-bottom:3px;
list-style-type:square;

}


.toc ul {
text-decoration: none;
}

.toc a:link{
  color: #ff0069;
text-decoration: none;
font-weight: 700;
}

.toc a:hover {
  color: #ff9200;
  text-decoration: underline;
}

.toc h3 {
	text-align:center;
	color:#ff9200
}

/**/

.fanfictoc {
background-color:white;
float:left;
padding: 10px;
position: sticky;
top: 0px;
max-height: 90vh;
overflow-y: auto;
}

.fanfictoc li {
margin-bottom:2px;
list-style-type:square;
margin-left:3px;
}

.fanfictoc ul {
text-decoration: none;
width: 300px;
display: inline-block;
  flex-direction: column;
  flex-wrap: wrap;
  column-count: 2;
}


/*TOC 2*/
#toc2 {
            position: fixed;
            top: 0;
            left: 0;
            width: 250px;
            height: 100%;
            overflow-y: auto;
            background-color: white;
            padding: 20px;
            box-sizing: border-box;
        }

        #toc2 h4 {
            margin-top: 0;
			color:#00C806;
			font-size: 15px;
			padding-top: 10px;

        }

        #toc2 ul {
            list-style: none;
            padding-left: 0;
        }

        #toc2 ul li {
            margin-bottom: 5px;
        }

        #toc2 ul li a {
            text-decoration: none;
            color:#ff0069 ;
        }

        #toc2 ul li a:hover {
            color: #ff9200;
  text-decoration: none;
        }
		
		
/*DIRECTORY*/
.direct {
	margin-left: 400px;
	margin-right: auto;
	margin-bottom: 100px;
	margin-top: 35px;
	max-width: 600px;
	font-size: 13px;
	background-color: white;
	padding: 20px;
	padding-bottom: 50px;
	min-height: 400px;
	
	}
	

/*GENDIRECT IS FOR GENERATOR PAGES DONT DELETE*/	
.gendirect {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	margin-top: 40px;
	max-width: 600px;
	font-size: 13px;
	background-color: white;
	padding: 20px;
	padding-bottom: 50px;
	border-radius: 8px;
	}

.fandom {
	font-size: 18px;
	font-weight:bold;
	color:#ff9200;
	margin-top:40px;
}

.fandomlink a:link{
  color: #ff9200; 
text-decoration: none;
font-weight: 700;
}

.fandomlink a:visited  {
color: #ff9200; 
text-decoration: none;
font-weight: 700;
}

.subfandom {
	font-size: 15.5px;
	font-weight:bold;
	color:#00C806;
	margin-top:40px;
}

.subhr {
	border-color:  #A5FF9F;
	border-style: solid;
	max-width: 800px;

}

body {
	font-family:arial;
	font-size: 14px;
background: #FF0069
}


h2 {text-align:center;
color:#ff0069;
padding-top: 20px;
}

h1 {
	color: #ff0069;
	text-align:center;}
	
h3 {color:#ff0069;
text-align: center;}
	
p  {
	margin-bottom: 12px;
	margin-top: 12px
	}
		

hr {
	border-color:  #fff09f;
	border-style: solid;
	max-width: 800px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #A5FF9F; 
}
 
::-webkit-scrollbar-thumb {
   background: #00C806; 

  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00C806; 
}

.atextarea {
	margin-left: 100px;
	margin-right:100px;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  border: 2px solid #FF0069;
  border-radius: 8px;
  background-color: #FFE5E5;
  font-size: 16px;
  resize: none;
  outline: none;
  font-family: arial;
  margin: auto;
}



a:link, a:visited {
  color: #ff0069;
text-decoration: none;
font-weight: 700;
}

a:hover {
  color: #ff9200;
  text-decoration: none;
}

.direct li {
	list-style-type:square;
}

/*GENERATOR STUFF WOOOOOOOOOO*/

.genbutton {
  background-color: #ff0069; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  outline: none;
  border-radius: 8px;
  font-weight:bold
}

.genbutton:hover {background-color: #ff9200}

.genbutton:active {
border:none
}

.mgenbutton {
  background-color: #ff0069; 
  border: none;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  outline: none;
  border-radius: 8px;
  font-weight:bold;
}

.mgenbutton:hover {background-color: #ff9200}

.mgenbutton:active {
border:none
}

.genresultspace {
width:50%;
margin:auto;
border: 2px solid #ff0069;
padding: 20px;
margin-top: 20px;
border-radius:8px;
}

.gentext {
font-size: 20px;
color: #FF98B7;
font-weight: bold;
}

.genresult {
	
font-size: 20px;
color: #ff0069;
font-weight: bold;}

.genresultname {
	
font-size: 20px;
color: #ff0069;
font-weight: bold;
text-align:center}

.center {
	display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap:wrap;
}

.center ul {
	display: flex;
	word-wrap: wrap;
}
.center li {
	display: inline-block;
	margin: 2px;
}
	
.checkboxes {
	float:left;
position: absolute;}

.checkboxes ul {
}

.checkboxes li {
list-style-type:none;
}

.agenbutton {
  background-color: #ff0069; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  outline: none;
  border-radius: 8px;
  font-weight:bold;
  margin-top: 14px
}

.agenbutton:hover {background-color: #ff9200}

.agenbutton:active {
border:none
}


@media screen and (max-width: 1000px) {
	
	
	
.toc {
width: 150px;
padding: 3px;
overflow:hidden;
margin-left:0px
}

.toc li {
margin-bottom:5px;
}

.toc ul {
	list-style: none;
	padding-left:3;
}
	

.direct {
	margin-left: 160px;
	margin-right: auto;
	max-width: 500px;
	}

.fanfictoc {
background-color:white;
float:left;
padding: 2px;
position: sticky;
top: 0px;
font-size: 12px;
}

.fanfictoc li {
margin-bottom:3px;
list-style-type:none;
}

.fanfictoc ul {
text-decoration: none;
width: auto;
display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  column-count: 1;
}
}
@media screen and (max-width: 800px) {
.fanfictoc {
display: none
}

#toc2 {
	display: none
}
}


/* WORD SPRINTER */
#timer {
	font-size: 50px;
	text-align: center;
	color: #ff0069;
}

#wordCounter {
	font-size: 30px;
	color: #ff0069;
}

.wstextarea {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background-color:white;
	height: 300px;
	border: none;
	color: black;
}


.wsdirect {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	margin-top: 35px;
	max-width: 900px;
	font-size: 13px;
	background-color: white;
	min-height: 700px;
	max-height: 900px;
	padding: 20px;
	padding-left: 70px;
	color: #ff0069
	}
	
.selectdark {
      
            background: black;
            background-image: none;
            width: 100px;
            height: 100%;
            color: #ff0069;
            cursor: pointer;
            border: none;
            border-radius: 3px;
			margin-left: auto;
			margin-right: auto;
			
        }
 
       
		


/* WORD SPRINTER DARK MODE */



#wordCounter {
	font-size: 25px;
	color: #ff0069;
}

.wstextareadark {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	background-color:black;
	height: 300px;
	border: none;
	color: #ff0069;
	display: block;
	
}


.wsdirectdark {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	margin-top: 35px;
	max-width: 100%;
	font-size: 13px;
	background-color: black;
	min-height: 700px;
	max-height: 900px;
	padding: 20px;
	padding-left: 70px;
	color: #ff0069
	}
	
select {
      
            background: #FFE5E5;
            background-image: none;
            width: 100px;
            height: 100%;
            color: #ff0069;
            cursor: pointer;
            border: 1px #ff0069;
            border-radius: 3px;
			margin-left: auto;
			margin-right: auto;
			
        }
 
        .select {
            position: relative;
            display: block;
            width: 15px;
            height: 2px;
            line-height: 3;
            overflow: hidden;
            border-radius: .25em;
            padding-bottom: 10px;
			color: gray;
			
        }

		
 /*ACCORDON LIST*/
 
    .accordion {
    
	font-size: 16px;
	font-weight:bold;
	color:#00C806;
padding: 5px;
border-width: 0;
border-left: 5px solid #A5FF9F;

	background-color:white;
	width:100%;
	text-align: left;
	margin: 2px
        }

        .active, .accordion:hover {
            background-color: #00C806;
color:		#A5FF9F	;
border-left: 5px solid #00C806;

        }

        .panel {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
			border-width: 0;

margin-left:3px
        }
		
        .panel p{

         border-left: 3px solid #A5FF9F;
padding-left: 10px
        }