/* The navbar */

.menu-img {
    background-image: url("home-banner-tablet.png");
    min-height: 6vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.link { /*clickable logo*/
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.topnav {
  float: right;
  margin-top: 2vh;
    margin-right: -4vh;
}
.topnav a {
  float: right;
  color: #ffffff;
  text-align: center;
  padding: 16px 35px 8px 35px;
  text-decoration: none;
  font-size: 23px;
  font-family: 'Bilbo Swash Caps', cursive;
  transition: all 1s ease-in-out;
}
.topnav a:hover {
   transition: 1s;
   color: #9f7bbb;
   position: relative;
   overflow: hidden;
}

/*BANNERS*/
  
  .free-novel-to-have-and-to-lose {
  background-image: url("/free-novel-to-have-and-to-lose.png");
  min-height: 20vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  }
  .romcom-meet-fantasy-banner {
  background-image: url("/cursed-to-be-mine-banner.png");
  min-height: 25vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  }

.cursed-to-be-mine-banner {
  background-image: url("/cursed-to-be-mine-banner.png");
   min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

  .burn-baby-burn-banner {
  background-image: url("/burn-baby-burn-banner.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  }
  .the-little-morgen-banner {
  background-image: url("/the-little-morgen-banner.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  }
  .bjerner-and-the-beast-banner {
  background-image: url("/bjerner-and-the-beast-banner.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  }
  .to-the-devils-tune-banner {
  background-image: url("/to-the-devils-tune-banner.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }

  .to-have-and-to-lose-free-novella-banner {
    background-image: url("/to-have-and-to-lose-free-novella.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


  
  .death-do-us-part-banner {
  background-image: url("/death-do-us-part-banner.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }
  .for-better-or-for-worse-banner {
  background-image: url("/for-better-or-for-worse-banner.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }
  .my-queen-my-king-banner {
  background-image: url("/my-queen-my-king-banner.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }
  
  .elemental-claim-banner {
  background-image: url("/elemental-claim-banner.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }
  .think-of-me-demon-banner {
  background-image: url("/think-of-me-demon-banner.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }
  .tricked-into-it-banner {
  background-image: url("/tricked-into-it-banner.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  } 	
  .rage-for-her-banner {
  background-image: url("/rage-for-her-banner.png");
  min-height: 24vh;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }


/*SITE DESIGN*/

#background {
  width: 100%;
  float: center;
  background-size: 100%;
  background-color: #1a0425;
  border-radius: 0;
  overflow: auto;
  padding:0;
  margin:0px;
}
#backgroundbio {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("/background.png");
  background-position: 50% 50%;
  border-radius: 0;
  overflow: auto;
  padding:0;
  margin:0px;
  height: 93vh;
}
#series {
  width: 80%;
  float: center;
  display: block; /*keeps it central*/
  background-color: transparent;
  font-size: large;
  color: #bab8bd;
  margin: 0% auto; /*keeps in middle*/
}
#seriesbio {
  width: 90%;
  float: center;
  display: block; /*keeps it central*/
  background-color: transparent;
  font-size: large;
  color: #bab8bd;
  margin: 0% auto; /*keeps in middle*/
}
#gallery {
  width: 100%;
  float: left;
  display: inline-block;
  background-color: transparent;
  font-size: large;
  margin: 0% auto; /*keeps in middle*/
}
h1 {
  color: #dadada; 
  text-align: left;
  font-size: 40px;
  font-family: 'Bilbo Swash Caps', cursive;
}
h2 {
  color: #dadada; 
  text-align: left;
  font-size: 40px;
  font-family: 'Bilbo Swash Caps', cursive;
}
h3 {
  color: #dadada;
  font-size: 30px;
  text-align: center;
  font-family: 'Bilbo Swash Caps', cursive;
}
h6 {
  font-size: 30px;
  border-bottom: 1px solid black;
  text-align:center;
  margin:0;
  color: #dadada;
}
ol { 
  font-family: 'Lato', sans-serif;
}
p.q {
  font-style: italic;
  color:  #ffffff;
  text-align: center;
  background-color: #3f0146;
  padding: 2% 5%;
  width: 80%;
  display: block;
  margin: 1% auto;
}
ul {
  list-style: disc;
}
a {
    font-weight:bold;
    color: #a000ff;
    text-decoration: none;
}
a:hover {
    font-weight:bold;
    color: #b5afb9;
    text-decoration: none;
}
body {
  height: 100%;
  width: 100%;
  background-color: #000000;
  margin: 0%;
  padding: 0%;
      color: #bab8bd;
 }
#footer {
  width: 100%;
  background-color: #000a0a;
  font-size: small;
  border-top: 2px solid #000000;
  text-align: center;
}

  /*IMAGE SIZES*/
  
  div.img1 {
    float:left;
    width:90%;
    margin:1% 5%;
    text-align:center;
    font-size:small;
  }
  div.img15l {
    float:left;
    width:20%;
    margin:0% 3% 1% 0%;
    text-align:center;
    font-size:small;
  }
  div.img2 {
    float:left;
    width:48%;
    margin:0% 1% 0% 0%;
  }
  div.img2r {
    float:right;
    width:48%;
    margin:0% 0% 0% 0%;
  } 
  div.img23 {
    float:left;
    width:65%;
    margin: 0% 0.5%;
  }
  div.img3 {
    float:left;
    width:100%;
    margin: 0% 0.5% 2% 0.5%;
  }
  div.img3r {
    float:right;
    width:100%;
    margin: 0% 0.5% 2% 0.5%;
  }
  div.img4 {
    float:left;
    width:48%;
    margin: 0% 0.5% 2% 0.5%;
  }

/*Progress Bar*/

hr.rounded {
  border-top: 3px solid #f5f5f5; /*height of bar*/
  border-radius: 3px;
}
.demo-preview {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: auto;
  width:100%;
  text-align: center;
}
.no-pad {
  padding-top: 1px;
  padding-bottom: 1px;
  margin: auto;
  width:100%;
  text-align: center;
}
.progress {
  background-color: #f5f5f5;
  border-radius: 3px;
  box-shadow:none;
  &.progress-xs {
    height: 2px;
    margin-top: 0px;
  }
  &.progress-sm {
    height: 10px;
    margin-top: 5px;
  }
  &.progress-lg {
    height: 25px;
  }
  &.vertical {
    position: relative;
    width: 20px;
    height: 200px;
    display: inline-block;
    margin-right: 10px;
    > .progress-bar {
      width: 100%!important;
      position: absolute;
      bottom: 0;
    }
    &.progress-xs {
      width: 5px;
      margin-top: 5px;
    }
    &.progress-sm {
      width: 10px;
      margin-top: 5px;
    }
    &.progress-lg {
      width: 30px;
    }
  }
}
.progress-bar {
  background-color: #9f7bbb;
  box-shadow:none;
  &.text-left{
    text-align: left;
    span{
      margin-left: 10px;
    }
  }
  &.text-right{
    text-align: right;
    span{
      margin-right: 10px;
    }
  }
}
.progress-striped .progress-bar,
.progress-bar-striped {
  @include gradient-striped;
  background-size: 40px 40px;
}


/*ADVENT CALENDARS*/

.calendar-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 1rem;

  grid-template-areas:
      "title  title  day1"
      "title  title  day2"
      "day3   day4   day5"
      "day6   day7   day8"
      "day9   day10  day10"
      "day11  day10  day10"
      "day12  day13  day14"
      "day15  day15  day16"
      "day15  day15  day17"
      "day18  day19  day20"
      "day21  day23  day24"
      "day25  day25  day25"
      "day25  day25  day25"
      "day25  day25  day25";
}

/*FLIP*/

.flip-box {
  background-color: transparent;
  width: 100%;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  color: black;
}

.flip-box-back {
  background-color: #9f7bbb;
  color: white;
  transform: rotateY(180deg);
  word-wrap: break-word;
  border: 1px solid #9f7bbb;

}

.title {
  grid-area: title;
}
.day-1 {
  grid-area: day1;
  min-height: 17vh;
  font-size: 1.8vh;
}
.day-2 {
  grid-area: day2;
    min-height: 17vh;
}
.day-3 {
  grid-area: day3;
    min-height: 21.7vh;
}
.day-4 {
  grid-area: day4;
    min-height: 21.7vh;
}
.day-5 {
  grid-area: day5;
    min-height: 21.7vh;
}
.day-6 {
  grid-area: day6;
  min-height: 21.7vh;
}
.day-7 {
  grid-area: day7;
    min-height: 21.7vh;
}
.day-8 {
  grid-area: day8;
    min-height: 21.7vh;
}
.day-9 {
  grid-area: day9;
    min-height: 21.7vh;
}
.day-10 {
  grid-area: day10;
    min-height: 34vh;
}
.day-11 {
  grid-area: day11;
    min-height: 21.7vh;
}
.day-12 {
  grid-area: day12;
    min-height: 21.7vh;
}
.day-13 {
  grid-area: day13;
    min-height: 21.7vh;
}
.day-14 {
  grid-area: day14;
    min-height: 21.7vh;
}
.day-15 {
  grid-area: day15;
    min-height: 34vh;
}
.day-16 {
  grid-area: day16;
    min-height: 21.7vh;
}
.day-17 {
  grid-area: day17;
    min-height: 21.7vh;
}
.day-18 {
  grid-area: day18;
    min-height: 21.7vh;
}
.day-19 {
  grid-area: day19;
    min-height: 21.7vh;
}
.day-20 {
  grid-area: day20;
    min-height: 21.7vh;
}
.day-21 {
  grid-area: day21;
    min-height: 21.7vh;
}
.day-22 {
  grid-area: day22;
    min-height: 21.7vh;
}
.day-23 {
  grid-area: day23;
    min-height: 21.7vh;
}
.day-24 {
  grid-area: day24;
    min-height: 21.7vh;
}
.day-25 {
  grid-area: day25;
    min-height: 10vh;
}

/*bio grid index*/
.bio-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 0.3rem 0.5rem;

  grid-template-areas:
      "title title face"
      "title title four"
      "one three three"
      "two three three"
      "five  five six"
      "five  five seven";
}

.title {
  grid-area: title;
}
.one {
  grid-area: one;
  font-size: 2.5vh;
}
.two {
  grid-area: two;
  font-size: 2.5vh;
}
.three {
  grid-area: three;
  font-size: 2.5vh;
}
.four {
  grid-area: four;
  font-size: 2.5vh;
}
.five {
  grid-area: five;
  font-size: 2.5vh;
}
.six {
  grid-area: six;
  font-size: 2.5vh;
}
.seven {
  grid-area: seven;
  font-size: 2.5vh;
}
.face {
  grid-area: face;
  font-size: 2.5vh;
}

/*HOVER POPUP FOR TRIGGER WARNINGS*/

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 20vh;
  background-color: #bab8bd;
  color: #000000;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*MISC*/
figure {
  display:block;
  width:100%;
  margin:0%;
  border:0%;
}

figcaption {
  display:block;
  font-size:large;
  text-align:center;
}