#startGameContainer{
	background-image:url("https://images6.alphacoders.com/441/441991.jpg");
	width:100%;
	height:100vh;
	background-size:cover;
}
#startGameButton{
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	background-image:url("https://media.giphy.com/media/pAUg2l9WEV3QA/giphy.gif");
	height:300px;
	width:100%;
	display:block;
	margin:0 auto;
	background-size:cover;
	color: #ffffff;
	font-family: 'Raleway', sans-serif;
	font-size:50px;
	border-radius:20px;
	border: solid 5px;
	webkit-animation: rainbow 5s infinite;
  ms-animation: rainbow 5s infinite;
  animation: rainbow 5s infinite;
}
@-webkit-keyframes rainbow{
  0%{color: orange;}
  10%{color: purple;}
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}
@-ms-keyframes rainbow{
   0%{color: orange;}
  10%{color: purple;}
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}
@keyframes rainbow{
    0%{color: orange;}
  10%{color: purple;}
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}
#gameOverall{
	background-image:url("marvel-bg.jpg");
	max-width:1184px;
}
#gameContainer{
	width:100%;
	/*height:750px;*/
	padding: 20px;
	min-width:992px;
	background-size:cover;
}
#imageframe{
	background-color:red;
	/*height:500px;*/
}
#eventimg
{
	display:flex;
	margin-left:auto;
	margin-right:auto;
	align-items:center;
}
#input{
	width:100%;
	font-size:40px;
	font-style:italic;
	font-family: 'Bungee Inline';
	color:green;
}
#bossHp{
	text-align:center;
	border:solid black 3px;
	background-color:red;
}
#charHp{
	text-align:center;
	border:solid black 3px;
	background-color:red;
	color:black;
}
#attButton{
	text-align:center;
	border:none;
	background:none;
	color:red;
	font-size:52px;
	width:100%;
	font-family: 'Faster One'
}
#defButton{
	text-align:center;
	border:none;
	background:none;
	width:100%;
	color:#2373ec;
	font-size:50px;
	font-family: 'Ultra'
}
#hero{
	width:100%;
}

#myProgress {
  width: 100%;
  /*background-color: #ddd;*/
}
#myBar {
  width: 100%;
  height: 30px;
  background-color: #4CAF50;
}
#restartGameButton{
	background-image:url("https://media.giphy.com/media/18RUgAS9WenUMTsxbo/giphy.gif");
	height:300px;
	width:550px;
	position:absolute;
	top:50%;
	transform: translateY(-50%) translateX(50%);
}
#restartGameContainer{
	background-image:url("https://ak9.picdn.net/shutterstock/videos/34091029/thumb/1.jpg");
	background-repeat:no-repeat;
	 width:100%;
	 background-size: 100% 100%;
	 height: 100vh;
	 /*height:700px;*/
}
p{
	font-size:50px;
	font-style:italic;
	font-family: 'Bungee Inline';
	color:green;
}
#bossOutput{
	font-style:italic;
	font-size:15px;
	color:white;
}
#playerOutput{
	font-style:italic;
	font-size:15px;
	color:white;
}

#first-row {
	position: relative;
}

#popup{
	position:absolute;
	top: 240px;
	left: 440px;
  width: 200px;
  height: 160px;
  background: yellow;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  text-align:center;
  font-size:40px;
  font-family: 'Bungee Shade';
  color:black;


}
#popup:before {
      content: "";
      position: absolute;
      right: 100%;
      top: 60px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-right: 40px solid yellow;
      border-bottom: 20px solid transparent;
    }
/*.test {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 50px;
	height: 50px;
	background-color: blue;
	visibility: hidden;
}*/