Make the upside down demo page display upside down

Author: agwells

demo/src/App.css

@@ -31,3 +31,4 @@
     transform: rotate(360deg);
   }
 }
+

demo/src/App.js

@@ -21,7 +21,7 @@ With many cheerful facts about the square of the hypotenuse.`
     <div className="App" style={{ margin: '5vh' }}>
       <header className="App-header">
         <h1>talk-like-a</h1>
-        <p>{filter('Transform plain English text in various comedic ways.')}</p>
+        <p className={filterName}>{filter('Transform plain English text in various comedic ways.')}</p>
         <ul>
           <li>
             Github:{' '}
@@ -59,7 +59,7 @@ With many cheerful facts about the square of the hypotenuse.`
             onChange={(e) => setPlainText(e.target.value)}
           />
         </p>
-        <pre>{filter(plainText)}</pre>
+        <pre className={filterName}>{filter(plainText)}</pre>
       </main>
     </div>
   );

demo/src/index.css

@@ -11,3 +11,10 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.upsidedown {
+  transform: rotate(180deg);
+  text-align: right;
+  transition: transform 1s;
+  transform: text-align 1s;
+}