/* ---------------------------------- */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: auto;
  background-color: #f9f9f9;
}

#outerAll {
  position: relative;
  width: 900px;
  padding: 20px;
}

#monsters {
  width: 900px;
  height: 620px;
  background-color: #dce5eb;
  position: relative;
  image-rendering: pixelated;
}

#results, #resultsLeft, #resultsRight {
  position: absolute;
  top: 10px;
  font-size: 30px;
}
#results { left: 7%; }
#resultsHeartOuter { left: 20.5%; }
#resultsLeft { left: 30%; }
#resultsLeftHeartOuter { left: 49.7%; }
#resultsRight { left: 60%; }
#resultsRightHeartOuter { left: 82%; }

#resultsHeartOuter, #resultsLeftHeartOuter , #resultsRightHeartOuter {
  transform-origin: 0% 50%;
  position: absolute;
  top: 21px;
}
#resultsHeart, #resultsLeftHeart , #resultsRightHeart{
  transform-origin: 0% 50%;
}
.monster-outer {
  height: 74px;
  width: 29px;
  position: absolute;
}

.monster-outer:hover {
  z-index: 100;
}

.monster-head, .monster-body, .monster-legs, .monster-bubble {
  position: absolute;
  transform: scale(1.2);
}
.monster-head {
  top: -2px;
  left: 0px;
}
.monster-body {
  top: 25px;
  left: -10px;
}
.monster-legs {
  top: 45px;
  left: 1px;
}
.monster-body-2 {
  top: 23px;
  left: -8px;
}

.monster-bubble {
  position: absolute;
  top: -53px;
  left: -12px;
}

.monster-text {
  position: absolute;
  top: -46px;
  left: 2px;
}

.monster-heart {
  transform-origin: 50% 100%;
  position: absolute;
  top: -20px;
  left: 8px;
}

#controlsOuter {
  width: 430px;
}

select {
  height: 28px;
  font-size: 20px;
}

.control {
  font-size: 21px;
  margin: 7px;
  display: block;
}

.flashing {
  animation: fadeIn 0.13s ease-in-out 0s infinite alternate-reverse;
}

#stepsOuter {
  position: absolute;
  left: 460px;
  top: 640px;
  width: 460px;
  height: 286px;
  overflow: hidden;
  background-color: #dce5eb;;
  border-top: 34px solid #c6d1d8;
}

#stepsTitle {
  position: absolute;
  top: 642px;
  left: 467px;
  z-index: 10;
  font-weight: 600;
  color: #797b8b;
}

#stepsInner {
  width: 100%;
}

.step, .stepNoBorder {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  box-sizing: border-box;
  padding-left:20px;
}
.step {  border-bottom: 0.1px solid #c1c1c1;}

.stepText {
  height: 30px;
  font-size: 17px;
  padding: 2px;
}

.stepImg {
  height: 30px;
  width: 40px;
}

#play { 
  width: 300px;
  padding: 30px 30px;
  margin: 10px 0 10px 20px;
  font-size: 30px;
}

#title {
  font-size: 30px;
  text-align: center;
 }
 
 .explain {
   font-size: 18px;
   margin: 20px;    
   line-height: 26px;
   max-width: 874px;
 }