.wrapper_container {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 overflow: hidden;
	 user-select: none;
}
 .wrapper {
	 user-select: none;
	 width: 1024px;
}
 .scenes {
	 overflow: hidden;
	 width: 1024px;
}
 .scene_container {
	 background-color: #fff;
	 border: solid 2px #000;
	 box-shadow: 0 6px 6px -6px #000;
	 display: inline-block;
	 overflow: hidden;
	 position: relative;
	 margin-left: 10px;
	 margin-bottom: 10px;
	 margin-top: -5px;
	 width: 1024px;
	 height: 600px;
	 animation: appearance 1s;
}
 .text {
	 background-color: #fff;
	 border: solid 2px #000;
	 margin: 0;
	 padding: 8px 10px;
	 display: inline-block;
}
 .top-left {
	 left: -6px;
	 top: -2px;
	 transform: skew(-15deg);
	 position: absolute;
}
 .top-right {
	 right: 0px;
	 top: 1px;
	 transform: skew(-15deg);
	 position: absolute;
	 overflow: hidden;
}
 .bottom-right {
	 bottom: -2px;
	 right: -6px;
	 transform: skew(-15deg);
	 position: absolute;
}
 .speech {
	 background-color: #fff;
	 border: solid 2px #000;
	 border-radius: 12px;
	 display: inline-block;
	 margin: 0.5em;
	 padding: 0.5em 1em;
	 position: relative;
}
 .speech:before {
	 border: solid 12px transparent;
	 border-left: solid 12px #000;
	 border-top: solid 12px #000;
	 bottom: -24px;
	 content: "";
	 height: 0;
	 left: 24px;
	 transform: skew(-15deg);
	 width: 0;
	 position: absolute;
}
 .speech:after {
	 border: solid 10px transparent;
	 border-left: solid 10px #fff;
	 border-top: solid 10px #fff;
	 bottom: -19px;
	 content: "";
	 height: 0;
	 left: 27px;
	 transform: skew(-15deg);
	 width: 0;
}
 .scene_slide0 img {
	 margin-top: -30px;
}
 .scene_slide0 {
	 background: black;
}
 .thanks_container {
	 border: solid 5px white;
	 width: 420px;
	 right: 80px;
	 top: 50px;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 position: absolute;
	 z-index: 2;
}
 .thanks {
	 margin: 5px;
	 width: 400px;
	 color: white;
}
 .start_count-button {
	 background: white;
	 color: black;
	 text-transform: uppercase;
	 font-weight: bold;
	 border: solid 3px white;
	 padding: 5px;
	 width: 135px;
	 transform: skew(-15deg);
	 position: absolute;
	 cursor: pointer;
	 right: 220px;
	 top: 500px;
	 z-index: 2;
}
 .start_count-button:hover {
	 color: white;
	 background: black;
}
 .count_subs-container {
	 background: white;
	 transform: rotate(-15deg) skew(-30deg, 0deg);
	 width: 350px;
	 height: 300px;
	 z-index: 1;
	 top: 210px;
	 left: 80px;
	 position: absolute;
}
 .count_subs {
	 background: black;
	 color: white;
	 transform: rotate(-1deg) skew(-2deg, 0deg);
	 height: 280px;
	 width: 330px;
	 margin-left: 10px;
	 margin-top: 10px;
	 overflow: hidden;
}
 .count_subs img {
	 transform: rotate(0deg) skew(2deg, 0deg);
	 width: 410px;
	 margin-left: -20px;
}
 .chapter_title {
	 color: white;
	 font-weight: bold;
	 font-size: 2em;
	 text-align: center;
	 animation: appearance 10s;
	 opacity: 0;
	 margin: auto;
}
 @keyframes appearance {
	 100% {
		 opacity: 0;
	}
	 50% {
		 opacity: 1;
	}
	 0% {
		 opacity: 0;
	}
}
 .scene_slide2, .scene_slide3 {
	 display: flex;
	 background-color: black;
	 background-image: url(https://i.imgur.com/s2hcKad.jpg);
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
}
 .scene_slide3 {
	 background-image: url(https://i.imgur.com/odqTMkw.jpg);
}
 .container_panel_dialog, .container_panel_dialog2 {
	 order: solid 1px black;
	 width: 100%;
	 height: 130px;
	 transform: rotate(2deg) skew(0deg, -2deg);
	 background: black;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 z-index: 3;
}
 .panel_dialog {
	 border: solid 1px black;
	 width: 92%;
	 height: 100px;
	 padding: 5px;
	 transform: rotate(1deg) skew(0deg, -2deg);
	 background: black;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 background: white;
	 z-index: 3;
}
 .button_scene_slide2, .button_scene_slide2_1, .dialog_button {
	 font-weight: bold;
	 cursor: pointer;
	 margin-top: 15px;
	 margin-left: 82%;
	 border: solid 2px black;
	 transform: rotate(1deg) skew(0deg, -2deg);
	 padding: 2px;
	 background: black;
	 color: white;
	 user-select: none;
	 z-index: 4;
}
 .button_scene_slide2:hover, .button_scene_slide2_1:hover, .dialog_button:hover {
	 background: white;
	 color: black;
}
 .button_scene_slide2:active, .button_scene_slide2_1:active, .dialog_button:active {
	 background: black;
	 color: white;
}
/*Bat attack*/
 .bat_attack, .bat_attack2 {
	 margin-top: -95px;
	 width: 800px;
	 height: 500px;
	/*border: 1px solid white;
	*/
	 position: absolute;
	 z-index: 2;
}
 .dot, .dot2 {
	 height: 146px;
	 width: 200px;
	 top: 50%;
	 left: 50%;
	 animation: mymove 10s;
	 position: absolute;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 transform: scale(0);
	 z-index: 2;
	 background-image: url("https://i.imgur.com/MdF9XDd.gif");
	 text-align: center;
}
 .dot img {
	 z-index: 0;
}
 @keyframes mymove {
	 100% {
		 transform: scale(1.5);
	}
	 0% {
		 transform: scale(0);
	}
}
 body {
	 background: black;
}
 .key_button {
	 color: white;
	 font-size: 1rem;
	 font-weight: bold;
	 color: #f73718;
	 text-shadow: 0 0 15px #f73718, 0 0 10px #f73718;
	 margin-left: -5px;
}
 .attack_counter, .miss_counter {
	 color: white;
	 width: 200px;
	 height: 200px;
	 border: solid 1 px white;
	 position: absolute;
	 display: none;
}
 .miss_counter {
	 margin-left: -50px;
	 display: none;
}
 .bat_attack {
	 display: flex;
	 margin-top: 50px;
	 margin-left: 50px;
	 width: 900px;
	 z-index: 1;
}
 .monster_fight {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 overflow: hidden;
}
 .spellbook_container {
	 width: 1024px;
	 height: 600px;
	 display: flex;
	 justify-content: center;
	 align-items: flex-end;
	 background: #010000;
	 overflow: hidden;
}
 .spell_book {
	 z-index: 2;
	 margin-bottom: -180px;
	 user-select: none;
}
 .spell {
	 width: 150px;
	 height: 150px;
	 display: grid;
	 grid-template-columns: repeat(5, 1fr);
	 grid-template-rows: repeat(5, 1fr);
	 border-radius: 5px;
	 z-index: 2;
	 position: absolute;
	 margin-top: 20px;
	 margin-left: 260px;
	 user-select: none;
}
 .spell_mark {
	 width: 30px;
	 height: 30px;
	 border-radius: 50%;
	 margin: auto;
	 cursor: pointer;
	 opacity: 0.5;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 font_size: 1.2rem;
	 color: black;
	 font-weight: bold;
}
 .spell_mark:hover {
	 opacity: 1;
	 text-shadow: 0 0 15px #74a379, 0 0 10px #74a379;
	 color: #74a379;
}
 .spell_mark-selected {
	 opacity: 1;
	 text-shadow: 0 0 15px #74a379, 0 0 10px #74a379;
	 color: #74a379;
}
 .spellcast {
	 position: absolute;
	 top: 0px;
	 opacity: 0;
	 animation: magspell 5.5s;
	 display: none;
	 z-index: 3;
	 margin-top: 50px;
}
 .spellcast img {
	 margin-top: 0px;
	 height: 300px;
	 width: 300px;
}
 @keyframes magspell {
	 100% {
		 opacity: 0.8;
	}
	 0% {
		 opacity: 0.1;
	}
}
 .room_bg {
	 z-index: 0;
	 position: absolute;
	 overflow: hidden;
	 margin-top: -100px;
}
 .container_monster {
	 margin-top: 80px;
	 position: absolute;
	 z-index: 1;
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
 .container_items {
	 position: absolute;
	 z-index: 1;
	 right: 150px;
	 top: 500px;
}
 .magick_book {
	 cursor: pointer;
	 margin-top: -100px;
	 margin-left: 0px;
	 position: absolute;
	 z-index:6;
}
 .spell_book {
	 display: none;
}
 .cast-spell_button {
	 color: white;
	 font-size: 180px;
	 cursor: pointer;
	 position: absolute;
	 margin-left: 50px;
	 margin-top: -10px;
	 cursor: pointer;
}
 .cast-spell_button:hover {
	 color: #74a379;
	 text-shadow: 0 0 15px #74a379, 0 0 10px #74a379;
}
 .cast-spell_button-cast {
	 color: #f73718;
	 text-shadow: 0 0 15px #f73718, 0 0 10px #f73718;
}
 .cast-spell_button-cast:hover {
	 color: #f73718;
	 text-shadow: 0 0 15px #f73718, 0 0 10px #f73718;
}
/*Bat attack*/
 .bat_attack {
	 margin-top: -95px;
	 width: 800px;
	 height: 500px;
	/*border: 1px solid white;
	*/
	 position: absolute;
	 z-index: 2;
}
 .dot, .dot2 {
	 height: 146px;
	 width: 200px;
	 top: 50%;
	 left: 50%;
	 animation: mymove 10s;
	 position: absolute;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 transform: scale(0);
	 z-index: 2;
	 background-image: url("https://i.imgur.com/MdF9XDd.gif");
	 text-align: center;
}
 .dot img {
	 z-index: 0;
}
 @keyframes mymove {
	 100% {
		 transform: scale(1.5);
	}
	 0% {
		 transform: scale(0);
	}
}
 body {
	 background: black;
}
 .key_button {
	 color: white;
	 font-size: 1rem;
	 font-weight: bold;
	 color: #f73718;
	 text-shadow: 0 0 15px #f73718, 0 0 10px #f73718;
	 margin-left: -5px;
}
 .attack_counter, .miss_counter {
	 color: white;
	 width: 200px;
	 height: 200px;
	 border: solid 1 px white;
	 position: absolute;
	 display: none;
}
 .miss_counter {
	 margin-left: -50px;
	 display: none;
}
 .bat_attack {
	 display: flex;
}
 .hero_bars {
	 display: flex;
	 flex-direction: column;
	 position: absolute;
	 top: 500px;
	 transform: rotate(270deg);
	 margin-left: 900px;
	 margin-top: -100px;
}
 .hp-bar, .mana-bar {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
}
 .progress {
	 width: 450px;
	 font: 12px Arial, Tahoma, sans-serif;
	 position: relative;
	 overflow: hidden;
}
 .hp-bar .progress, .mana-bar .progress {
	 width: 300px;
	 position: absolute;
	 margin-left: 20px;
}
 .mana-bar .progress {
	 top: 10px;
}
 .exp-icon {
	 margin-top: 4px;
	 margin-left: 5px;
}
 .progress progress {
	 position: absolute;
	 width: 0;
	 height: 0;
	 overflow: hidden;
	 left: -777px;
}
 .progress-bar {
	 overflow: hidden;
	 background: #d2290a;
	 width: 0;
	 height: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
}
 .progress-value {
	 color: #333;
	 display: block;
	 line-height: 21px;
	 text-align: center;
	 display: none;
}
 .progress-bg {
	 background: #464644;
	 position: relative;
	 height: 15px;
	 border-radius: 15px;
	 overflow: hidden;
	 border: solid 2px black;
	 margin-bottom: 2px;
}
 .progress-bar:after {
	 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	 background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	 background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	 -webkit-background-size: 40px 40px;
	 background-size: 40px 40px;
	 position: absolute;
	 content: '';
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
}
 @keyframes progress_bar {
	 0% {
		 background-position: 0 0;
	}
	 100% {
		 background-position: -40px 0;
	}
}
 .progress-bar {
	 transition: width 1s linear;
}
 .progress-bar:after {
	 animation: progress_bar 0.8s linear infinite;
}
 .progress progress[value="1"] + .progress-value:before {
	 content: "1%";
}
 .progress progress[value="1"] ~ .progress-bg .progress-bar {
	 width: 1%;
}
 .progress progress[value="0"] + .progress-value:before {
	 content: "0%";
}
 .progress progress[value="0"] ~ .progress-bg .progress-bar {
	 width: 0%;
}
 .progress progress[value="1"] + .progress-value:before {
	 content: "1%";
}
 .progress progress[value="1"] ~ .progress-bg .progress-bar {
	 width: 1%;
}
 .progress progress[value="2"] + .progress-value:before {
	 content: "2%";
}
 .progress progress[value="2"] ~ .progress-bg .progress-bar {
	 width: 2%;
}
 .progress progress[value="3"] + .progress-value:before {
	 content: "3%";
}
 .progress progress[value="3"] ~ .progress-bg .progress-bar {
	 width: 3%;
}
 .progress progress[value="4"] + .progress-value:before {
	 content: "4%";
}
 .progress progress[value="4"] ~ .progress-bg .progress-bar {
	 width: 4%;
}
 .progress progress[value="5"] + .progress-value:before {
	 content: "5%";
}
 .progress progress[value="5"] ~ .progress-bg .progress-bar {
	 width: 5%;
}
 .progress progress[value="6"] + .progress-value:before {
	 content: "6%";
}
 .progress progress[value="6"] ~ .progress-bg .progress-bar {
	 width: 6%;
}
 .progress progress[value="7"] + .progress-value:before {
	 content: "7%";
}
 .progress progress[value="7"] ~ .progress-bg .progress-bar {
	 width: 7%;
}
 .progress progress[value="8"] + .progress-value:before {
	 content: "8%";
}
 .progress progress[value="8"] ~ .progress-bg .progress-bar {
	 width: 8%;
}
 .progress progress[value="9"] + .progress-value:before {
	 content: "9%";
}
 .progress progress[value="9"] ~ .progress-bg .progress-bar {
	 width: 9%;
}
 .progress progress[value="10"] + .progress-value:before {
	 content: "10%";
}
 .progress progress[value="10"] ~ .progress-bg .progress-bar {
	 width: 10%;
}
 .progress progress[value="11"] + .progress-value:before {
	 content: "11%";
}
 .progress progress[value="11"] ~ .progress-bg .progress-bar {
	 width: 11%;
}
 .progress progress[value="12"] + .progress-value:before {
	 content: "12%";
}
 .progress progress[value="12"] ~ .progress-bg .progress-bar {
	 width: 12%;
}
 .progress progress[value="13"] + .progress-value:before {
	 content: "13%";
}
 .progress progress[value="13"] ~ .progress-bg .progress-bar {
	 width: 13%;
}
 .progress progress[value="14"] + .progress-value:before {
	 content: "14%";
}
 .progress progress[value="14"] ~ .progress-bg .progress-bar {
	 width: 14%;
}
 .progress progress[value="15"] + .progress-value:before {
	 content: "15%";
}
 .progress progress[value="15"] ~ .progress-bg .progress-bar {
	 width: 15%;
}
 .progress progress[value="16"] + .progress-value:before {
	 content: "16%";
}
 .progress progress[value="16"] ~ .progress-bg .progress-bar {
	 width: 16%;
}
 .progress progress[value="17"] + .progress-value:before {
	 content: "17%";
}
 .progress progress[value="17"] ~ .progress-bg .progress-bar {
	 width: 17%;
}
 .progress progress[value="18"] + .progress-value:before {
	 content: "18%";
}
 .progress progress[value="18"] ~ .progress-bg .progress-bar {
	 width: 18%;
}
 .progress progress[value="19"] + .progress-value:before {
	 content: "19%";
}
 .progress progress[value="19"] ~ .progress-bg .progress-bar {
	 width: 19%;
}
 .progress progress[value="20"] + .progress-value:before {
	 content: "20%";
}
 .progress progress[value="20"] ~ .progress-bg .progress-bar {
	 width: 20%;
}
 .progress progress[value="21"] + .progress-value:before {
	 content: "21%";
}
 .progress progress[value="21"] ~ .progress-bg .progress-bar {
	 width: 21%;
}
 .progress progress[value="22"] + .progress-value:before {
	 content: "22%";
}
 .progress progress[value="22"] ~ .progress-bg .progress-bar {
	 width: 22%;
}
 .progress progress[value="23"] + .progress-value:before {
	 content: "23%";
}
 .progress progress[value="23"] ~ .progress-bg .progress-bar {
	 width: 23%;
}
 .progress progress[value="24"] + .progress-value:before {
	 content: "24%";
}
 .progress progress[value="24"] ~ .progress-bg .progress-bar {
	 width: 24%;
}
 .progress progress[value="25"] + .progress-value:before {
	 content: "25%";
}
 .progress progress[value="25"] ~ .progress-bg .progress-bar {
	 width: 25%;
}
 .progress progress[value="26"] + .progress-value:before {
	 content: "26%";
}
 .progress progress[value="26"] ~ .progress-bg .progress-bar {
	 width: 26%;
}
 .progress progress[value="27"] + .progress-value:before {
	 content: "27%";
}
 .progress progress[value="27"] ~ .progress-bg .progress-bar {
	 width: 27%;
}
 .progress progress[value="28"] + .progress-value:before {
	 content: "28%";
}
 .progress progress[value="28"] ~ .progress-bg .progress-bar {
	 width: 28%;
}
 .progress progress[value="29"] + .progress-value:before {
	 content: "29%";
}
 .progress progress[value="29"] ~ .progress-bg .progress-bar {
	 width: 29%;
}
 .progress progress[value="30"] + .progress-value:before {
	 content: "30%";
}
 .progress progress[value="30"] ~ .progress-bg .progress-bar {
	 width: 30%;
}
 .progress progress[value="31"] + .progress-value:before {
	 content: "31%";
}
 .progress progress[value="31"] ~ .progress-bg .progress-bar {
	 width: 31%;
}
 .progress progress[value="32"] + .progress-value:before {
	 content: "32%";
}
 .progress progress[value="32"] ~ .progress-bg .progress-bar {
	 width: 32%;
}
 .progress progress[value="33"] + .progress-value:before {
	 content: "33%";
}
 .progress progress[value="33"] ~ .progress-bg .progress-bar {
	 width: 33%;
}
 .progress progress[value="34"] + .progress-value:before {
	 content: "34%";
}
 .progress progress[value="34"] ~ .progress-bg .progress-bar {
	 width: 34%;
}
 .progress progress[value="35"] + .progress-value:before {
	 content: "35%";
}
 .progress progress[value="35"] ~ .progress-bg .progress-bar {
	 width: 35%;
}
 .progress progress[value="36"] + .progress-value:before {
	 content: "36%";
}
 .progress progress[value="36"] ~ .progress-bg .progress-bar {
	 width: 36%;
}
 .progress progress[value="37"] + .progress-value:before {
	 content: "37%";
}
 .progress progress[value="37"] ~ .progress-bg .progress-bar {
	 width: 37%;
}
 .progress progress[value="38"] + .progress-value:before {
	 content: "38%";
}
 .progress progress[value="38"] ~ .progress-bg .progress-bar {
	 width: 38%;
}
 .progress progress[value="39"] + .progress-value:before {
	 content: "39%";
}
 .progress progress[value="39"] ~ .progress-bg .progress-bar {
	 width: 39%;
}
 .progress progress[value="40"] + .progress-value:before {
	 content: "40%";
}
 .progress progress[value="40"] ~ .progress-bg .progress-bar {
	 width: 40%;
}
 .progress progress[value="41"] + .progress-value:before {
	 content: "41%";
}
 .progress progress[value="41"] ~ .progress-bg .progress-bar {
	 width: 41%;
}
 .progress progress[value="42"] + .progress-value:before {
	 content: "42%";
}
 .progress progress[value="42"] ~ .progress-bg .progress-bar {
	 width: 42%;
}
 .progress progress[value="43"] + .progress-value:before {
	 content: "43%";
}
 .progress progress[value="43"] ~ .progress-bg .progress-bar {
	 width: 43%;
}
 .progress progress[value="44"] + .progress-value:before {
	 content: "44%";
}
 .progress progress[value="44"] ~ .progress-bg .progress-bar {
	 width: 44%;
}
 .progress progress[value="45"] + .progress-value:before {
	 content: "45%";
}
 .progress progress[value="45"] ~ .progress-bg .progress-bar {
	 width: 45%;
}
 .progress progress[value="46"] + .progress-value:before {
	 content: "46%";
}
 .progress progress[value="46"] ~ .progress-bg .progress-bar {
	 width: 46%;
}
 .progress progress[value="47"] + .progress-value:before {
	 content: "47%";
}
 .progress progress[value="47"] ~ .progress-bg .progress-bar {
	 width: 47%;
}
 .progress progress[value="48"] + .progress-value:before {
	 content: "48%";
}
 .progress progress[value="48"] ~ .progress-bg .progress-bar {
	 width: 48%;
}
 .progress progress[value="49"] + .progress-value:before {
	 content: "49%";
}
 .progress progress[value="49"] ~ .progress-bg .progress-bar {
	 width: 49%;
}
 .progress progress[value="50"] + .progress-value:before {
	 content: "50%";
}
 .progress progress[value="50"] ~ .progress-bg .progress-bar {
	 width: 50%;
}
 .progress progress[value="51"] + .progress-value:before {
	 content: "51%";
}
 .progress progress[value="51"] ~ .progress-bg .progress-bar {
	 width: 51%;
}
 .progress progress[value="52"] + .progress-value:before {
	 content: "52%";
}
 .progress progress[value="52"] ~ .progress-bg .progress-bar {
	 width: 52%;
}
 .progress progress[value="53"] + .progress-value:before {
	 content: "53%";
}
 .progress progress[value="53"] ~ .progress-bg .progress-bar {
	 width: 53%;
}
 .progress progress[value="54"] + .progress-value:before {
	 content: "54%";
}
 .progress progress[value="54"] ~ .progress-bg .progress-bar {
	 width: 54%;
}
 .progress progress[value="55"] + .progress-value:before {
	 content: "55%";
}
 .progress progress[value="55"] ~ .progress-bg .progress-bar {
	 width: 55%;
}
 .progress progress[value="56"] + .progress-value:before {
	 content: "56%";
}
 .progress progress[value="56"] ~ .progress-bg .progress-bar {
	 width: 56%;
}
 .progress progress[value="57"] + .progress-value:before {
	 content: "57%";
}
 .progress progress[value="57"] ~ .progress-bg .progress-bar {
	 width: 57%;
}
 .progress progress[value="58"] + .progress-value:before {
	 content: "58%";
}
 .progress progress[value="58"] ~ .progress-bg .progress-bar {
	 width: 58%;
}
 .progress progress[value="59"] + .progress-value:before {
	 content: "59%";
}
 .progress progress[value="59"] ~ .progress-bg .progress-bar {
	 width: 59%;
}
 .progress progress[value="60"] + .progress-value:before {
	 content: "60%";
}
 .progress progress[value="60"] ~ .progress-bg .progress-bar {
	 width: 60%;
}
 .progress progress[value="61"] + .progress-value:before {
	 content: "61%";
}
 .progress progress[value="61"] ~ .progress-bg .progress-bar {
	 width: 61%;
}
 .progress progress[value="62"] + .progress-value:before {
	 content: "62%";
}
 .progress progress[value="62"] ~ .progress-bg .progress-bar {
	 width: 62%;
}
 .progress progress[value="63"] + .progress-value:before {
	 content: "63%";
}
 .progress progress[value="63"] ~ .progress-bg .progress-bar {
	 width: 63%;
}
 .progress progress[value="64"] + .progress-value:before {
	 content: "64%";
}
 .progress progress[value="64"] ~ .progress-bg .progress-bar {
	 width: 64%;
}
 .progress progress[value="65"] + .progress-value:before {
	 content: "65%";
}
 .progress progress[value="65"] ~ .progress-bg .progress-bar {
	 width: 65%;
}
 .progress progress[value="66"] + .progress-value:before {
	 content: "66%";
}
 .progress progress[value="66"] ~ .progress-bg .progress-bar {
	 width: 66%;
}
 .progress progress[value="67"] + .progress-value:before {
	 content: "67%";
}
 .progress progress[value="67"] ~ .progress-bg .progress-bar {
	 width: 67%;
}
 .progress progress[value="68"] + .progress-value:before {
	 content: "68%";
}
 .progress progress[value="68"] ~ .progress-bg .progress-bar {
	 width: 68%;
}
 .progress progress[value="69"] + .progress-value:before {
	 content: "69%";
}
 .progress progress[value="69"] ~ .progress-bg .progress-bar {
	 width: 69%;
}
 .progress progress[value="70"] + .progress-value:before {
	 content: "70%";
}
 .progress progress[value="70"] ~ .progress-bg .progress-bar {
	 width: 70%;
}
 .progress progress[value="71"] + .progress-value:before {
	 content: "71%";
}
 .progress progress[value="71"] ~ .progress-bg .progress-bar {
	 width: 71%;
}
 .progress progress[value="72"] + .progress-value:before {
	 content: "72%";
}
 .progress progress[value="72"] ~ .progress-bg .progress-bar {
	 width: 72%;
}
 .progress progress[value="73"] + .progress-value:before {
	 content: "73%";
}
 .progress progress[value="73"] ~ .progress-bg .progress-bar {
	 width: 73%;
}
 .progress progress[value="74"] + .progress-value:before {
	 content: "74%";
}
 .progress progress[value="74"] ~ .progress-bg .progress-bar {
	 width: 74%;
}
 .progress progress[value="75"] + .progress-value:before {
	 content: "75%";
}
 .progress progress[value="75"] ~ .progress-bg .progress-bar {
	 width: 75%;
}
 .progress progress[value="76"] + .progress-value:before {
	 content: "76%";
}
 .progress progress[value="76"] ~ .progress-bg .progress-bar {
	 width: 76%;
}
 .progress progress[value="77"] + .progress-value:before {
	 content: "77%";
}
 .progress progress[value="77"] ~ .progress-bg .progress-bar {
	 width: 77%;
}
 .progress progress[value="78"] + .progress-value:before {
	 content: "78%";
}
 .progress progress[value="78"] ~ .progress-bg .progress-bar {
	 width: 78%;
}
 .progress progress[value="79"] + .progress-value:before {
	 content: "79%";
}
 .progress progress[value="79"] ~ .progress-bg .progress-bar {
	 width: 79%;
}
 .progress progress[value="80"] + .progress-value:before {
	 content: "80%";
}
 .progress progress[value="80"] ~ .progress-bg .progress-bar {
	 width: 80%;
}
 .progress progress[value="81"] + .progress-value:before {
	 content: "81%";
}
 .progress progress[value="81"] ~ .progress-bg .progress-bar {
	 width: 81%;
}
 .progress progress[value="82"] + .progress-value:before {
	 content: "82%";
}
 .progress progress[value="82"] ~ .progress-bg .progress-bar {
	 width: 82%;
}
 .progress progress[value="83"] + .progress-value:before {
	 content: "83%";
}
 .progress progress[value="83"] ~ .progress-bg .progress-bar {
	 width: 83%;
}
 .progress progress[value="84"] + .progress-value:before {
	 content: "84%";
}
 .progress progress[value="84"] ~ .progress-bg .progress-bar {
	 width: 84%;
}
 .progress progress[value="85"] + .progress-value:before {
	 content: "85%";
}
 .progress progress[value="85"] ~ .progress-bg .progress-bar {
	 width: 85%;
}
 .progress progress[value="86"] + .progress-value:before {
	 content: "86%";
}
 .progress progress[value="86"] ~ .progress-bg .progress-bar {
	 width: 86%;
}
 .progress progress[value="87"] + .progress-value:before {
	 content: "87%";
}
 .progress progress[value="87"] ~ .progress-bg .progress-bar {
	 width: 87%;
}
 .progress progress[value="88"] + .progress-value:before {
	 content: "88%";
}
 .progress progress[value="88"] ~ .progress-bg .progress-bar {
	 width: 88%;
}
 .progress progress[value="89"] + .progress-value:before {
	 content: "89%";
}
 .progress progress[value="89"] ~ .progress-bg .progress-bar {
	 width: 89%;
}
 .progress progress[value="90"] + .progress-value:before {
	 content: "90%";
}
 .progress progress[value="90"] ~ .progress-bg .progress-bar {
	 width: 90%;
}
 .progress progress[value="91"] + .progress-value:before {
	 content: "91%";
}
 .progress progress[value="91"] ~ .progress-bg .progress-bar {
	 width: 91%;
}
 .progress progress[value="92"] + .progress-value:before {
	 content: "92%";
}
 .progress progress[value="92"] ~ .progress-bg .progress-bar {
	 width: 92%;
}
 .progress progress[value="93"] + .progress-value:before {
	 content: "93%";
}
 .progress progress[value="93"] ~ .progress-bg .progress-bar {
	 width: 93%;
}
 .progress progress[value="94"] + .progress-value:before {
	 content: "94%";
}
 .progress progress[value="94"] ~ .progress-bg .progress-bar {
	 width: 94%;
}
 .progress progress[value="95"] + .progress-value:before {
	 content: "95%";
}
 .progress progress[value="95"] ~ .progress-bg .progress-bar {
	 width: 95%;
}
 .progress progress[value="96"] + .progress-value:before {
	 content: "96%";
}
 .progress progress[value="96"] ~ .progress-bg .progress-bar {
	 width: 96%;
}
 .progress progress[value="97"] + .progress-value:before {
	 content: "97%";
}
 .progress progress[value="97"] ~ .progress-bg .progress-bar {
	 width: 97%;
}
 .progress progress[value="98"] + .progress-value:before {
	 content: "98%";
}
 .progress progress[value="98"] ~ .progress-bg .progress-bar {
	 width: 98%;
}
 .progress progress[value="99"] + .progress-value:before {
	 content: "99%";
}
 .progress progress[value="99"] ~ .progress-bg .progress-bar {
	 width: 99%;
}
 .progress progress[value="100"] + .progress-value:before {
	 content: "100%";
}
 .progress progress[value="100"] ~ .progress-bg .progress-bar {
	 width: 100%;
}
 .bar_mana {
	 background: #0291d3;
}
 .bar_monster {
	 background: #710aaa;
}
 .monster_status {
	 position: absolute;
	 top: 20px;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
}
 .monster_title {
	 color: white;
	 font-size: 1.2em;
	 font-weight: bold;
	 animation: appearance 4s;
	 position: absolute;
	 top: 0px;
}
 .monster_bar {
	 margin-top: 20px;
}
 @keyframes appearance {
	 100% {
		 opacity: 1;
	}
	 0% {
		 opacity: 0;
	}
}
 #monster_img {
	 animation: appearance 6s;
	 width: 400px;
}
 .player_death {
	 color: white;
	 font-size: 2rem;
	 height: 600px;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex-direction: column;
}
 .button_again {
	 border: 3px solid white;
	 padding: 5px;
	 margin-top: 10px;
	 cursor: pointer;
}
 .button_again:hover, .button_again:active {
	 border: 3px solid #f73718;
	 box-shadow: 0 0 15px #f73718, 0 0 10px #f73718;
	 color: #f73718;
	 text-shadow: 0 0 15px #f73718, 0 0 10px #f73718;
}
 .subs1 {
	 margin-right: 30px;
}
 .container_panel_dialog2 {
	 margin-bottom: -480px;
}
 .history_item1 {
	 background-image: url("https://i.imgur.com/u9T32td.jpg");
	 z-index: 3;
	 width: 550px;
	 height: 375px;
	 position: absolute;
	 top: -390px;
	 animation: appearance 1s;
}
 .history_item1_button {
	 border: solid 5px transparent;
	 width: 148px;
	 height: 148px;
	 border-radius: 50%;
	 margin-left: 90px;
	 margin-top: 95px;
	 cursor: pointer;
	 opacity: 0.2;
}
 .history_item1_button:hover {
	 border: solid 5px #f73718;
	 box-shadow: 0 0 15px #f73718, 0 0 10px #f73718;
	 background-color: #f73718;
}
 .history_item1_button:active {
	 border: solid 5px #f73718;
	 opacity: 0.5;
	 overflow: hidden;
}
 .history_item1-selected {
	 border: solid 5px #f73718;
	 box-shadow: 0 0 15px #f73718, 0 0 10px #f73718;
	 background-color: #f73718;
}
 .history_item1_text {
	 margin-left: 380px;
	 margin-top: -230px;
	 width: 150px;
	 font-family: 'Stint Ultra Condensed', cursive;
	 font-size: 1.2rem;
}
 .history_item1-flame {
	 opacity: 1;
	 position: absolute;
	 margin-top: -120px;
	 margin-left: 15px;
	 animation: appearance 3s;
}
 .history_item1-flame img {
	 width: 300px;
}
 .history_item1-flame {
	 display: none;
}
 .ep1_inter {
	 width: 1024px;
	 height: 600px;
	 overflow: hidden;
}
 .episode_cointainer {
	 width: 1024px;
	 height: 600px;
	 overflow: hidden;
}
 .container_panel_dialog {
	 margin-top: 470px;
}
 .panel_dialog-avatar {
	 border: solid 4px white;
	 margin-left: -770px;
	 margin-top: -245px;
	 position: absolute;
	 z-index: 4;
}
 .panel_dialog-avatar img {
	 width: 140px;
	 margin-bottom: -4px;
}
 .ep1_9 .panel_dialog-avatar img {
	 width: 130px;
}
 .ep1_inter-bg {
	 position: absolute;
	 z-index: 0;
	 width: 1024px;
}
 .ep1_3, .ep1_4, .ep1_5 {
	 overflow: hidden;
}
 .subs_ep1_3, .subs_ep1_4, .subs_ep1_5, .subs_ep1_6, .subs_ep1_7, .subs_ep1_8, .subs_ep1_9, .subs_ep1_10, .subs_ep1_12, .subs_ep1_13, .subs_ep1_14, .subs_ep1_15, .subs_ep1_16, .subs_ep1_17, .subs_ep1_18, .subs_ep1_19, .subs_ep1_20, .subs_ep1_21, .subs_ep1_22, .subs_ep1_23, .subs_ep1_24, .subs_ep1_25, .subs_ep1_26, .subs_ep1_27, .subs_ep1_28, .subs_ep1_29, .subs_ep1_30, .subs_ep1_31, .subs_ep1_32, .subs_ep1_33, .subs_ep1_34, .subs_ep1_35, .subs_ep1_36, .subs_ep1_37, .subs_ep1_38, .subs_ep1_39, .subs_ep1_40, .subs_ep1_41 {
	 position: absolute;
	 margin-right: 480px;
	 z-index: 3;
}
 .ep1_3-interactive, .ep1_4-interactive, .ep1_5-interactive, .ep1_6-interactive, .ep1_7-interactive, .ep1_8-interactive {
	 width: 30px;
	 height: 30px;
	 z-index: 5;
	 cursor: pointer;
	 position: absolute;
	 top: 310px;
	 left: 52%;
	 z-index: 5;
}
 .ep1_39, .ep1_2, .ep1_3, .ep1_4, .ep1_5, .ep1_6, .ep1_7, .ep1_8, .ep1_10, .ep1_11, .ep1_9, .ep1_13, .ep1_12, .ep1_14, .ep1_15, .ep1_16, .ep1_17, .ep1_19, .ep1_18, .ep1_20, .ep1_22, .ep1_21, .ep1_24, .ep1_25, .ep1_23, .ep1_27, .ep1_26, .ep1_29, .ep1_30, .ep1_31, .ep1_28, .ep1_33, .ep1_34, .ep1_32, .ep1_36, .ep1_37, .ep1_38, .ep1_35, .ep1_40, .ep1_41 {
	 animation: appearance 1s;
	 display: none;
	 overflow: hidden;
	 width: 1024px;
}
 .ep1_39 .subs1, .ep1_2 .subs1, .ep1_3 .subs1, .ep1_4 .subs1, .ep1_5 .subs1, .ep1_6 .subs1, .ep1_7 .subs1, .ep1_8 .subs1, .ep1_10 .subs1, .ep1_11 .subs1, .ep1_9 .subs1, .ep1_13 .subs1, .ep1_12 .subs1, .ep1_14 .subs1, .ep1_15 .subs1, .ep1_16 .subs1, .ep1_17 .subs1, .ep1_19 .subs1, .ep1_18 .subs1, .ep1_20 .subs1, .ep1_22 .subs1, .ep1_21 .subs1, .ep1_24 .subs1, .ep1_25 .subs1, .ep1_23 .subs1, .ep1_27 .subs1, .ep1_26 .subs1, .ep1_29 .subs1, .ep1_30 .subs1, .ep1_31 .subs1, .ep1_28 .subs1, .ep1_33 .subs1, .ep1_34 .subs1, .ep1_32 .subs1, .ep1_36 .subs1, .ep1_37 .subs1, .ep1_38 .subs1, .ep1_35 .subs1, .ep1_40 .subs1, .ep1_41 .subs1 {
	 overflow: hidden;
}
 .dialog_button9 {
	 width: 200px;
	 top: 950px;
	 margin-top: -30px;
	 margin-left: 80%;
}
 .ep1_12-interactive, .ep1_13-interactive, .ep1_13-interactive1, .ep1_14-interactive, .ep1_15-interactive {
	 font-weight: bold;
	 cursor: pointer;
	 transform: rotate(1deg) skew(0deg, -2deg);
	 padding: 2px;
	 background: black;
	 color: white;
	 user-select: none;
	 z-index: 5;
	 position: absolute;
	 border: solid white 2px;
	 margin-top: 400px;
	 margin-left: 400px;
}
 .ep1_12-interactive:hover, .ep1_13-interactive:hover, .ep1_13-interactive1:hover, .ep1_14-interactive:hover, .ep1_15-interactive:hover {
	 background: white;
	 color: black;
}
 .ep1_12-interactive:active, .ep1_13-interactive:active, .ep1_13-interactive1:active, .ep1_14-interactive:active, .ep1_15-interactive:active {
	 background: black;
	 color: white;
}
 .ep1_13-interactive {
	 margin-top: 350px;
	 margin-left: 300px;
}
 .ep1_13-interactive1 {
	 margin-top: 400px;
	 margin-left: 350px;
}
 .ep1_14-interactive {
	 margin-top: 400px;
	 margin-left: 420px;
}
 .ep1_15-interactive {
	 margin-top: 430px;
	 margin-left: 460px;
}
 .ep1_16-interactive, .ep1_17-interactive, .ep1_18-interactive, .ep1_19-interactive, .ep1_20-interactive, .ep1_21-interactive, .ep1_22-interactive, .ep1_23-interactive, .ep1_25-interactive, .ep1_26-interactive, .ep1_27-interactive, .ep1_28-interactive, .ep1_29-interactive, .ep1_30-interactive, .ep1_31-interactive, .ep1_32-interactive, .ep1_33-interactive, .ep1_34-interactive, .ep1_35-interactive, .ep1_36-interactive, .ep1_37-interactive, .ep1_38-interactive, .ep1_39-interactive, .ep1_40-interactive {
	 width: 1024px;
	 height: 590px;
	 cursor: pointer;
	 z-index: 5;
	 position: absolute;
}
 .dialog_button1_40 {
	 width: 150px;
	 top: 950px;
	 margin-top: -10px;
	 margin-left: 80%;
}
 .ep1_3-interactive, .ep1_4-interactive, .ep1_5-interactive, .ep1_6-interactive, .ep1_7-interactive, .ep1_8-interactive {
	 opacity: 0.5;
}
 .ep1_3-interactive img, .ep1_4-interactive img, .ep1_5-interactive img, .ep1_6-interactive img, .ep1_7-interactive img, .ep1_8-interactive img {
	 position: absolute;
}
 .ep1_3-interactive:hover, .ep1_4-interactive:hover, .ep1_5-interactive:hover, .ep1_6-interactive:hover, .ep1_7-interactive:hover, .ep1_8-interactive:hover {
	 opacity: 0.8;
}
 .scene_slide1, .scene_slide2, .scene_slide3, .monster_fight {
	 display: none;
}
 .player_death {
	 display: none;
}
 .history_item1 {
	 display: none;
}
 .episode_cointainer {
	 display: none;
}
 .monster_capture {
	 display: none;
}
 
.patreon{
  z-index:6;
  margin-top:150px;
  margin-left:200px;
}