/*!
 * Start Bootstrap - Heroic Features (https://startbootstrap.com/template-overviews/heroic-features)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-heroic-features/blob/master/LICENSE)
 */

:root {
  --primary1: #151716;
  --primary2: #E1B689;
  --primary3: #bd524c;
  --primary4: #3A3C55;
  --primary5: #93B7BE;
  --primary6: #eae3f5;
  --primary7: #383c72;
  --primary8: #7c6880;
}

@font-face {
  font-family: 'TrajanPro';
  src: url('../fonts/TrajanProRegular.ttf');
font-weight: normal;
}

.bg-primary1 {
  background-color: var(--primary1);
}
.bg-primary2 {
  background-color: var(--primary2);
}
.bg-primary3 {
  background-color: var(--primary3);
}
.bg-primary4 {
  background-color: var(--primary4);
}
.bg-primary5 {
  background-color: var(--primary5);
}
.bg-primary6 {
  background-color: var(--primary6);
}
.bg-primary7 {
  background-color: var(--primary7);
}
.bg-primary8 {
  background-color: var(--primary8);
}
.text-primary1 {
  color: var(--primary1);
}
.text-primary2 {
  color: var(--primary2);
}
.text-primary3 {
  color: var(--primary3);
}
.text-primary4 {
  color: var(--primary4);
}
.text-primary5 {
  color: var(--primary5);
}
.text-primary6 {
  color: var(--primary6);
}
.text-primary7 {
  color: var(--primary7);
}
.text-primary8 {
  color: var(--primary8);
}
html, body {
  padding-top: 56px;
  background: linear-gradient(90deg,var(--primary1),var(--primary4));
  color: var(--primary5);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bg-main {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(/img/bg-main.png);
  background-size: cover;
}
a, a:focus {
  color: var(--primary6);
}
a:hover {
  color: var(--primary3);
}
content {
  flex: 1;
}
nav.navbar {
  background-color: var(--primary1);
}
.navbar-collapse.collapse.show {
  background-color: var(--primary4);
}
.navbar-nav .nav-item.active .nav-link {
box-shadow: 0 1px 0 #FFF;
}
.navbar-nav .nav-link:hover {
  border-bottom: solid 1px #FFF!important;
  
}

footer {
  background-color: var(--primary1);
}

.copyright {
  font-size: 0.6875em;
}

h1#spellTitle {
  font-family: TrajanPro;
  color: var(--primary2);
  text-shadow: 5px 0px 5px hsl(0deg 0% 0% / 80%);
}

/* Main Page */

blockquote#randomQuote {
  width: 100%;
  background-color: var(--primary4);
  color: white;
}

/* Type Page */

@media screen and (min-width: 420px) {
  #typeList {
    column-count: 3;
    column-gap: 4em;
    column-width: 200px;
    column-fill: balance;
  }
}
/* Spell Page */

header {
  color: var(--primary6);
}

h3.spellBlockTitle {
  color: var(--primary8);
  margin-bottom: 0.625em;
}

div.spellInfo {
  margin-bottom: 1.563em;
}

div#spellName.badge-primary {
  font-family: TrajanPro;
  background-color: var(--primary3);
  background: linear-gradient(to bottom, rgb(109, 42, 33) 0%,rgb(178, 47, 31) 100%)!important;
  width: 100%;
  padding: 0.625em;
}
div#spellName.btn:hover {
  color: var(--primary6);
}
#input-search, #button-search { /* index big one */
  height: 5rem;
  font-size: 2rem;
  background: rgb(255 255 255 / 10%)!important;
  border-color: transparent;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 25%);
  transition: 0.3s ease-in-out;
}
#button-search {
  width: 5rem;
}
#button-search:hover {
  color: var(--primary3);
}
#input-search:focus {
  color: var(--primary1);
  background: var(--primary6)!important;
}
#input-search:focus ~ .input-group-append #button-search { 
  color: var(--primary1);
  background: var(--primary6)!important;
}
#search-input { /* small one */
  background: #FFF;
  width: 15rem;
  margin-right: -30px;
  padding-right: 30px;
  border-style: solid;
  outline: none;
  box-shadow: none;
}
@media only screen and (max-width: 480px) {
  #input-search, #button-search {
    font-size: 1.8rem;
  }
  #search-input {
    width: 20.5rem!important;
  }
}
#carouselTipes {
  background-color: var(--primary4);
}

.breadcrumb-item a {
  color: var(--primary4);
}
#typeName, #spellColor, #spellEffect {
  padding: 0.5em;
}
.dropdown-menu a {
  color: var(--primary1);
}

#typeList a, #typeList a:visited, #typeList a:focus {
  color: var(--primary2);
}

.quote-left {
  font-size: 5rem;
  position: absolute;
  margin-top: -3rem;
  margin-left: -1.5rem;
  color: #7c688033;
}
.font-trajan {
  font-family: TrajanPro;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
	width: 6px;
	background-color: var(--primary1);
	border-radius: 10px 10px 10px 10px;
}
::-webkit-scrollbar-track {
	background-color: var(--primary4);
	-webkit-box-shadow: inset 0 0 6px var(--primary1);
	box-shadow: inset 0 0 6px var(--primary1);
}
::-webkit-scrollbar-thumb {
	background-color: var(--primary8);
	border-radius: 10px;
	background-image: -webkit-linear-gradient(90deg,var(--primary1),var(--primary8));
	border: 1px solid var(--primary1);
}
::-webkit-scrollbar-thumb:hover {
	background-color: var(--primary4);
	background-image: -webkit-linear-gradient(90deg,var(--primary1),var(--primary8));
}
body::-webkit-scrollbar {
	width: 1rem;
}
/* EnD of Scrollbar */

.navbar .navbar-toggler {
  top: -3rem;
  left: 1rem;
}
.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1050;
  margin-top: -3.5rem;
}
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  margin-top: 3.5rem;
  /*margin-bottom: 3.5rem;*/
  /*background-image: -webkit-linear-gradient(90deg,var(--primary1),var(--primary4));*/
}
.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto;
}
main {
  /*margin-top: -3.5rem;*/
  min-height: calc(100vh - 56px);
}

#sidebarMenu a {
  color: var(--primary1);
}
#sidebarMenu a:hover {
  color: var(--primary3);
}

#breadcrumb {
  font-size: .8em;
}

@media only screen and (max-width: 420px) {
  .breadcrumb {
    width: 170px;
  }
}

@media only screen and (max-width: 991px) {
  #navbarResponsive {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-top: 1rem;
  }
}
@media only screen and (max-width: 420px) {
  #typesChart {
    width: 100%!important;
    height: 225px!important;
  }
  #spellsChart {
    width: 100%!important;
    height: 225px!important;
  }
  #main-title {
    font-size: 3.2em;
  }
  #input-search {
    font-size: 1.2em;
    height: 5rem;
  }
  #button-search {
    height: 5rem;
    width: 5rem;
  }
  #spellTitle {
    font-size: 2.8em;
  }
}