html,body{
  height: 100%;
  /* background: #A5C6E4; */
  /* background:#F2F2F2; */
  font-family: 'Roboto', sans-serif;
}
 img{
   width: 100%
 }

nav {
  box-shadow: 1px 1px 3px black;
}

.main_title{
  color:white;
  text-shadow: 1px 1px 5px black;
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: 3px;
  font-size: 6em;

}

.sub_title{
  color:white;
  text-shadow: 1px 1px 5px black;
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: 3px;


}

.start_nav_buttons{
  /* background: #B2C6E4;
  outline: #B2C6E4; */
  font-size: 5em;
  font-family: 'Roboto', sans-serif;
  box-shadow: 0px 0px 5px black;

}

.nav_buttons{
  /* background: #B2C6E4;
  outline: #B2C6E4; */
  letter-spacing: 3px;
  font-family: 'Luckiest Guy', cursive;
  text-shadow: 2px 2px 5px black;
  box-shadow: 1px 1px 5px black;
  /* width:95%; */
  height: 30vh;
  font-size:2.5rem;
  color: white;

}

.btn-primary:hover{
  color: white;
}

 .exptitle{
   background:#B2C6E4;
   color:white;
   text-shadow: 1px 1px 3px black;
   font-family: 'Luckiest Guy', cursive;
   letter-spacing: 3px;
   font-size: 3em;
   box-shadow: 0px 0px 3px black;


 }

.herd_buttons{
   box-shadow: 0px 0px 2px black;
 }

 .herd_txt{
    color: #F2F2F2;
    text-shadow: 1px 1px 5px black;
    font-family: 'Roboto', sans-serif;
    text-align: justify;
    text-justify: inter-word;
    text-align-last: center;


  }



.herd_svg{
 max-width: 10em;
}

#broad_svg{
  max-width: 20em;
}

#broaddeath{
  font-weight: 600;
}

.herd_description{
  text-align: justify;
  text-justify: inter-word;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;

}

#description{
  text-align: justify;
  text-justify: inter-word;


}

/* text Adventure */
.text_adv_txt{
   color: #F2F2F2;
   /* font-size: 80%; */
   text-shadow: 1px 1px 5px black;
   font-family: 'Roboto', sans-serif;
   text-align: justify;
   text-justify: inter-word;
   text-align-last: center;

 }

 #button_holder{
   max-height: 40vh;
 }

.btn-primary{
  color: white;
}


.dot_demo{
 width: 1em;
 height: 1em;
 background: grey;
 border-radius: 50%;
 margin: 0.5em;
 display: inline-block;
 /* 	border: 1px solid black; */
}

 .dot {
 	width: .5em;
 	height: .5em;
 	background: grey;
 	border-radius: 70%;
 	margin: 0.1em;
 	display: inline-block;
 	/* 	border: 1px solid black; */
 }



 .hide {
 	visibility: hidden;
  position: absolute;

 }

 .hidebutton{
   visibility: hidden;
 }

.chidden{
  display: none
}


 .red {
 	background: red;
 }

 .red_demo {
  background: red;
 }

 .sick_demo {
   background: #FF5964;
 }

 .blue {
 	background: #05B4FF;
 }

 .blue_demo {
 	background: #05B4FF;
 }

 .grey{

 }

 .fail{
   color: red;
 }

.pass{
  color: green;
}

#no_start_choice_buttons{


}


.resource_text{
   color: #F2F2F2;
   /* font-size: 80%; */
   text-shadow: 1px 1px 5px black;
   font-family: 'Roboto', sans-serif;
   text-align: center;

 }

 .resource_buttons{
    box-shadow: .5px .5px 5px black;
  }

#external_window{
  width: 100vw;
  height: 700px;
}

 #grey_demo{
   background: grey;
   width: 1em;
   height: 1em;
   background: grey;
   border-radius: 50%;
   position: absolute;
   right: -1.5em;
   bottom:-.01em
 }

#button_one{
  border-radius:90%;
  width:4em;
  height:4em;
  display: inline-block;
  font-size: 1.5rem;
}

.warning_text{
  color: red;
}



/* range css written by https://www.cssportal.com/style-input-range/ */

 #a[type=range] {
   height: 36px;
   -webkit-appearance: none;
   margin: 10px 0;
   width: 100%;
 }
 #a[type=range]:focus {
   outline: none;
 }
 #a[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 5px #000000;
   background: #FFFDFC;
   border-radius: 5px;
   border: 0px solid #000000;
 }
 #a[type=range]::-webkit-slider-thumb {
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #FF0000;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -10px;
 }
 #a[type=range]:focus::-webkit-slider-runnable-track {
   background: #FFFDFC;
 }
 #a[type=range]::-moz-range-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 5px #000000;
   background: #FFFDFC;
   border-radius: 5px;
   border: 0px solid #000000;
 }
 #a[type=range]::-moz-range-thumb {
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #FF0000;
   cursor: pointer;
 }
 #a[type=range]::-ms-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   background: transparent;
   border-color: transparent;
   color: transparent;
 }
 #a[type=range]::-ms-fill-lower {
   background: #FFFDFC;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 1px 1px 5px #000000;
 }
 #a[type=range]::-ms-fill-upper {
   background: #FFFDFC;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 1px 1px 5px #000000;
 }
 #a[type=range]::-ms-thumb {
   margin-top: 1px;
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #FF0000;
   cursor: pointer;
 }
 #a[type=range]:focus::-ms-fill-lower {
   background: #FFFDFC;
 }
 #a[type=range]:focus::-ms-fill-upper {
   background: #FFFDFC;
 }


 #r[type=range] {
   height: 36px;
   -webkit-appearance: none;
   margin: 10px 0;
   width: 100%;
 }
 #r[type=range]:focus {
   outline: none;
 }
 #r[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 5px #000000;
   background: #FFFDFC;
   border-radius: 5px;
   border: 0px solid #000000;
 }
 #r[type=range]::-webkit-slider-thumb {
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #FF5964;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -10px;
 }
 #r[type=range]:focus::-webkit-slider-runnable-track {
   background: #FFFDFC;
 }
 #r[type=range]::-moz-range-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 5px #000000;
   background: #FFFDFC;
   border-radius: 5px;
   border: 0px solid #000000;
 }
 #r[type=range]::-moz-range-thumb {
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #FF5964;
   cursor: pointer;
 }
 #r[type=range]::-ms-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   background: transparent;
   border-color: transparent;
   color: transparent;
 }
 #r[type=range]::-ms-fill-lower {
   background: #FFFDFC;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 1px 1px 5px #000000;
 }
 #r[type=range]::-ms-fill-upper {
   background: #FFFDFC;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 1px 1px 5px #000000;
 }
 #r[type=range]::-ms-thumb {
   margin-top: 1px;
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #FF5964;
   cursor: pointer;
 }
 #r[type=range]:focus::-ms-fill-lower {
   background: #FFFDFC;
 }
 #r[type=range]:focus::-ms-fill-upper {
   background: #FFFDFC;
 }

 #v[type=range] {
   height: 36px;
   -webkit-appearance: none;
   margin: 10px 0;
   width: 100%;
 }
 #v[type=range]:focus {
   outline: none;
 }
 #v[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 5px #000000;
   background: #FFFDFC;
   border-radius: 5px;
   border: 0px solid #000000;
 }
 #v[type=range]::-webkit-slider-thumb {
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #05B4FF;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -10px;
 }
 #v[type=range]:focus::-webkit-slider-runnable-track {
   background: #FFFDFC;
 }
 #v[type=range]::-moz-range-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 5px #000000;
   background: #FFFDFC;
   border-radius: 5px;
   border: 0px solid #000000;
 }
 #v[type=range]::-moz-range-thumb {
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #05B4FF;
   cursor: pointer;
 }
 #v[type=range]::-ms-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   background: transparent;
   border-color: transparent;
   color: transparent;
 }
 #v[type=range]::-ms-fill-lower {
   background: #FFFDFC;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 1px 1px 5px #000000;
 }
 #v[type=range]::-ms-fill-upper {
   background: #FFFDFC;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 1px 1px 5px #000000;
 }
 #v[type=range]::-ms-thumb {
   margin-top: 1px;
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #05B4FF;
   cursor: pointer;
 }
 #v[type=range]:focus::-ms-fill-lower {
   background: #FFFDFC;
 }
 #v[type=range]:focus::-ms-fill-upper {
   background: #FFFDFC;
 }

 #hitslider[type=range] {
   height: 36px;
   -webkit-appearance: none;
   margin: 10px 0;
   width: 100%;
 }
 #hitslider[type=range]:focus {
   outline: none;
 }
 #hitslider[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 5px #000000;
   background: #FFFDFC;
   border-radius: 5px;
   border: 0px solid #000000;
 }
 #hitslider[type=range]::-webkit-slider-thumb {
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #FF5964;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -10px;
 }
 #hitslider[type=range]:focus::-webkit-slider-runnable-track {
   background: #FFFDFC;
 }
 #hitslider[type=range]::-moz-range-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 5px #000000;
   background: #FFFDFC;
   border-radius: 5px;
   border: 0px solid #000000;
 }
 #hitslider[type=range]::-moz-range-thumb {
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #FF5964;
   cursor: pointer;
 }
 #hitslider[type=range]::-ms-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   background: transparent;
   border-color: transparent;
   color: transparent;
 }
 #hitslider[type=range]::-ms-fill-lower {
   background: #FFFDFC;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 1px 1px 5px #000000;
 }
 #hitslider[type=range]::-ms-fill-upper {
   background: #FFFDFC;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 1px 1px 5px #000000;
 }
 #hitslider[type=range]::-ms-thumb {
   margin-top: 1px;
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #FF5964;
   cursor: pointer;
 }
 #hitslider[type=range]:focus::-ms-fill-lower {
   background: #FFFDFC;
 }
 #hitslider[type=range]:focus::-ms-fill-upper {
   background: #FFFDFC;
 }


 #deathslider[type=range] {
   height: 36px;
   -webkit-appearance: none;
   margin: 10px 0;
   width: 100%;
 }
 #deathslider[type=range]:focus {
   outline: none;
 }
 #deathslider[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 5px #000000;
   background: #FFFDFC;
   border-radius: 5px;
   border: 0px solid #000000;
 }
 #deathslider[type=range]::-webkit-slider-thumb {
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: black;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -10px;
 }
 #deathslider[type=range]:focus::-webkit-slider-runnable-track {
   background: #FFFDFC;
 }
 #deathslider[type=range]::-moz-range-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 5px #000000;
   background: #FFFDFC;
   border-radius: 5px;
   border: 0px solid #000000;
 }
 #deathslider[type=range]::-moz-range-thumb {
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: black;
   cursor: pointer;
 }
 #deathslider[type=range]::-ms-track {
   width: 100%;
   height: 10px;
   cursor: pointer;
   animate: 0.2s;
   background: transparent;
   border-color: transparent;
   color: transparent;
 }
 #deathslider[type=range]::-ms-fill-lower {
   background: #FFFDFC;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 1px 1px 5px #000000;
 }
 #deathslider[type=range]::-ms-fill-upper {
   background: #FFFDFC;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 1px 1px 5px #000000;
 }
 #deathslider[type=range]::-ms-thumb {
   margin-top: 1px;
   box-shadow: 0px 0px 4px #000000;
   border: 0px solid #000000;
   height: 30px;
   width: 30px;
   border-radius: 50px;
   background: #FF5964;
   cursor: pointer;
 }
 #deathslider[type=range]:focus::-ms-fill-lower {
   background: #FFFDFC;
 }
 #deathslider[type=range]:focus::-ms-fill-upper {
   background: #FFFDFC;
 }