From 0b23d4c0b210cbc5b58900c8de0a80b7ae55b1d4 Mon Sep 17 00:00:00 2001
From: Luke Childs <lukechilds123@gmail.com>
Date: Thu, 10 Jan 2019 12:55:38 +0700
Subject: [PATCH] Vertically center seed phrase text in box

---
 website/index.html |  4 +++-
 website/style.css  | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/website/index.html b/website/index.html
index 51e49f8..b955d4d 100644
--- a/website/index.html
+++ b/website/index.html
@@ -16,7 +16,9 @@
 
     <section class="generator">
       <div class="wrapper">
-        <div class="seed-text"></div>
+        <div class="seed-text-container">
+          <div class="seed-text"></div>
+        </div>
         <strong>Word Count</strong>
         <div class="bit-slider"></div>
         <button class="regenerate-seed" type="button">Regenerate Seed</button>
diff --git a/website/style.css b/website/style.css
index fd1b040..a7fa1b9 100644
--- a/website/style.css
+++ b/website/style.css
@@ -24,17 +24,28 @@ body {
   text-align: center;
 }
 
-.generator .seed-text {
+.generator .seed-text-container {
+  position: relative;
   background-color: rgba(0, 0, 0, 0.05);
   border: 2px solid rgba(0, 0, 0, 0.1);
   border-radius: 4px;
-  padding: 1em;
   text-align: center;
   font-size: 1.4em;
   font-family: "Comic Sans MS", cursive, sans-serif;
+  height: 4em;
   margin-bottom: 1em;
 }
 
+.generator .seed-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 1em;
+}
+
 .generator .seed-text span:nth-of-type(1),
 .generator .seed-text span:nth-of-type(2) {
   color: red;