Perfection

static/css/index.css

@@ -1,14 +1,20 @@
+html {
+	height:100%;
+	width:100%;
+}
 body {
 	user-select:none;
 	font-family:arial;
 	text-align:center;
-	margin:20px;
+	height:100%;
+	width:100%;
+	margin:0px;
+}
+#numbers, #input, h1, input[type=text] {
+	max-width:700px;
+	min-width:200px;
 	margin-left:auto;
 	margin-right:auto;
-	min-width:300px;
-	max-width:700px;
-	padding-left:20px;
-	padding-right:20px;
 }
 #input, input[type=text] {
 	text-align:center;
@@ -60,7 +66,7 @@ body {
 #info {
 	position:fixed;
 	top:10px;
-	right:10px;
+	right:30px;
 	width:20px;
 	height:20px;
 	background-color:lightgray;
@@ -86,7 +92,7 @@ body {
 img.l {
 	position:fixed;
 	bottom:10px;
-	right:10px;
+	right:30px;
 	z-index:10;
 }
 #legend, #question {
@@ -101,13 +107,16 @@ img.l {
 }
 #legend {
 	text-align:left;
-	padding:30px;
+	padding:0px 30px 30px 30px;
 	width:calc(100% - 60px);
-	height:calc(100% - 60px);
+	height:calc(100% - 30px);
 	overflow:auto;
 }
-body.blur {
-	overflow:hidden;
+#main {
+	height:100%;
+	width:100%;
+	overflow:auto;
+	overflow-y:scroll;
 }
 #main.blur {
 	filter:blur(5px);
@@ -137,9 +146,10 @@ input[type=text] {
 	background-color:whitesmoke;
 	outline:none;
 	border:0px;
-	width:100%;
+	width:calc(100% - 20px);
 	height:40px;
-	padding:0px;
+	padding-left:10px;
+	padding-right:10px;
 	line-height:40px;
 	border-radius:20px;
 	margin-top:30px;