1 files changed, 21 insertions, 52 deletions

diff --git a/static/styles.css b/static/styles.css
index b57c82a..eca59a2 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,50 +1,8 @@
-@font-face {
-    font-family: EBGaramond;
-    src: url(/prosodyle/static/EBGaramond-VariableFont_wght.ttf) format('woff2-variations');
-    font-style: normal;
-}
-
-@font-face {
-    font-family: EBGaramond;
-    src: url(/prosodyle/static/EBGaramond-Italic-VariableFont_wght.ttf) format('woff2-variations');
-    font-style: italic;
-}
-
-body {
-	background: #fdf3f3;
-	color: DarkSlateGrey;
-	font-family: EBGaramond, serif;
-    font-size: large;
-}
-
-a {
-	color: #1a97bf;
-}
-
-a:hover {
-	color: #075d77;
-}
-
-.container {
-    margin: 1em;
-    max-width: 40em;
-}
-
-.title {
-	letter-spacing: -0.5px;
-	font-weight: bold;
-}
-
 form {
 	border: 1px DarkSlateGrey solid;
-    padding: 10px;
-    padding-left: 20px;
-    padding-right: 20px;
-}
-
-.sep {
-    margin-left: 6px;
-    margin-right: 6px;
+    padding: 1em;
+    padding-left: 2em;
+    padding-right: 2em;
 }
 
 button {
@@ -67,26 +25,33 @@ button {
 	line-height: 25px;
 	font-family: Cantarell;
 }
+
 .focus {
 	background-color: #fff079;
 }
+
 .syllable .box:not(:first-child) {
 	margin-left: -1px;
 	border-left-style: dotted;
 }
+
 .syllable .box:not(:last-child) {
 	margin-right: -1px;
 	border-right-style: dotted;
 }
+
 .word .syllable:not(:first-child) {
 	margin-left: -1px;
 }
+
 .word .syllable:not(:last-child) {
 	margin-right: -1px;
 }
+
 .syllable.stress + .syllable .entrybox:first-child {
 	border-left-color: darkslategrey;
 }
+
 .stress {
 	z-index: 9999;
 }
@@ -150,20 +115,24 @@ hr {
 }
 
 .keyboard {
-	border-top: 2px darkslategrey solid;
-	padding-top:10px;
-	padding-bottom:7px;
-	background-color: #fdf3f3;
-	position: sticky;
-	bottom: 0;
+    display: inline-block;
 	text-align: center;
     max-width: 40em;
-    left: 26px;
 	touch-action: manipulation;
 }
+
+@media only screen and (min-width: 600px) {
+    .keyboard {
+        border: 1px darkslategrey dotted;
+        border-radius: 4px;
+        padding: 1.2em;
+    }
+}
+
 .kbrow {
 	margin-bottom: 5px;
 }
+
 .key {
 	font-family: Cantarell;
 	display: inline-block;