diff --git a/README.md b/README.md
index f768e33..264a75d 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,4 @@
-# React + Vite
+#Meme Generator
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+A Simple React app to generate meme template where you can add text to it
+You can check it here: https://meme-generator-a00b88.netlify.app/
diff --git a/components/meme.jsx b/components/meme.jsx
index 3858107..38f02b1 100644
--- a/components/meme.jsx
+++ b/components/meme.jsx
@@ -1,24 +1,36 @@
-import React, { useState } from "react";
-import memesData from "../memesData";
+import React, { useState, useEffect } from "react";
 
 export default function Meme() {
   const [meme, setMeme] = useState({
     topText: "",
     bottomText: "",
-    randomImage: "https://i.imgflip.com/345v97.jpg",
+    randomImage: "https://i.imgflip.com/1g8my4.jpg",
   });
 
-  const [allMemeImages, setAllMemeImages] = useState(memesData);
+  const [allMemes, setAllMemes] = useState([]);
+
+  useEffect(() => {
+    fetch("https://api.imgflip.com/get_memes")
+      .then((res) => res.json())
+      .then((data) => setAllMemes(data.data.memes));
+  }, []);
 
   function getMemeImage() {
-    const memesArray = allMemeImages.data.memes;
-    const randomNumber = Math.floor(Math.random() * memesArray.length);
-    const url = memesArray[randomNumber].url;
+    const randomNumber = Math.floor(Math.random() * allMemes.length);
+    const url = allMemes[randomNumber].url;
     setMeme((prevMeme) => ({
       ...prevMeme,
       randomImage: url,
     }));
   }
+
+  function changeHandler(event) {
+    setMeme((prevMeme) => ({
+      ...prevMeme,
+      [event.target.name]: event.target.value,
+    }));
+  }
+
   return (
     <main>
       <div className="form">
@@ -26,21 +38,27 @@ export default function Meme() {
           className="form-input"
           placeholder="Top Text"
           type="text"
-          name=""
-          id=""
+          name="topText"
+          value={meme.topText}
+          onChange={changeHandler}
         />
         <input
           className="form-input"
           placeholder="Bottom Text"
           type="text"
-          name=""
-          id=""
+          name="bottomText"
+          value={meme.bottomText}
+          onChange={changeHandler}
         />
         <button className="form-btn" onClick={getMemeImage}>
           Get a new meme image🖼
         </button>
       </div>
-      <img src={meme.randomImage} className="meme-image" />
+      <div className="meme">
+        <img src={meme.randomImage} className="meme-image" />
+        <h2 className="meme--text top">{meme.topText}</h2>
+        <h2 className="meme--text bottom">{meme.bottomText}</h2>
+      </div>
     </main>
   );
 }
diff --git a/memesData.js b/memesData.js
deleted file mode 100644
index df324bc..0000000
--- a/memesData.js
+++ /dev/null
@@ -1,807 +0,0 @@
-export default {
-  success: true,
-  data: {
-    memes: [
-      {
-        id: "181913649",
-        name: "Drake Hotline Bling",
-        url: "https://i.imgflip.com/30b1gx.jpg",
-        width: 1200,
-        height: 1200,
-        box_count: 2,
-      },
-      {
-        id: "87743020",
-        name: "Two Buttons",
-        url: "https://i.imgflip.com/1g8my4.jpg",
-        width: 600,
-        height: 908,
-        box_count: 3,
-      },
-      {
-        id: "112126428",
-        name: "Distracted Boyfriend",
-        url: "https://i.imgflip.com/1ur9b0.jpg",
-        width: 1200,
-        height: 800,
-        box_count: 3,
-      },
-      {
-        id: "131087935",
-        name: "Running Away Balloon",
-        url: "https://i.imgflip.com/261o3j.jpg",
-        width: 761,
-        height: 1024,
-        box_count: 5,
-      },
-      {
-        id: "247375501",
-        name: "Buff Doge vs. Cheems",
-        url: "https://i.imgflip.com/43a45p.png",
-        width: 937,
-        height: 720,
-        box_count: 4,
-      },
-      {
-        id: "129242436",
-        name: "Change My Mind",
-        url: "https://i.imgflip.com/24y43o.jpg",
-        width: 482,
-        height: 361,
-        box_count: 2,
-      },
-      {
-        id: "124822590",
-        name: "Left Exit 12 Off Ramp",
-        url: "https://i.imgflip.com/22bdq6.jpg",
-        width: 804,
-        height: 767,
-        box_count: 3,
-      },
-      {
-        id: "217743513",
-        name: "UNO Draw 25 Cards",
-        url: "https://i.imgflip.com/3lmzyx.jpg",
-        width: 500,
-        height: 494,
-        box_count: 2,
-      },
-      {
-        id: "131940431",
-        name: "Gru's Plan",
-        url: "https://i.imgflip.com/26jxvz.jpg",
-        width: 700,
-        height: 449,
-        box_count: 4,
-      },
-      {
-        id: "222403160",
-        name: "Bernie I Am Once Again Asking For Your Support",
-        url: "https://i.imgflip.com/3oevdk.jpg",
-        width: 750,
-        height: 750,
-        box_count: 2,
-      },
-      {
-        id: "438680",
-        name: "Batman Slapping Robin",
-        url: "https://i.imgflip.com/9ehk.jpg",
-        width: 400,
-        height: 387,
-        box_count: 2,
-      },
-      {
-        id: "188390779",
-        name: "Woman Yelling At Cat",
-        url: "https://i.imgflip.com/345v97.jpg",
-        width: 680,
-        height: 438,
-        box_count: 2,
-      },
-      {
-        id: "4087833",
-        name: "Waiting Skeleton",
-        url: "https://i.imgflip.com/2fm6x.jpg",
-        width: 298,
-        height: 403,
-        box_count: 2,
-      },
-      {
-        id: "135256802",
-        name: "Epic Handshake",
-        url: "https://i.imgflip.com/28j0te.jpg",
-        width: 900,
-        height: 645,
-        box_count: 3,
-      },
-      {
-        id: "93895088",
-        name: "Expanding Brain",
-        url: "https://i.imgflip.com/1jwhww.jpg",
-        width: 857,
-        height: 1202,
-        box_count: 4,
-      },
-      {
-        id: "80707627",
-        name: "Sad Pablo Escobar",
-        url: "https://i.imgflip.com/1c1uej.jpg",
-        width: 720,
-        height: 709,
-        box_count: 3,
-      },
-      {
-        id: "1035805",
-        name: "Boardroom Meeting Suggestion",
-        url: "https://i.imgflip.com/m78d.jpg",
-        width: 500,
-        height: 649,
-        box_count: 4,
-      },
-      {
-        id: "102156234",
-        name: "Mocking Spongebob",
-        url: "https://i.imgflip.com/1otk96.jpg",
-        width: 502,
-        height: 353,
-        box_count: 2,
-      },
-      {
-        id: "148909805",
-        name: "Monkey Puppet",
-        url: "https://i.imgflip.com/2gnnjh.jpg",
-        width: 923,
-        height: 768,
-        box_count: 2,
-      },
-      {
-        id: "97984",
-        name: "Disaster Girl",
-        url: "https://i.imgflip.com/23ls.jpg",
-        width: 500,
-        height: 375,
-        box_count: 2,
-      },
-      {
-        id: "252600902",
-        name: "Always Has Been",
-        url: "https://i.imgflip.com/46e43q.png",
-        width: 960,
-        height: 540,
-        box_count: 2,
-      },
-      {
-        id: "226297822",
-        name: "Panik Kalm Panik",
-        url: "https://i.imgflip.com/3qqcim.png",
-        width: 640,
-        height: 881,
-        box_count: 3,
-      },
-      {
-        id: "178591752",
-        name: "Tuxedo Winnie The Pooh",
-        url: "https://i.imgflip.com/2ybua0.png",
-        width: 800,
-        height: 582,
-        box_count: 2,
-      },
-      {
-        id: "216951317",
-        name: "Guy Holding Cardboard Sign",
-        url: "https://i.imgflip.com/3l60ph.jpg",
-        width: 700,
-        height: 702,
-        box_count: 2,
-      },
-      {
-        id: "119139145",
-        name: "Blank Nut Button",
-        url: "https://i.imgflip.com/1yxkcp.jpg",
-        width: 600,
-        height: 446,
-        box_count: 2,
-      },
-      {
-        id: "110163934",
-        name: "I Bet He's Thinking About Other Women",
-        url: "https://i.imgflip.com/1tl71a.jpg",
-        width: 1654,
-        height: 930,
-        box_count: 2,
-      },
-      {
-        id: "91538330",
-        name: "X, X Everywhere",
-        url: "https://i.imgflip.com/1ihzfe.jpg",
-        width: 2118,
-        height: 1440,
-        box_count: 2,
-      },
-      {
-        id: "100777631",
-        name: "Is This A Pigeon",
-        url: "https://i.imgflip.com/1o00in.jpg",
-        width: 1587,
-        height: 1425,
-        box_count: 3,
-      },
-      {
-        id: "195515965",
-        name: "Clown Applying Makeup",
-        url: "https://i.imgflip.com/38el31.jpg",
-        width: 750,
-        height: 798,
-        box_count: 4,
-      },
-      {
-        id: "27813981",
-        name: "Hide the Pain Harold",
-        url: "https://i.imgflip.com/gk5el.jpg",
-        width: 480,
-        height: 601,
-        box_count: 2,
-      },
-      {
-        id: "61579",
-        name: "One Does Not Simply",
-        url: "https://i.imgflip.com/1bij.jpg",
-        width: 568,
-        height: 335,
-        box_count: 2,
-      },
-      {
-        id: "79132341",
-        name: "Bike Fall",
-        url: "https://i.imgflip.com/1b42wl.jpg",
-        width: 500,
-        height: 680,
-        box_count: 3,
-      },
-      {
-        id: "180190441",
-        name: "They're The Same Picture",
-        url: "https://i.imgflip.com/2za3u1.jpg",
-        width: 1363,
-        height: 1524,
-        box_count: 3,
-      },
-      {
-        id: "114585149",
-        name: "Inhaling Seagull",
-        url: "https://i.imgflip.com/1w7ygt.jpg",
-        width: 1269,
-        height: 2825,
-        box_count: 4,
-      },
-      {
-        id: "101470",
-        name: "Ancient Aliens",
-        url: "https://i.imgflip.com/26am.jpg",
-        width: 500,
-        height: 437,
-        box_count: 2,
-      },
-      {
-        id: "155067746",
-        name: "Surprised Pikachu",
-        url: "https://i.imgflip.com/2kbn1e.jpg",
-        width: 1893,
-        height: 1893,
-        box_count: 3,
-      },
-      {
-        id: "89370399",
-        name: "Roll Safe Think About It",
-        url: "https://i.imgflip.com/1h7in3.jpg",
-        width: 702,
-        height: 395,
-        box_count: 2,
-      },
-      {
-        id: "134797956",
-        name: "American Chopper Argument",
-        url: "https://i.imgflip.com/2896ro.jpg",
-        width: 640,
-        height: 1800,
-        box_count: 5,
-      },
-      {
-        id: "55311130",
-        name: "This Is Fine",
-        url: "https://i.imgflip.com/wxica.jpg",
-        width: 580,
-        height: 282,
-        box_count: 2,
-      },
-      {
-        id: "123999232",
-        name: "The Scroll Of Truth",
-        url: "https://i.imgflip.com/21tqf4.jpg",
-        width: 1280,
-        height: 1236,
-        box_count: 2,
-      },
-      {
-        id: "124055727",
-        name: "Y'all Got Any More Of That",
-        url: "https://i.imgflip.com/21uy0f.jpg",
-        width: 600,
-        height: 471,
-        box_count: 2,
-      },
-      {
-        id: "3218037",
-        name: "This Is Where I'd Put My Trophy If I Had One",
-        url: "https://i.imgflip.com/1wz1x.jpg",
-        width: 300,
-        height: 418,
-        box_count: 2,
-      },
-      {
-        id: "259237855",
-        name: "Laughing Leo",
-        url: "https://i.imgflip.com/4acd7j.png",
-        width: 470,
-        height: 470,
-        box_count: 2,
-      },
-      {
-        id: "28251713",
-        name: "Oprah You Get A",
-        url: "https://i.imgflip.com/gtj5t.jpg",
-        width: 620,
-        height: 465,
-        box_count: 2,
-      },
-      {
-        id: "135678846",
-        name: "Who Killed Hannibal",
-        url: "https://i.imgflip.com/28s2gu.jpg",
-        width: 1280,
-        height: 1440,
-        box_count: 3,
-      },
-      {
-        id: "21735",
-        name: "The Rock Driving",
-        url: "https://i.imgflip.com/grr.jpg",
-        width: 568,
-        height: 700,
-        box_count: 2,
-      },
-      {
-        id: "99683372",
-        name: "Sleeping Shaq",
-        url: "https://i.imgflip.com/1nck6k.jpg",
-        width: 640,
-        height: 631,
-        box_count: 2,
-      },
-      {
-        id: "61520",
-        name: "Futurama Fry",
-        url: "https://i.imgflip.com/1bgw.jpg",
-        width: 552,
-        height: 414,
-        box_count: 2,
-      },
-      {
-        id: "6235864",
-        name: "Finding Neverland",
-        url: "https://i.imgflip.com/3pnmg.jpg",
-        width: 423,
-        height: 600,
-        box_count: 3,
-      },
-      {
-        id: "196652226",
-        name: "Spongebob Ight Imma Head Out",
-        url: "https://i.imgflip.com/392xtu.jpg",
-        width: 822,
-        height: 960,
-        box_count: 2,
-      },
-      {
-        id: "161865971",
-        name: "Marked Safe From",
-        url: "https://i.imgflip.com/2odckz.jpg",
-        width: 618,
-        height: 499,
-        box_count: 2,
-      },
-      {
-        id: "132769734",
-        name: "Hard To Swallow Pills",
-        url: "https://i.imgflip.com/271ps6.jpg",
-        width: 680,
-        height: 979,
-        box_count: 2,
-      },
-      {
-        id: "61556",
-        name: "Grandma Finds The Internet",
-        url: "https://i.imgflip.com/1bhw.jpg",
-        width: 640,
-        height: 480,
-        box_count: 2,
-      },
-      {
-        id: "101288",
-        name: "Third World Skeptical Kid",
-        url: "https://i.imgflip.com/265k.jpg",
-        width: 426,
-        height: 426,
-        box_count: 2,
-      },
-      {
-        id: "175540452",
-        name: "Unsettled Tom",
-        url: "https://i.imgflip.com/2wifvo.jpg",
-        width: 680,
-        height: 550,
-        box_count: 2,
-      },
-      {
-        id: "84341851",
-        name: "Evil Kermit",
-        url: "https://i.imgflip.com/1e7ql7.jpg",
-        width: 700,
-        height: 325,
-        box_count: 2,
-      },
-      {
-        id: "91545132",
-        name: "Trump Bill Signing",
-        url: "https://i.imgflip.com/1ii4oc.jpg",
-        width: 1866,
-        height: 1529,
-        box_count: 2,
-      },
-      {
-        id: "8072285",
-        name: "Doge",
-        url: "https://i.imgflip.com/4t0m5.jpg",
-        width: 620,
-        height: 620,
-        box_count: 5,
-      },
-      {
-        id: "5496396",
-        name: "Leonardo Dicaprio Cheers",
-        url: "https://i.imgflip.com/39t1o.jpg",
-        width: 600,
-        height: 400,
-        box_count: 2,
-      },
-      {
-        id: "14371066",
-        name: "Star Wars Yoda",
-        url: "https://i.imgflip.com/8k0sa.jpg",
-        width: 620,
-        height: 714,
-        box_count: 2,
-      },
-      {
-        id: "61544",
-        name: "Success Kid",
-        url: "https://i.imgflip.com/1bhk.jpg",
-        width: 500,
-        height: 500,
-        box_count: 2,
-      },
-      {
-        id: "61532",
-        name: "The Most Interesting Man In The World",
-        url: "https://i.imgflip.com/1bh8.jpg",
-        width: 550,
-        height: 690,
-        box_count: 2,
-      },
-      {
-        id: "563423",
-        name: "That Would Be Great",
-        url: "https://i.imgflip.com/c2qn.jpg",
-        width: 526,
-        height: 440,
-        box_count: 2,
-      },
-      {
-        id: "61546",
-        name: "Brace Yourselves X is Coming",
-        url: "https://i.imgflip.com/1bhm.jpg",
-        width: 622,
-        height: 477,
-        box_count: 2,
-      },
-      {
-        id: "29617627",
-        name: "Look At Me",
-        url: "https://i.imgflip.com/hmt3v.jpg",
-        width: 300,
-        height: 300,
-        box_count: 2,
-      },
-      {
-        id: "460541",
-        name: "Jack Sparrow Being Chased",
-        url: "https://i.imgflip.com/9vct.jpg",
-        width: 500,
-        height: 375,
-        box_count: 2,
-      },
-      {
-        id: "4173692",
-        name: "Scared Cat",
-        url: "https://i.imgflip.com/2hgfw.jpg",
-        width: 620,
-        height: 464,
-        box_count: 2,
-      },
-      {
-        id: "61585",
-        name: "Bad Luck Brian",
-        url: "https://i.imgflip.com/1bip.jpg",
-        width: 475,
-        height: 562,
-        box_count: 2,
-      },
-      {
-        id: "6531067",
-        name: "See Nobody Cares",
-        url: "https://i.imgflip.com/3vzej.jpg",
-        width: 620,
-        height: 676,
-        box_count: 2,
-      },
-      {
-        id: "61533",
-        name: "X All The Y",
-        url: "https://i.imgflip.com/1bh9.jpg",
-        width: 500,
-        height: 355,
-        box_count: 2,
-      },
-      {
-        id: "163573",
-        name: "Imagination Spongebob",
-        url: "https://i.imgflip.com/3i7p.jpg",
-        width: 500,
-        height: 366,
-        box_count: 2,
-      },
-      {
-        id: "28034788",
-        name: "Marvel Civil War 1",
-        url: "https://i.imgflip.com/govs4.jpg",
-        width: 423,
-        height: 734,
-        box_count: 2,
-      },
-      {
-        id: "101716",
-        name: "Yo Dawg Heard You",
-        url: "https://i.imgflip.com/26hg.jpg",
-        width: 500,
-        height: 323,
-        box_count: 2,
-      },
-      {
-        id: "61539",
-        name: "First World Problems",
-        url: "https://i.imgflip.com/1bhf.jpg",
-        width: 552,
-        height: 367,
-        box_count: 2,
-      },
-      {
-        id: "24557067",
-        name: "Afraid To Ask Andy",
-        url: "https://i.imgflip.com/emccr.jpg",
-        width: 620,
-        height: 608,
-        box_count: 2,
-      },
-      {
-        id: "1367068",
-        name: "I Should Buy A Boat Cat",
-        url: "https://i.imgflip.com/tau4.jpg",
-        width: 500,
-        height: 368,
-        box_count: 2,
-      },
-      {
-        id: "61582",
-        name: "Creepy Condescending Wonka",
-        url: "https://i.imgflip.com/1bim.jpg",
-        width: 550,
-        height: 545,
-        box_count: 2,
-      },
-      {
-        id: "8279814",
-        name: "Cute Cat",
-        url: "https://i.imgflip.com/4xgqu.jpg",
-        width: 480,
-        height: 532,
-        box_count: 2,
-      },
-      {
-        id: "405658",
-        name: "Grumpy Cat",
-        url: "https://i.imgflip.com/8p0a.jpg",
-        width: 500,
-        height: 617,
-        box_count: 2,
-      },
-      {
-        id: "101910402",
-        name: "Who Would Win?",
-        url: "https://i.imgflip.com/1ooaki.jpg",
-        width: 802,
-        height: 500,
-        box_count: 2,
-      },
-      {
-        id: "183518946",
-        name: "Blank Transparent Square",
-        url: "https://i.imgflip.com/319g4i.png",
-        width: 1000,
-        height: 1000,
-        box_count: 2,
-      },
-      {
-        id: "29562797",
-        name: "I'm The Captain Now",
-        url: "https://i.imgflip.com/hlmst.jpg",
-        width: 478,
-        height: 350,
-        box_count: 2,
-      },
-      {
-        id: "101511",
-        name: "Don't You Squidward",
-        url: "https://i.imgflip.com/26br.jpg",
-        width: 500,
-        height: 333,
-        box_count: 2,
-      },
-      {
-        id: "109765",
-        name: "I'll Just Wait Here",
-        url: "https://i.imgflip.com/2cp1.jpg",
-        width: 491,
-        height: 550,
-        box_count: 2,
-      },
-      {
-        id: "61527",
-        name: "Y U No",
-        url: "https://i.imgflip.com/1bh3.jpg",
-        width: 500,
-        height: 500,
-        box_count: 2,
-      },
-      {
-        id: "7183956",
-        name: "Oprah You Get A Car Everybody Gets A Car",
-        url: "https://i.imgflip.com/49z6c.jpg",
-        width: 620,
-        height: 1004,
-        box_count: 4,
-      },
-      {
-        id: "101287",
-        name: "Third World Success Kid",
-        url: "https://i.imgflip.com/265j.jpg",
-        width: 500,
-        height: 500,
-        box_count: 2,
-      },
-      {
-        id: "16464531",
-        name: "But That's None Of My Business",
-        url: "https://i.imgflip.com/9sw43.jpg",
-        width: 600,
-        height: 600,
-        box_count: 2,
-      },
-      {
-        id: "21604248",
-        name: "Mugatu So Hot Right Now",
-        url: "https://i.imgflip.com/cv1y0.jpg",
-        width: 620,
-        height: 497,
-        box_count: 2,
-      },
-      {
-        id: "176908",
-        name: "Shut Up And Take My Money Fry",
-        url: "https://i.imgflip.com/3si4.jpg",
-        width: 500,
-        height: 281,
-        box_count: 2,
-      },
-      {
-        id: "61580",
-        name: "Too Damn High",
-        url: "https://i.imgflip.com/1bik.jpg",
-        width: 420,
-        height: 316,
-        box_count: 2,
-      },
-      {
-        id: "89655",
-        name: "Uncle Sam",
-        url: "https://i.imgflip.com/1x6f.jpg",
-        width: 620,
-        height: 833,
-        box_count: 2,
-      },
-      {
-        id: "61581",
-        name: "Put It Somewhere Else Patrick",
-        url: "https://i.imgflip.com/1bil.jpg",
-        width: 343,
-        height: 604,
-        box_count: 2,
-      },
-      {
-        id: "285870",
-        name: "Squidward",
-        url: "https://i.imgflip.com/64ku.jpg",
-        width: 500,
-        height: 750,
-        box_count: 2,
-      },
-      {
-        id: "40945639",
-        name: "Dr Evil Laser",
-        url: "https://i.imgflip.com/odluv.jpg",
-        width: 500,
-        height: 405,
-        box_count: 2,
-      },
-      {
-        id: "444501",
-        name: "Maury Lie Detector",
-        url: "https://i.imgflip.com/9iz9.jpg",
-        width: 381,
-        height: 378,
-        box_count: 2,
-      },
-      {
-        id: "1464444",
-        name: "Happy Star Congratulations",
-        url: "https://i.imgflip.com/vdz0.jpg",
-        width: 450,
-        height: 292,
-        box_count: 4,
-      },
-      {
-        id: "142921050",
-        name: "Car Salesman Slaps Roof Of Car",
-        url: "https://i.imgflip.com/2d3al6.jpg",
-        width: 800,
-        height: 450,
-        box_count: 2,
-      },
-      {
-        id: "71428573",
-        name: "Say it Again, Dexter",
-        url: "https://i.imgflip.com/16iyn1.jpg",
-        width: 698,
-        height: 900,
-        box_count: 2,
-      },
-      {
-        id: "100947",
-        name: "Matrix Morpheus",
-        url: "https://i.imgflip.com/25w3.jpg",
-        width: 500,
-        height: 303,
-        box_count: 2,
-      },
-    ],
-  },
-};
diff --git a/src/index.css b/src/index.css
index 78dcb85..8abebc7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -58,7 +58,37 @@ main {
   cursor: pointer;
 }
 
+.meme {
+  position: relative;
+}
+
 .meme-image {
   width: 100%;
   border-radius: 3px;
 }
+
+.meme--text {
+  position: absolute;
+  width: 80%;
+  text-align: center;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 15px 0;
+  padding: 0 5px;
+  font-family: impact, sans-serif;
+  font-size: 2em;
+  text-transform: uppercase;
+  color: white;
+  letter-spacing: 1px;
+  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000,
+    -2px 2px 0 #000, 0 2px 0 #000, 2px 0 0 #000, 0 -2px 0 #000, -2px 0 0 #000,
+    2px 2px 5px #000;
+}
+
+.bottom {
+  bottom: 0;
+}
+
+.top {
+  top: 0;
+}