style.css

@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");
:root {
  --yellow: #ffd71f;
  --blue: #2dc4f0;
  --red: #fa0000;
  --orange: #f07b31;
  --white: #ffffff;
}

h1 {
  color: var(--yellow);
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3rem;
}
h2 {
  color: var(--white);
  font-family: "Russo One", sans-serif;
}

body {
  background: radial-gradient(circle at bottom, navy 0, black 100%);
  height: 100vh;
  overflow: hidden;
}

.interface {
  display: grid;
  place-items: center;
}

.grid {
  width: 575px;
  height: 600px;
  border: solid 0.5rem var(--yellow);
  display: flex;
  flex-wrap: wrap;
}

.grid div {
  width: 36px;
  height: 36px;
  background-color: #191919;
  border: solid 0.1rem rgba(255, 255, 255, 0.1);
}

.grid .invader {
  background-image: url("data:image/svg+xml,%3Csvg height='32px' width='32px' version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' xml:space='preserve' fill='%23000000'%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath style='fill:%232dc4f0;' d='M469.344,266.664v-85.328h-42.656v-42.672H384v-21.328h42.688v-64h-64v42.656H320v42.672H192V95.992 h-42.656V53.336h-64v64H128v21.328H85.344v42.672H42.688v85.328H0v149.328h64v-85.328h21.344v85.328H128v42.672h106.688v-64h-85.344 v-21.328h213.344v21.328h-85.344v64H384v-42.672h42.688v-85.328H448v85.328h64V266.664H469.344z M192,245.336h-64v-64h64V245.336z M384,245.336h-64v-64h64V245.336z'/%3E%3C/g%3E%3C/svg%3E");
  border-radius: 0.3rem;
  background-repeat: no-repeat;
}

.grid .shooter {
  background-image: url("data:image/svg+xml,%3Csvg height='32px' width='32px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511.999 511.999' xml:space='preserve' fill='%23000000'%3E%3Cg%3E%3Cpath style='fill:%23fa0000;' d='M310.641,387.709c-0.816-2.159-2.885-3.587-5.192-3.587H206.55c-2.309,0-4.375,1.428-5.194,3.587 c-4.157,10.99-6.266,22.565-6.266,34.405c0,38.873,23.042,73.976,58.701,89.428c0.705,0.305,1.457,0.457,2.208,0.457 c0.752,0,1.504-0.152,2.208-0.457c35.66-15.452,58.701-50.554,58.701-89.428C316.909,410.27,314.8,398.695,310.641,387.709z'/%3E%3Cpath style='fill:%23ffd71f;' d='M292.446,380.352c-1.052-1.136-2.528-1.782-4.076-1.782h-64.742c-1.548,0-3.025,0.645-4.076,1.782 c-1.049,1.135-1.579,2.659-1.459,4.202c1.681,21.554,15.743,40.738,35.824,48.871c0.668,0.271,1.376,0.406,2.084,0.406 c0.708,0,1.416-0.135,2.084-0.406c20.08-8.133,34.14-27.316,35.822-48.871C294.024,383.01,293.495,381.487,292.446,380.352z'/%3E%3Cpath style='opacity:0.1;fill:%23fa0000;enable-background:new ;' d='M213.598,428.947c0-12.774,2.275-25.264,6.763-37.122 c0.883-2.33,3.113-3.87,5.603-3.87h84.765c-0.03-0.081-0.056-0.164-0.087-0.246c-0.816-2.159-2.885-3.587-5.192-3.587h-98.899 c-2.309,0-4.375,1.428-5.194,3.587c-4.157,10.99-6.266,22.565-6.266,34.405c0,38.752,22.902,73.752,58.37,89.277 C228.653,491.753,213.598,461.585,213.598,428.947z'/%3E%3Cg%3E%3Cpath style='fill:%23fa0000;' d='M420.78,396.97v-51.543c0-22.857-11.084-37.559-14.882-41.925l-76.866-83.428v152.156l80.955,37.293 C413.007,410.695,420.78,412.236,420.78,396.97z'/%3E%3Cpath style='fill:%23fa0000' d='M91.219,396.97v-51.543c0-22.857,11.084-37.559,14.882-41.925l76.866-83.428v152.156l-80.953,37.293 C98.992,410.695,91.219,412.236,91.219,396.97z'/%3E%3C/g%3E%3Cpath style='fill:%23fa0000' d='M255.999,103.143c-4.599,0-8.328-3.729-8.328-8.328V8.328c0-4.599,3.729-8.328,8.328-8.328 s8.328,3.729,8.328,8.328v86.487C264.327,99.414,260.598,103.143,255.999,103.143z'/%3E%3Cpath style='fill:%23ffd71f;' d='M263.525,49.363h-15.052c-37.406,0-67.728,30.323-67.728,67.727v255.14 c0,10.247,8.306,18.555,18.557,18.555h113.395c10.248,0,18.557-8.308,18.557-18.555V170.738v-27.205v-26.444 C331.253,79.685,300.931,49.363,263.525,49.363z'/%3E%3C/g%3E%3C/svg%3E");
}

.grid .laser {
  background-color: var(--orange) !important;
  border-radius: 20px;
}

.grid .boom {
  background-color: var(--yellow);
}