* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: grey;
}

.homebutton {
  position: fixed;
  top: 5px;
  left: calc(50vw + 13.8888888889vh);
  z-index: 999;
}

.scoreboard {
  position: fixed;
  top: 1px;
  left: 50vw;
  transform: translate(-50%, 0%);
  background: gold;
  height: calc(5.5555555556vh - 2px);
  width: 36.6666666667vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

label,
input {
  position: relative;
  height: auto;
  background: none;
  font-weight: 900;
}

label {
  width: 11.1111111111vh;
  padding: 5px;
}

input {
  width: 25.5555555556vh;
  border-width: 0;
}

.shootpanel,
.attackpanel {
  display: flex;
  height: 5.5555555556vh;
  width: auto;
  position: fixed;
  left: calc(50vw - 13.8888888889vh - 4.4444444444vh);
  z-index: 0;
  align-items: center;
  justify-items: center;
}

.shootpanel {
  bottom: 2px;
}

.attackpanel {
  top: calc(5.5555555556vh + 2px);
}

.shooter,
.attacker {
  position: relative;
  height: 5.5555555556vh;
  width: 5.5555555556vh;
  margin-right: 2.2222222222vh;
}

.shooter {
  border-width: 2px;
}

.attacker:last-child,
.shooter:last-child {
  margin-right: 0;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

.green {
  background: green;
}

.purple {
  background: purple;
}

.shootpanel .red:hover {
  background: rgb(155, 52, 52);
}

.shootpanel .blue:hover {
  background: lightblue;
}

.shootpanel .yellow:hover {
  background: rgb(207, 207, 113);
}

.shootpanel .green:hover {
  background: lightgreen;
}

.shootpanel .purple:hover {
  background: rgb(150, 81, 150);
}

.fireball {
  position: absolute;
  top: 0;
  height: 5.5555555556vh;
  width: 5.5555555556vh;
  left: 0;
  z-index: -1;
  border-radius: 50%;
  background: goldenrod;
  border: 1px solid black;
  animation: moveFireball 4s linear;
  transform-origin: top left;
}

@keyframes moveFireball {
  0% {
    top: 5.5555555556vh;
  }
  100% {
    top: 88.8888888889vh;
  }
}
.bullet {
  position: absolute;
  top: -2px;
  height: 5.5555555556vh;
  width: 2.7777777778vh;
  left: calc(1.3888888889vh - 2px);
  border-radius: 50% 50% 0% 0%;
  z-index: -1;
  background: pink;
  animation: movebullet 0.3s linear;
  transform-origin: top left;
}

@keyframes movebullet {
  0% {
    top: 0;
  }
  100% {
    top: -88.8888888889vh;
  }
}
.start, .gameOver, .finalScore {
  left: 50vw;
  top: 50vh;
  position: fixed;
  font-family: Georgia, "Times New Roman", Times, serif;
  height: auto;
  text-align: center;
  width: min(36.6666666667vh, 100vw);
  padding: 10px;
}

.gameOver, .finalScore {
  background: Yellow;
  font-weight: 600;
  -webkit-text-decoration: solid;
          text-decoration: solid;
  font-style: italic;
  border-radius: 5px;
}

.start {
  transform: translate(-50%, -50%);
  background: green;
  color: black;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.5;
}

.gameOver {
  color: Red;
  font-size: 25px;
  transform: translate(-50%, -300%);
}

.finalScore {
  color: green;
  font-size: 20px;
  transform: translate(-50%, 250%);
}

.endOfGame {
  position: relative;
  display: none;
}/*# sourceMappingURL=style.css.map */