/* The navbar */

.menu-img {
    background-image: url("home-banner-mobile.png");
    min-height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex; /*gets text to bottom of image*/
}


.topnav {
  float: left;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Bilbo Swash Caps', cursive;
  align-self: flex-end; /*gets text to bottom of image*/
}

.topnav a { /*allows size change*/
    font-size: 45px;
}

/*Progress Bar*/
.demo-preview {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: auto;
  width:100%;
  text-align: center;
}

.progress {
  background-color: #f5f5f5;
  border-radius: 3px;
  box-shadow:none;
  &.progress-xs {
    height: 5px;
    margin-top: 5px;
  }
  &.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: #3f1155;
  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;
}

  .link-banner {
  background-image: url("/link-banner.png");
  min-height: 150px;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }

  .book-banner {
  background-image: url("/book-banner-mobile.png");
  min-height: 1500px;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }

.madness-behind-the-mask-banner {
  background-image: url("madness-behind-them-ask-banner-mobile.png");
 min-height: 90vh;
    /* 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-mobile.png");
 min-height: 90vh;
    /* 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-preorder-banner-mobile.png");
  min-height: 90vh;
    /* 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-phone-banner.png");
  min-height: 1500px;
    /* 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-phone-banner.png");
  min-height: 1500px;
    /* 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-phone-banner.png");
  min-height: 1500px;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }
  
  .to-the-devils-tune-beast-banner {
  background-image: url("/to-the-devils-tune-phone-banner.png");
  min-height: 1500px;
    /* 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-phone-banner.png");
  min-height: 1500px;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  }

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

  }

.elemental-claim-banner {
  background-image: url("/elemental-claim-phone-banner.png");
  min-height: 1500px;
    /* 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-phone-banner.png");
  min-height: 1500px;
    /* 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-phone-banner.png");
  min-height: 1500px;
    /* 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-phone-banner.png");
  min-height: 1500px;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }

  .fairy-queen-banner {
  background-image: url("/fairy-queen-phone-banner.png");
  min-height: 1500px;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  }


#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;
}


#gallery {
  width: 100%;
  float: left;
  display: inline-block;
  background-color: transparent;
  font-size: large;
  margin: 0% auto; /*keeps in middle*/
}

#galleryx {
  width: 50%;
  float: center;
  background-color: transparent;
  font-size: large;
  margin: 0% auto; /*keeps in middle*/
}

#series {
  width: 95%;
  float: center;
  display: block; /*keeps it central*/
  background-color: transparent;
  font-size: 55px;
  margin: 0% auto; /*keeps in middle*/
  color: #bab8bd;
}

#seriesx {
  width: 90%;
  float: center;
  background-color: transparent;
  font-size: large;
  margin: 0% auto; /*keeps in middle*/
}



  /*IMAGE SIZES*/
  

  div.img1 {
    float:left;
    width:100%;
    margin:1% 5%;
    text-align:center;
    font-size:large;
  }
  
    div.img15l {
    float:left;
    width:100%;
    margin:1% 3% 1% 1%;
    text-align:center;
    font-size:large;
  }
  
  div.img2 {
    float:left;
    width:100%;
    margin:0% 1% 0% 0%;
  }

  div.img2r {
    float:right;
    width:100%;
    margin:0% 0% 0% 0%;
  }
  
  div.img23 {
    float:left;
    width:100%;
    margin: 0% 0.5%;
  }
  
    div.img3 {
    float:left;
    width:100%;
    margin: 0% 0.5% 2% 0.5%;
    font-size: large;
  }

  div.img3x {
     float: left;
    width:31.5%;
    margin:0% 1% 0% 0%;
  }


  div.img4 {
    float:left;
    width:100%;
    margin: 0% 0.5% 2% 0.5%;
  }


#innerbackground a:link {
    color:#9f7bbb;
    text-decoration:none;
    font-weight:bold;
  }
  
#innerbackground a:hover {
    color:#9f7bbb;
    text-decoration:none;
    font-weight:bold;
  }
  
#innerbackground a:visited {
    color: #9f7bbb;
    text-decoration: none;
    font-weight: normal;
  }   


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

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

a {
    font-weight:bold;
    color: #a000ff;
    text-decoration: none;
}

a:hover {
    font-weight:bold;
    color: #b5afb9;
    text-decoration: none;
}


form {
  background-image: url("background.jpg");
  width: 100%;
  float: center;
  text-align:left;
  white-space:normal;
  margin-top:0.5%;
  padding: 1%;
}

form ul { /*drop down list*/
    list-style-type: none;
}
label {
    display: inline-block;
    font-family: 'Cinzel';
    color: #ffffff;
    font-size: 20px;
    text-align: right;
}

textarea {
    height: 10em;
    width: 100%;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    color: #ffffff;
}
input, label {
    margin: .4rem 0;
}

input[type=submit] {
    background-color: blue;
    border: 1px solid blue;
    color: white;
    text-decoration: none;
    cursor: pointer;
    font-size:20px;
    font-family: sans, serif;
    font-weight:bold;
    font-style: italic;
    white-space:normal;
}

h1 {
  color: #dadada; 
  text-align: center;
  font-size: 60px;
  font-family: 'Bilbo Swash Caps', cursive;
}

h2 {
  color: #dadada; 
  text-align: center;
  font-size: 60px;
  font-family: 'Bilbo Swash Caps', cursive;
}
h3 {
  color: #dadada;
  font-size: 60px;
  text-align: center;
  font-family: 'Bilbo Swash Caps', cursive;
}

h6 {
  font-size: 60px;
  border-bottom: 1px solid black;
  text-align:center;
  margin:0;
  color: #dadada;
}


ol { 
  font-family: 'Lato', sans-serif;
}
p.q
 {
  font-style: italic;
  color:  #236074;
  text-align: center;
  background-color: #d9ebed;
  padding: 2% 5%;
  width: 80%;
  display: block;
  margin: 1% auto;
}

ul {
  list-style: disc;
}


#footer {
  width: 100%;
  background-color: #000a0a;
  font-size: 25px;
  border-top: 2px solid #000000;
  text-align: center;
}


body {
  height: 100%;
  width: 100%;
  background-color: #000000;
  margin: 0%;
  padding: 0%;
      color: #bab8bd;

 }

/*ADVENT CALENDARS*/

.calendar-grid {
  display: grid;

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

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


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

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

  grid-template-areas:
      "title title"
      "title title"
      "four  face"
      "three three"
      "three three"
      "one   two"
      "five  five"
      "five  five"
      "six   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: 90vh;
  background-color: #bab8bd;
  color: #000000;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
 
  /* Position the tooltip text */
   position: absolute;
   width: 100%;
   word-wrap: break-word;    
   font-size: 55px;
}

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

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