/* full resets */
* {
    padding: 0;
    margin: 0;
  }

.body {
  overflow: hidden;
}

/* styling the intro page */

#intro-page {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    z-index: 6;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    -webkit-transition: opacity 1000ms linear;
    transition: opacity 1000ms linear;
}

#video {
background-color: #000;
height: 100vh;
width: 100vw;
}

#hide-intro-container {
    position: absolute;
    height: 50vh;
    width: 50vw;
    z-index: 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#hide-intro {
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: 1px solid white;
    width: 200px;
    height: 30px;
    border-radius: 10px;
    -webkit-animation: bloodBorneIntro 1s infinite;
    animation: bloodBorneIntro 1s infinite;
}

#hide-intro:hover {
    background-color: crimson;
    border: none;
    color: black;
    transition: 1s all ease-in-out
}

/* keyframes for the hide button */
@keyframes bloodBorneIntro{
    0% {
      box-shadow: 0 0 10px red;
    }
    25% {
        box-shadow: 0 0 20px red;
      }
    50% {
        box-shadow: 0 0 30px red;
      }
    75% {
        box-shadow: 0 0 20px red;
      }
    100% {
        box-shadow: 0 0 10px red;
      }
  }



  
  /* container */
  #container {
    z-index: 4;
    position: absolute;
    background: url(bloodbornemain.jpg);
  /*  dyanmic background image sizing  */
    background-size: 100vw 100vh;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }







#project-title {
  text-align: center;
color: #000;
font-size: 36px;
}

#project-instructions {
text-align: center;
color: #000;
font-size: 24px;
}

#project-header {
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-animation: textPulse 1s infinite;
  animation: bloodBorneIntro textPulse 1s infinite;
}

/* keyframes for text */
/* keyframes for the back buttons */
@keyframes textPulse{
  0% {
    text-shadow: 0 0 5px black, 0 0 10px red;
  }
  25% {
      text-shadow: 0 0 5px black, 0 0 20px red;
    }
  50% {
      text-shadow: 0 0 5px black, 0 0 30px red;
    }
  75% {
      text-shadow: 0 0 5px black, 0 0 20px red;
    }
  100% {
      text-shadow: 0 0 5px black, 0 0 10px red;
    }
}

/* styling the back button */
#back-button {
  height: 40px;
  width: 80px;
  position: absolute;
  bottom: 125px;
  right: 25px;
  border-radius: 20px;
  border: 1px solid crimson;
  color: crimson;
  text-shadow: 0 0 20px black;
  background: #111;
  transition: .4s ease-in-out all;
  display: none;
  -webkit-animation: backButtonPulse 1s infinite;
  animation: backButtonPulse 1s infinite;
}

#back-button:hover {
 background: rgba(0,0,0,.5);
  text-shadow: 0 0 15px crimson, 0 0 30px red;
  box-shadow: 0 0 20px crimson, 0 0 30px red;
}

/* keyframes for the back buttons */
@keyframes backButtonPulse{
  0% {
    box-shadow: 0 0 10px red;
  }
  25% {
      box-shadow: 0 0 20px red;
    }
  50% {
      box-shadow: 0 0 30px red;
    }
  75% {
      box-shadow: 0 0 20px red;
    }
  100% {
      box-shadow: 0 0 10px red;
    }
}
  
  /* top half */
  #boss-display {
    z-index: 5;
    display: flex;
    height: 20vh;
    width: 100vw;
    padding-bottom: 5px;
  }
  
  #boss-card-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
  }

#boss-card-header {
  color: crimson;
  text-shadow: 0 0 15px red, 0 0 20px black;
  text-align: center;
  display: none;
}

#boss-card-header h1 {
  font-size: 24px;
}

#boss-card-header h2 {
  font-size: 24px;
}


#boss-card {
  background: url('https://wallpapercave.com/wp/wp2668807.png');
  display: flex;
  width: 450px;
  height: 400px;
  box-shadow:  0 0 10px white;
  display: none;
  -webkit-animation: bossFadeIn;
  animation: bossFadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes bossFadeIn {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}

#boss-card-body {
  padding: 0;
  display: flex;
  justify-content: center;
  background: transparent;
  height: 100%;
  padding: 0;
  margin: 0;
}

#card-body-img {
  height: 100%;
  width: 450px;
  -webkit-animation: bossImagePulse 1s infinite;
  animation: bossImagePulse 1s infinite;
}

/* keyframes for the back buttons */
@keyframes bossImagePulse{
  0% {
    box-shadow: 0 0 10px red;
  }
  25% {
      box-shadow: 0 0 20px red;
    }
  50% {
      box-shadow: 0 0 30px red;
    }
  75% {
      box-shadow: 0 0 20px red;
    }
  100% {
      box-shadow: 0 0 10px red;
    }
}



#health-points {
  color: crimson;
  font-size: 20px;
  text-shadow: 0 0 10px red, 0 0 15px black;
}

#boss-weakness {
  color: crimson;
  font-size: 20px;
  text-shadow: 0 0 10px red, 0 0 15px black;
}

#boss-resistance {
  color: crimson;
  font-size: 20px;
  text-shadow: 0 0 10px red, 0 0 15px black;
}



#boss-card-footer {
  margin-bottom: 100px;
  height: 500px;
  text-align: center;
  display: none;
}

/* adding button classes for icon */




 #btn-cleric-beast {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/cleric_beast.jpg');
    background-size: cover;
    background-position: center;
  }



#btn-father-gascoigne {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/father_gascoigne.jpg');
    background-size: cover;
    background-position: center;
  }

  
#btn-vicar-amelia {
  background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/vicar_amelia.jpg');
  background-size: cover;
  background-position: center;
}


#btn-blood-starved-beast {
  background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/blood-starved_beast.jpg');
  background-size: cover;
  background-position: center;
}

#btn-witch-of-hemwick {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/witch_of_hemwick.jpg');
    background-size: cover;
    background-position: center;
  }

  #btn-darkbeast-paarl {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/darkbeast_paarl.jpg');
    background-size: cover;
    background-position: center;
  }





#btn-shadow-of-yharnam {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/shadow_of_yharman.jpg');
    background-size: cover;
    background-position: center;
  }


#btn-rom {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/rom_the_vacuous_spider.jpg');
    background-size: cover;
    background-position: center;
  }



#btn-reborn {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/one_reborn.jpg');
    background-size: cover;
    background-position: center;
  }


#btn-martyr-logarius {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/Martyr_Logarius.jpg');
    background-size: cover;
    background-position: center;
  }


#btn-amygdala {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/Amygdala.jpg');
    background-size: cover;
    background-position: center;
  }



#btn-celestial-emissary {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/Celestial_Emissary.jpg');
    background-size: cover;
    background-position: center;
  }



#btn-daughter-of-cosmos {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/ebrietas.jpg');
    background-size: cover;
    background-position: center;
  }



#btn-micolash {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/micolash.jpg');
    background-size: cover;
    background-position: center;
  }


#btn-nurse {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/mergos_wet_nurse.jpg');
    background-size: cover;
    background-position: center;
  }


#btn-gehrman {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/gehrman_the_first_hunter.jpg');
    background-size: cover;
    background-position: center;
  }


  #btn-moon {
    background: url('https://bloodborne.wiki.fextralife.com/file/Bloodborne/moon_presence.jpg');
    background-size: cover;
    background-position: center;
  }


  /* bottom half */
  #button-display {
      height: 80vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  
  #btn-container {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  justify-content: center;
    margin-bottom: 100px;
  }
  
  #btn-container button {
    background-color: rgba(0,0,0,0.7);
    border: 1px solid black;
    padding: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 20px;
    margin-right: 20px;
    transition: .3s all ease-in-out
  }
  
  #btn-container button:hover {
     background-color: rgba(255,255,255,0.9);
    border: none;
    box-shadow: 0 0 10px crimson, 0 0 15px black;
  }