✨ Smooth animation !

src/_types.scss

@@ -0,0 +1,131 @@
+$black: #222222;
+$white: #eeeeee;
+
+body {
+  &.normal {
+    background-color: #eeeeee;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.fighting {
+    background-color: #756573;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.flying {
+    background-color: #657581;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.poison {
+    background-color: #ad569f;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.ground {
+    background-color: #9f8853;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.rock {
+    background-color: #565f1d;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.bug {
+    background-color: #417241;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.ghost {
+    background-color: #3c55b8;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.steel {
+    background-color: #dddcfe;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.fire {
+    background-color: #c6761d;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.water {
+    background-color: #184088;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.grass {
+    background-color: #89ca5f;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.electric {
+    background-color: #edf31d;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.psychic {
+    background-color: #f2087e;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.ice {
+    background-color: #8db0bb;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.dragon {
+    background-color: #604324;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.dark {
+    background-color: #042e2d;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.fairy {
+    background-color: #f454b3;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+}

src/index.ts

@@ -34,5 +34,10 @@ pokemonJS.getAll().then((pokemon: [string]) => {
     const tweetBtn = document.querySelector('#tweet') as HTMLLinkElement;
     tweetBtn.href = shareURL;
     tweetBtn.removeAttribute('hidden');
+    pokemonJS
+      .getType(rdmPoke)
+      .then((type: [{ logo: string; name: string }]) => {
+        document.body.classList.add('ready', type[0].name);
+      });
   });
 });

src/style.scss

@@ -7,6 +7,15 @@
 }
 
 body {
+  transition: opacity 1s ease-in-out, transform 1s ease-in-out,
+    background-color 1s ease-in-out;
+  opacity: 1;
+  overflow: hidden;
+  transform: translateY(0px);
+  &:not(.ready) {
+    opacity: 0;
+    transform: translateY(100px);
+  }
   font-family: 'Inter', sans-serif;
   display: flex;
   flex-direction: row;
@@ -32,4 +41,20 @@ body {
     margin-top: 10px;
     font-size: 1vw;
   }
+  @media (max-width: 1000px) {
+    flex-direction: column;
+    text-align: center;
+    h1 {
+      font-size: 8vw;
+    }
+    p {
+      font-size: 4vw;
+    }
+    .footer {
+      margin-top: 10px;
+      font-size: 2vw;
+    }
+  }
 }
+
+@import 'types';