@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap');


body {
  background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/95413561_Fc1amUdjElGGOWb.png?1740666131)!important;
  background-position:center;
  box-shadow:inset 130em 0em rgba(0,0,0,0.5);
}

.main {
  background:var(--main-box-bg);
  margin:-10px auto 0px;
  width:90%;
  height:auto;
}

.navbar {
  background:var(--navbar-bg);
}

.page {
  padding:20px;
}

.subnavigation {
  background-color:#4d455a;
  padding:10px;
  border-radius:10px;
  padding-left:20px;
  font-family:"Jua", sans-serif;
  color:#fff;
}

.subnavigation a {
  text-decoration:none;
}

.subnavigation #mainsub {
  color:#e9e8ea;
}

.subnavigation #secondsub {
  color:#bcb9c1;
}

.subnavigation #thirdsub {
  color:#908b98;
}

.subnavigation #characterlink {
  color:#b380ff;
  transition:1s ease-in-out;
}

#characterlink:hover {
  color:#d9d9d9;
}

.dropbtn {
  background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  width:200px;
  display: inline;
  margin-right:20px;
  margin-left:10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}


/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}

.w3-hide{display:none;}
.w3-show{display:block;}

.w3-button {
  color:#fff;
  cursor:pointer;
  text-decoration:none;
}

#link {
  margin-left:20px;
  margin-bottom:10px!important;
  color:#fff;
  text-decoration:none;
}

.spoilersbox {
  background:#4d455a;
  width:80%!important;
  margin:10px auto;
  padding:20px;
  border-radius:20px;
  color:#9b95a1;
  font-family:"Gamja Flower", sans-serif;
  font-size:20px;
  border:5px solid #201731;
}

.spoilersbox #intro {
  color:#edebf0;
  font-family:"Jua", sans-serif;
}

#tableofcontents {
  background:#4d455a;
  width:30%;
  padding:10px;
  border:5px solid #201731;
  color:#9b95a1;
  border-radius:20px;
}

#aboutbox {
  padding-left:20px;
}
  

#quickfacts {
  background:#201731;
  color:#edebf0;
  padding:0px;
  max-height:800px;
  position:sticky;
  top:10px;
}

.charactericon {
  background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/29290358?1738958965);
  background-size:cover;
  height:300px;
}

.factsbox {
  padding:10px 20px;
}

.relationicon {
  width:200px!important;
  height:200px;
  background:var(--relationicon);
  border-radius:20px;
}

.relationdescription {
  width:940px!important;
  background:#fff;
  padding:20px!important;
  border-radius:20px;
}

#description {
  max-height:120px!important;
  overflow-y:scroll;
}