body {
  margin:0px;
}
.center {
  margin: 0px;
  line-break: anywhere;
}

.clickhov{
  position: relative;
  transition: all .2s ease-in-out;
  cursor: pointer;
  top: 15;
  image-rendering: pixelated;
} 

@keyframes clicklove {
	0% {transform: scale(1.04);}
	50% {transform: scale(1.0);}
	100% {transform: scale(1.04);}
}

.clickhov:active {
  animation: clicklove 0.2s linear -0.1s 1 normal backwards;
  box-shadow: 0px 0px 0 0 #4D5259;
}
.clickhov:hover {
  transform: scale(1.04);
  image-rendering: pixelated;
}

.settings {
  font-size: 10px;
  color: #4D5259;
  line-height: 1.5;
  font-weight: bold;
  padding: .5em 2em;
  background: #FFFFFF;
  border: 2px solid #4D5259;
  box-shadow: 4px 4px 0 0 #4D5259;
  outline:0;
}

.settings:active {
  transform: translateY(4px) translateX(4px);
  box-shadow: 0px 0px 0 0 #4D5259;
}
.settings:hover {
  background: #d3d3d3;
}

.btns {
	background-color: #7f6d51; 
	width: auto; 
	text-align: center; 
	font-weight: bold; 
	color: white;
	opacity: 0.5;
	transition: 0.5s;
	border-width: 0px;
  margin-bottom: 5px;
}

.btns:hover {
	background-color: #7f6d51; 
	width: auto;
	text-align: center; 
	font-weight: bold; 
	color: white;
	opacity: 1.0;
	transform: scale(1.08);
}

.statsbg {
	background-color: #7f6d51; 
	padding: 10px; 
	width: auto;
	text-align: center; 
	font-weight: bold; 
	color: white;
	opacity: 1.0;
	transform: scale(1.08);
	padding-left: 30px;
	padding-right: 30px;
}

.levelbg {
	width: auto;
	height: auto;
	background-image: url('../img/master/contbgtempMID.jpg');
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 20px;
	padding: 10px;
	box-shadow: 0px 0px 5px 4px rgb(0 0 0 / 30%); 
	border-width: 3px; 
	border-style: ridge; 
	border-color: #d9ac59;
	text-shadow: 1px 1px 1px #000000;
	border-radius: 50px;
}

/* Collapse upgrades */
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-bottom: 10px;
  border: 2px solid #99804b;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%), 0 2px 5px 0 rgb(0 0 0 / 30%);
  background-image: url("../img/master/navback.jpg");
  text-shadow: 1px 1px 1px #000000;
  background-position-x: center;
}

.active, .collapsible:hover {
  background-color: #5550;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #c2ab7173;
  margin-bottom: 10px;
  margin-top: -10px;
  font-size: 20px; 
  text-shadow: rgb(0, 0, 0) 2px 2px 2px; 
  background-color: #ffffff00; 
  text-align: center;
} 

.contentPatch {
  overflow: hidden;
  transition: max-height 0.1s ease-out;
  margin-bottom: 10px;
  margin-top: -10px;
  font-size: 16px; 
  background-color: #86693b78;
  max-height: 0px;
} 

.collapsible:after {
  content: '\21B4'; /* Unicode character for "down arrow" */
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  /* Unicode character for "minus" sign (-) */
}

/* SLIDE TEST */

#slider{
  background:blue;
  /* height:500px; */
  width:200px;
  position:absolute;
  left:-520px;
  top: 30px;
  background-image: url('../img/master/contbgtempMID.jpg');
  border-radius: 10px;
  border-width: 2px;
  border-color: black;
  border-style: solid;
}

#slider1{
  background:yellow;
  height:500px;
  width:200px;
  position:absolute;
  left:-520px;
}

#slider2{
  background:red;
  height:500px;
  width:200px;
  position:absolute;
  left:-520px;
}

.open{
  left:0px !important;
  
}
.transition{
  
-webkit-transition: left 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
   -moz-transition: left 0.3s ease-out;  /* Firefox 4-15 */
     -o-transition: left 0.3s ease-out;  /* Opera 10.50–12.00 */
        transition: left 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */

}

/* TAB TESTING */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #5b3d00;
  background: linear-gradient(180deg, rgba(101,68,3,1) 0%, rgba(153,123,62,1) 100%);
  border-radius: 0px 10px 0px 0px;
  display: flex;
  justify-content: center;
  border-top-right-radius: 0px;
  height: 50px;
  font-size: medium;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  width: 100px;
  transition: 0.3s;
  font-weight: bold;
  text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #cea655;
}

/* Create an active/current tablink class */
.tab button.active {
  background: linear-gradient(180deg, rgba(153,123,62,1) 0%, rgba(101,68,3,1) 100%);
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 3px 1px;
  border: 1px solid #5b3d00;
  border-top: none;
}

/* CLICKER EXTRAS/HEALTH */

.healthContainer {
  position: relative;
  height: 20px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 2px;
  border-color: black;
  border-radius: 20px;
  background-color: bisque;
}

.healthBar {
  position: absolute; /* relative shows in middle, change to absolute for left to right health */
  width: 100%;
  height: 100%;
  transition: width 0.5s linear;
  background: linear-gradient(0deg, rgb(255 0 0) 0%, rgb(147 0 0) 100%);
  border-radius: 20px;
}

.number {
  z-index: 99;
  font-size: 24px;
  color: white;
  position: absolute;
}

.unselectable {
  user-select: none;
}

.legbtn {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 2px solid #99804b;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%), 0 2px 5px 0 rgb(0 0 0 / 30%);
  background-image: url("../img/master/navback.jpg");
  text-shadow: 1px 1px 1px #000000;
  background-position-x: center;
  transition: 0.2s;
}

.legbtn:hover {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 2px solid #99804b;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%), 0 2px 5px 0 rgb(0 0 0 / 30%);
  background-image: url("../img/master/navback.jpg");
  text-shadow: 1px 1px 1px #000000;
  background-position-x: center;
  filter: brightness(1.1);
}

.patchimg {
  box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.3);
  margin-top: 10px;
  margin-bottom: 10px;
}

/* EXTRA ADDITONS */
/* The alert message box */
.alert {
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    width: 80%;
    border: 1px solid black;
    margin: auto;
    margin-top: 10px;
    text-align: center;
    max-width: 720px;
    text-shadow: 1px 1px 1px #000000;
}

/*FLASH ALERT*/
@keyframes NAME-YOUR-ANIMATION {
  0%, 49% {
      background-color: #7a00008a;
      border: 3px solid #7a0000;
  }
  50%, 100% {
      background-color: #b800008a;
      border: 3px solid #b80000;
  }
  }

.alert.success {background-color: #04aa6dc9; box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%), 0 1px 10px 0 rgb(0 0 0 / 40%);}
.alert.danger {background-color: #7a00008a; box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%), 0 1px 10px 0 rgb(0 0 0 / 40%); animation: NAME-YOUR-ANIMATION 1s infinite;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.story{
  width: fit-content; 
  height: 300px; 
  position: absolute;
  background-color: #56560b; 
  z-index: 100; 
  left: 0; 
  right: 0; 
  margin-inline: auto;
  height: auto;
  padding: 10px;
  top: 25%;
  background-image: url('../img/master/contbgtempMID.jpg'); 
	background-repeat: repeat; 
  border-radius: 26px; 
	box-shadow: 0px 0px 5px 4px rgb(0 0 0 / 30%); 
	border-width: 3px; 
	border-style: ridge; 
	border-color: #d9ac59;
	text-shadow: 1px 1px 1px #000000;
}

.fullscreen, .bossbattle {
  width: 100%; 
  height: 100%; 
  background-color: #000000cc; 
  z-index: 100; 
  position: absolute; 
  display: block;
}



/* NEW CLICKER STYLES */
.next-level-info {
  background-color: #cea655; 
  height: 40px;
  width: 192px;
  position: relative;
  text-align: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.left-section {
  padding-left: 10px;
  padding-top: 5px;
}

.upgrade:hover .next-level-info {
  display: block;
}

.upgrade {
  margin-bottom: 10px;
}

.fade-up {
  animation: fade-up 2s;
}

@keyframes fade-up {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-65px);
    opacity: 0;
  }
}

.gem-img-container {
  position: relative;
}

.Healthnum {
  width: auto;
  padding: 5px;
  border-radius: 5px;
  background-color: #977a41;
  margin-top: 5px;
  border: #5b3d00 2px solid;
  display: inline-block;
  text-shadow: 2px 2px 2px #000000;
  padding-left: 10px;
  padding-right: 10px;
}

.experience-bar-container {
  margin-top: 5px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

@keyframes heartFadeInOut {
  0% {transform: scale(1);}
  25% {transform: scale(.97);}
  35% {transform: scale(.9);}
  45% {transform: scale(1.1);}
  55% {transform: scale(.9);}
  65% {transform: scale(1.1);}
  75% {transform: scale(1.03);}
  100% {transform: scale(1);}
}

#heart {
  width: 30px;
}

#heart img.bottom { 
  animation-name: heartFadeInOut; 
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

#bossmain1, #bossmain2 {
  transition: opacity 0.2s;
}

/* Avas click function */
#Ava1, #Ava2, #Medal1, #Medal2, #Medal3, #Medal4, #Medal5, #Medal6 {
  cursor: pointer;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

.fade { animation: fade 1.5s; } @keyframes fade { from {opacity: .7} to {opacity: 1} }

/*reset boss button style */
#fightagain, #fightagain1, #fightagain3 {
  border-radius: 5px;
  background-color: burlywood;
  color: black;
}