CSS Grid, Flexbox and Vanilla Javascript

Hey! It looks good!... Here are some suggestions:

• Document should have one main landmark, Contain the component with <main>.

<main>
   <div class="container">
      //...
   </div>
</main>

• All page content should be contained by landmarks, Contain the attribution with <footer>.

<footer>
   <div class="attribution">
      //...
   </div>
</footer>

• I suggest you center the component on the page with Flexbox, by giving the parent element <main> the following properties:

body {
      font-family: Arial, Helvetica, sans-serif;
      /* width: 80%;         /* <---- Remove */
      /* margin: 40px auto;         /* <---- Remove */
      background-color: hsl(216, 12%, 8%);
    }
main {    /* <---- Add */
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
 }
.container {
      //...
      /* margin: 0 auto;         /* <---- Remove */
    }

I hope this is helpful to you... Keep coding👍