From 78e2b852f5daf0219ac98780b0a9ee9f6535c31d Mon Sep 17 00:00:00 2001
From: Yasuaki Uechi <y@uechi.io>
Date: Wed, 31 Jul 2019 03:52:17 +0900
Subject: [PATCH] fix: centerize form

---
 src/App.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index c219b1a..5712962 100644
--- a/src/App.js
+++ b/src/App.js
@@ -104,10 +104,16 @@ const Input = styled.input`
   margin-top: 20px;
   padding: 20px;
   outline: none;
+  text-align: center;
   font-size: 4rem;
   font-family: monospace;
   border: none;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+
+  transition: box-shadow 0.5s ease-out;
+
+  &:hover {
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  }
 
   @media screen and (max-width: 800px) {
     font-size: 2rem;
@@ -126,7 +132,7 @@ const ResultHeader = styled.div`
 `
 
 const Footer = styled.footer`
-  margin-top: 40px;
+  margin: 40px 0;
   text-align: center;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;