:root{
  --movement-transition: 0.25s;
  --character-color: #76e37a;
  --enemy-color: #ed555f;
}

@keyframes extend {
  0% {
    height: 0vh;
    bottom: 5vh;
  }
  50% {
    height: 80vh;
    bottom: 85vh;
  }
  100%{
    height: 0vh;
    bottom: 5vh;
  }
}

@keyframes dropin {
  0%{
    top: -1rem;
  }
  100%{
    top: 0;
  }
}

body{
  margin: 0;
}

main{
  display: flex;
  flex-direction: column;
  height: 100vh;
  
  background-color: #2e3c45;
}

h1{
  color: white;
  font-family: sans-serif;
  font-size: 2em;
}

p{
  color: #e1e1e1;
  font-family: sans-serif;
  font-size: 1em;
}

b{
  color: white;
  padding-right: 1rem;
}

/* Sections */

.score-section{
  padding: 0 2rem;
  height: 0;
  text-align: right;
}

.tutorial-container{
  margin: auto;
  padding-top: 3rem;
  text-align: center;
}

.tutorial-container section{
  text-align: left;
}

.tutorial-container section p{
  padding-top: 1rem;
}

.enemy-container{
  margin: 1rem;
  height: 90vh;
}

.char-container{
  margin: 1rem;
}

/* Game Components */

.enemy, .character {
  position: relative;
  margin: auto;
  
  right: 0;
  transition: right var(--movement-transition), top var(--movement-transition);
}

.enemy {  
  position: absolute;
  top: 1rem;
  left: 0;
  
  width: 2rem;
  height: 2rem;
  background-color: var(--enemy-color);
  border-radius: 50%;
  
  animation: dropin 0.1s;
  animation-iteration-count: 1;
}

.character{
  width: 0;
  height: 0;
  border-left: 1.5rem solid transparent;
  border-right: 1.5rem solid transparent;
  border-bottom: 2.5rem solid var(--character-color);
}

.fire {  
  position: relative;
  margin: auto;
  visibility: hidden;
  
  bottom: 5vh;
  width: 3px;
  background-color: var(--enemy-color);
}

.fire-animated {
  visibility: visible;
  animation: extend 0.3s;
  animation-iteration-count: 1;
}

.fire div {
  position: relative;
  right: 3px;
  bottom: 5px;
  
  border-radius: 50%;
  width: 10px;
  height: 20px;
  background-color: var(--enemy-color);
}