@font-face {
  font-family: "Rajdhani";
  src:
    url("Fonts/Rajdhani-Medium.ttf") format("truetype"); 
    url("Fonts/Rajdhani-Bold.ttf") format("truetype");
    url("Fonts/Rajdhani-Regular.ttf") format("truetype"); 
    url("Fonts/Rajdhani-SemiBold.ttf") format("truetype"); 
    url("Fonts/Rajdhani-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Jura";
  src: url("/Fonts/Jura-VariableFont_wght.ttf") format("truetype");
}

:root {
 --healer: #FFB3EE; 
 --bbf: #FFA900;
 --blue: #B1F9FF;
 --knower: #D158FF;
 --mimi:  #FF7070;
 --mother: #C391DD;
 --principal: #FF366B;
 --youngest: #A8F4FF;
 --iris: #FFD300;
 --watcher: #00EAFF;
 --fixer: #6DE75D;
 --father: #E1FF8F;
 --secretary: #A8B7FF;
 --h1gradient: linear-gradient(to right, #A8F4FF, #00EAFF);  
 --transparentblack: rgba(0, 0, 0, 0.7);
  
}
.healer {
 color: var(--healer); 
}
.bbf {
 color: var(--bbf); 
}
.blue {
 color: var(--blue); 
}
.knower {
 color: var(--knower); 
}
.mimi {
 color: var(--mimi); 
}
.mother {
 color: var(--mother); 
}
.principal {
 color: var(--principal); 
}
.youngest {
 color: var(--youngest); 
}
.iris {
 color: var(--iris); 
}
.watcher {
 color: var(--watcher); 
}
.fixer {
 color: var(--fixer); 
}
.father {
 color: var(--father); 
}
.secretary {
 color: var(--secretary); 
}
.none {
 color: white; 
}

html {
background: #0a0024;
background: linear-gradient(180deg, rgba(10, 0, 36, 1) 0%, rgba(22, 9, 121, 1) 100%);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
font-size: 1.25em;
margin: 0;
padding: 0;
/* https://codeshack.io/css-pattern-generator/ */
}

body {
 min-height: 100vh;
 margin: 0;
 padding: 0;
}

.topnav {
 display: none; 
}

h1 {
 font-family: Jura; 
 margin: 1.3rem 1rem 0.8rem 1rem;
 background: -webkit-linear-gradient(45deg, var(--watcher), var(--fixer), var(--iris), var(--bbf), var(--healer), var(--knower));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 filter: drop-shadow(2px 2px 0px black);
text-align: center;
font-weight: 900;
}

/* the gradient text doesn't allow text-shadow without the shadow bleeding through, so this makes a more concrete version that a shadow can show up under */

h1::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  color: #000;
  text-shadow: -4px 4px 1px #000, 3px 2px 1px #000, -1px -2px 1px #000, 2px 6px 3px #000;
}

h2 {
   font-family: Rajdhani; 
   color: var(--watcher);
   margin: 0.6em 0 0.3em 0;
}

h3 {
  font-family: Rajdhani; 
  color: var(--healer);
    margin: 0.8em 0 0.8em 0;

}
     

p {
  
  font-family: Rajdhani; 
  color: white;
  margin: 0.8em 0 0.5em 0;
 
}

#footer {
 background-color: var(--transparentblack); 
 margin: 0rem 0 0 0;
 padding: 1rem 2rem 0.3rem 2rem;
 font-family: 'Jura';
 font-size: 0.75em;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 bottom: 0;
 left: 0;
 color: var(--knower);
 text-wrap: wrap;
   align-items: flex-start;
     align-items: stretch;
     justify-content: space-around;
}

#footer div {
 width: 30%;
}

#footer a { 
 text-decoration: none;
  color: var(--mother);
   cursor: pointer;
}

#footer a:hover {
 color: black; 
}

ul {
 list-style-image: url("/Images/droplet-solid.svg"); 
  
}

li {
 padding: 0 0 0.7em 0; 
}

a, a:visited {
 color: var(--healer);
 transition: 0.4s ease;
 font-weight: bolder;
 background: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, var(--healer) 50%);
 background-size: 200% 100%;
 background-position: right bottom;
}

a:hover { 
color: black;
cursor: crosshair;
transition: 0.4s ease;
background-position: left bottom;
}

#nav, #nav a:visited {
 background-color: var(--knower); 
 color: black;
 margin: 0;
 text-decoration: none;
 font-family: Rajdhani; 
 padding: 3px;
 display: flex;
 font-weight: bolder;
 list-style: none;
}

#nav li, #nav ul:before, #nav ul {
  display: inline;
  content: none;
  list-style-image: none;
}

#nav a {
  padding: 10px;
  transition: 0.8s ease;
  margin: 0;
  text-decoration: none;
  color: black;
}

#nav a:hover {
    transition: 0.8s ease;
    color: purple;
    border-radius: 5px;
}

#home, #ocs, #resources, #mine {
  padding: 0.5rem 5rem 3rem 5rem;
}

#home > #welcome, #home > #about, #home > #siteplans, #home > #challenge, .intro-container{
    padding-top: 1rem; 
}


#container {
  color: white;
  font-family: Rajdhani; 
  display: flex;
  flex-direction: column;
  background: var(--transparentblack);
  border: 0.2rem solid var(--healer);
  box-sizing: border-box;
  border-start-start-radius: 50px; /* Top-left */
  border-end-end-radius: 50px;   
  corner-shape: bevel;   
  box-shadow: 0px 0px 5px var(--healer);
  margin: 0 0 2rem 0;
  scrollbar-color: var(--youngest) rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;

}

#home {
 background-image: url("/Images/gardenbg.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: rgba(44, 44, 108, 0.65);
  background-blend-mode: multiply;
  background-attachment: fixed;
}

#home h1 {
 margin: 1rem 0 0 0; 
}
  
#welcome {
  width: 100%;
}

#about > #container {
 width: 60%;
  height: 70vh;
  overflow: hidden;
}

#about {
 display: flex;
 flex-direction: row; 
 align-items: flex-start;
 justify-content: space-between;
}

.inner-scroll {
 overflow-y: auto;
 overflow-x: hidden;
 width: 100%;
 height: 70vh;
  box-sizing: border-box;
  flex-direction: column;
  scrollbar-color: var(--youngest) rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
  padding: 0.5rem 3rem 0.5rem 2rem;

}

.inner {
    padding: 0.5rem 3rem 0.5rem 2rem;

  
}

#shellsonaimg {
  width: 35%;
     height: auto;
     padding: 0;
     box-sizing: border-box;
     border: 5px solid var(--knower);
     box-shadow: 0px 0px 5px var(--knower);
     border-radius: 25px;
     corner-shape: bevel;
     transition: 1s ease;
}

#shellsonaimg:hover {
 transition: 1s ease;
 box-shadow: 0px 0px 30px var(--knower);
}

/* 
.caption-container {
  position: relative;
  width: 60%;
}

.caption-image {
  width: 60%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  width: 60%;
  opacity: 0;
  transition: 0.8s ease;
  background-color: var(--knower);
  border-radius: 0 0 25px 25px;
  corner-bottom-left-shape: bevel;
  corner-bottom-right-shape: bevel;
  font-family: Rajdhani;
       box-sizing: border-box;

  
}

.caption-container:hover .overlay {
  opacity: 1;
}

.caption {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

*/

/* SITE PLANS */
#siteplans > #container {
 width: 60%;
  height: 70vh;
  padding-right: 0;
  overflow: hidden;
}

#siteplans {
 display: flex;
 flex-direction: row;
 justify-content: space-between; 
 align-items: flex-start;
   padding-right: 1rem;

}

#siteplans > img {
  width: 35%;
     height: auto;
     padding: 0;
     box-sizing: border-box;
     border: 5px solid var(--knower);
     box-shadow: 0px 0px 5px var(--knower);
     border-radius: 25px;
     corner-shape: bevel;
      transition: 1s ease;

}

#siteplans > img:hover {
 transition: 1s ease;
 box-shadow: 0px 0px 30px var(--knower);

}

#challenge > #container {
 text-align: center;
}


/* CHARACTER PAGE */

.intro-container {
  margin: 2rem 5rem 0rem 5rem;
  text-align: center;
  padding: 0.4rem;
}

.intro-container h1 {
 margin: 0; 
}

#charactercontainer {
 display: flex;
 flex-direction: row;
 padding: 0 0 rem 0;
 justify-content: center;
 align-items: flex-start; /* wraps height */
 word-wrap: break-word;
 align-content: center;
 flex-wrap: wrap;
}

#character {
 background-color: black;
 color: white;
 display: flex;
 flex-direction: column;
 width: 20%;
 margin: 0.4rem;
 text-align: center;
 border: 1px solid rgba(255, 255, 255, 0.2);
 transition: 0.7s ease;
 padding: 1rem 2rem 1rem 2rem;
 align-items: center;
 overflow-y: auto;
 max-height: 70vh;
  scrollbar-color: var(--youngest) rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
   font-size: 0.8em;


}

#character img {
 width: 40%;
 height: auto;
 display: flex;
 border-radius: 20px;
 border: 4px solid var(--youngest);
 box-sizing: border-box;
 transition: 0.5s ease;
 

}

#character:hover {
border: 1px solid var(--watcher); 
transition: 0.5s ease;
background-color: rgba(10, 10, 10, .8);
}

#character:hover > img {
border: 1px solid var(--watcher); 
background-color: rgba(10, 10, 10, .8);
transition: 0.5s ease;
cursor: pointer;

}

character:active > img {
  transition: 1s ease;
  
}


/* QUOTE GENERATOR */


#quotetitle {
 margin: 0; 
 padding-bottom: 1rem;
}

#quotebackground {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  bottom: 0;
  margin: 0;
  padding: 1rem 1rem;
}

#quotesection {
 background: var(--transparentblack);
 color: white;
 display: flex;
 justify-content: center;
 flex-direction: column;
 text-align: center;
  margin: 0rem 5rem 0rem 5rem;
   padding: 3rem 5rem 3rem 5rem;
   min-height: 50vh;
   max-height: 50vh;
 overflow-x: hidden;
 position: relative;
 flex-flow: column;
 border: 1px solid var(--youngest);
 border-start-start-radius: 50px; /* Top-left */
border-end-end-radius: 50px;   
scrollbar-width: thin;
scrollbar-color: var(--youngest) transparent;
corner-shape: bevel;

}
#button {
  display: flex;
  position: relative;
  margin: -1.5rem 0rem 0rem 0rem;
  padding: 0rem 1rem 1rem 1rem;
  bottom: 0;


}

button {
 color: black;
 background-color: var(--knower);
 border: none;
 border-radius: 5px;
 padding: 1rem 2rem 1rem 2rem;
 transition: 0.7s ease;
 font-family: Rajdhani;
 font-size: 1em;
 border: 1px solid var(--youngest);
 margin: auto;
 cursor: pointer;
 
}

button:hover {
background-color: var(--youngest);
transition: 0.7s ease;
}

button:active {
  background-color: var(--watcher);
}
 
/* MY CREATIONS */

}

#artcontainer {
  display: flex;
  flex-flow: row;
}

#artcontainer img {
  width: 30%;
  height: auto;
  transition: 0.2s ease;
  padding: 0.8rem;
  
}

#artcontainer img:hover, #artcontainer img:active {
  transform: scale(1.3);
    transition: 0.2s ease;
    cursor: none;
    overflow-x: scroll;
    overflow-y: auto;
}

/* CHAPTER PAGE */

#chcontainer {
  color: white;
  font-family: Rajdhani; 
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.85);
  border: 0.2rem solid var(--healer);
  box-sizing: border-box; 
  border-start-start-radius: 50px; /* Top-left */
  border-end-end-radius: 50px;   
  margin: 1rem 6rem 1rem 6rem;
  corner-shape: bevel;   
  box-shadow: 0px 0px 5px var(--healer);
  box-shadow: 0px 0px 5px var(--healer);
  scrollbar-color: var(--youngest) rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
max-height: 50vh;
overflow: hidden;


}

#chcontainer > .inner-scroll {
max-height: 50vh; 
}

#divider {
 background: black;
 padding: 2rem;
 border-top: 0.2rem solid var(--youngest);
 border-bottom: 0.2rem solid var(--watcher);

/* linear-gradient(45deg, var(--watcher), var(--blue), var(--youngest), var(--secretary)) */    

}


#ch1, #ch3, #ch5, #ch7, #ch9, #epilogues, #chredacted, #ch2, #ch4, #ch6, #ch8, #ch10 {
  min-height: 70vh;
  background-attachment: fixed;
}

#ch1, #ch3, #ch5, #ch7, #ch9, #epilogues {
 background-repeat: no-repeat;
 background-size: cover;
  background-position: center;
  padding: 2rem 25rem 2rem 0;
  background-color: rgba(44, 44, 108, 0.5);
  background-blend-mode: soft-light;
}


#chredacted, #ch2, #ch4, #ch6, #ch8, #ch10 {
 background-repeat: no-repeat;
 background-size: cover;
  background-position: center;
  padding: 2rem 0rem 2rem 25rem;
    background-color: rgba(108, 44, 44, 0.5);
  background-blend-mode: soft-light;

}

#chintro {
  text-align: center;
  padding: 4rem 7rem;
  background-image: url("/Images/chintro.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  
}

#chredacted {
 background-image: url("/Images/chredacted.jpg") 
 
}

#ch1 {
 background-image: url("/Images/ch1bg.jpg"); 
}


#ch2 {
 background-image: url("/Images/ch2bg.jpg"); 
}


#ch3 {
 background-image: url("/Images/ch3bg.jpg"); 
}


#ch4 {
 background-image: url("/Images/ch4bg.jpg"); 
}


#ch5 {
 background-image: url("/Images/ch5bg.jpg"); 
}


#ch6 {
 background-image: url("/Images/ch6bg.jpg"); 
}


#ch7 {
 background-image: url("/Images/ch7bg.jpg"); 
}


#ch8 {
 background-image: url("/Images/ch8bg.jpg"); 
}


#ch9 {
 background-image: url("/Images/ch9bg.jpg"); 
}


#ch10 {
 background-image: url("/Images/ch10bg.jpg"); 
}

#epilogues {
 background-image: url("/Images/epilogues.jpg"); 
}

/* OCS PAGE */

#ocs {
 display: flex; 
 flex-wrap: wrap;
 justify-content: center;
}

.oc-container {
 display: flex; 
 background-color: var(--transparentblack);
 width: 88%;
 height: auto;
 flex-direction: column;
 padding: 0.5rem 1rem 1rem 1rem;
 border: 5px solid;
 corner-shape: bevel;
 border-radius: 10px;
 flex-wrap: wrap;
 margin: 0 0 1rem 0;

}

.oc-container h2 {
 margin: 0.5rem 0 1rem 0;
}

.oc-container img {
 width: 30%;
 height: auto;
 border: 5px solid;
}

.oc-inner {
 display: flex;
 flex-direction: row; 
 align-items: flex-start;
 flex-wrap: wrap;
}

.bio {
width: 60%;
flex-direction: column;
padding: 1rem 1rem 1rem 1rem;
max-height: 40vh;
overflow-y: auto;
overflow-x: hidden;
 scrollbar-color: var(--youngest) rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
  box-shadow: inset 0px 4px 9px -6px #888;

}

.bio p {
 margin-top: 0; 
}

/* MOBILE RESPONSIVITY */

@media only screen and (max-width: 700px) {

#home, #mine, #characters, #chapters, #quotes, #resources, #notfound, #ocs {
 padding-top: 2.5rem; 
}

#home, #resources, #mine {
 padding: 0.2rem;
 
}

#home > #container, #home img {
 width: 98%;
}

#about, #siteplans {
 flex-wrap: wrap; 
}

#about > #container, #siteplans > #container {
 width: 98%; 
 max-height: none;
}
 
  h1 {
   font-size: 1.6em; 
    
  }
  
  .intro-container {
   width: 78vw; 
   margin: 0 10%
  }
  
  
  #character {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin: 0 0.5rem 0.5rem 0.5rem;
  padding: 1.2rem 1rem 1rem 1rem;
  overflow-y: auto;
  max-height: 85vh;
  word-wrap: normal;
  }
  
  
#quotesection {
  display: flex;
  justify-content: center;
  width: 70%;
  padding: 4rem 1rem 2rem 1rem;
  margin: auto;
  
  }
  

#resources, #mine {
 margin: 0;
}
  
#nav {
  display: flex;
  flex-direction: row;
 text-align: center;
 padding: 0 3rem 0 1rem;
 font-weight: bold;
 word-wrap: normal;
 overflow-x: scroll;
 align-items: center;
 align-content: center;
 justify-content: center;
 
    
  }
  
    
  #chcontainer {
   margin: 1rem 0.4rem;
  }
  
  #container {
   margin: 1rem 0.4rem;
  }
  
  h1 {
   margin: 0.5rem 1.5rem 0.5rem 1.5rem;
  
  }

#artcontainer img {
 width: 90%; 
 flex-flow: row;
 overflow-x: auto;
}

#ocs {
 margin: 0; 
 padding: 2.5rem 0 0 0;
}

.oc-container {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.5rem 0 0.5rem;
  justify-content: center;
}

.oc-inner {
  flex-direction: column;
  padding: 0.5rem;
  margin: 0;
  
}

.oc-inner img {
 width:  75%;
 border-radius: 50%;
 margin: 0.5rem 2rem 1rem 2rem;


}

.bio {
 width: 100%; 
 padding: 1.1rem 0.5rem 0 0;
 text-align: left;
  box-shadow: inset 0px 4px 9px -6px #888;
}

#ocs h1 {
 margin: 0;
 padding: 0;
}

#nav {
  display: none;
  
}
/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: black;
  display: flex;
  font-family: Jura;
    position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;

  
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: var(--knower);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: var(--healer);
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: black;
  color: white;
}

#footer {
 flex-direction: column; 
 justify-content: center;
 text-align: center;
  padding-bottom: 1rem;

}

#footer div {
 width: 95%;
 font-size: 1.2em;
}
}

@media only screen and (max-width: 1200px) {

#ch1, #ch3, #ch5, #ch7, #ch9, #epilogues, #chredacted, #ch2, #ch4, #ch6, #ch8, #ch10, #chintro {
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 display: flex;
 flex-flow: column;
 margin: 0rem;
 padding: 0;

}



#ch1, #ch3, #ch5, #ch7, #ch9, #epilogues {
 margin: 0; 
}

#chredacted, #ch2, #ch4, #ch6, #ch8, #ch10, #chintro {
 margin-right: 0;
}

#chcontainer {
 display: flex;
 flex-flow: column;
 justify-content: center;
 margin: 1.5rem 1rem;
 
} 



}