lot of style changes

style.css

@@ -1,14 +1,34 @@
-html {
-        max-width: 1500px;
+body{
+        position: relative;
+        min-height: 100vh;
+        margin: 0;
+}
+.core {
+        font-family: 'Roboto', sans-serif;
+        max-width: 900px;
         margin: auto;
-        display: inline-block;
+        padding: 5px;
         padding-top:50px;
-        text-align: center;
-     
+        text-align: center; 
+        padding-bottom: 85px;
+}
+
+@media  (min-width: 370px) {
+        .core {
+                padding-bottom: 65px;
+        }
+}
+@media  (min-width: 600px) {
+        .core {
+                padding-bottom: 45px;
+        }
+}
+
+h1 {
+        font-size: 38;
 }
        
 .dragndrop { 
-        margin: 20%;
         margin-top: 5%;
         margin-bottom: 3%;
         background-color: #a3a3a3;
@@ -16,34 +36,37 @@ html {
         padding-top: 5%;
         height:40%; 
         font-size: 20px;   
-        cursor: pointer;
         border: 6px dashed #444444;
         border-radius: 20px;
         
 }
-.dragover {
-        background-color: #888888;
+.dragndrop .button {
+        cursor: pointer;
 }
-.dragndrop:hover { 
+.dragover {
         background-color: #888888;
 }
 
 .infobox {
         text-align: left;
         background: #eeeeee;
-        margin-left: 20%;
-        margin-right:20%;
         border-radius: 20px;
         border: 4px solid #a3a3a3;
         padding: 10px;
 }
 
-.footer {
-        position: fixed;
-        padding: 1%;
+footer {
+        position: absolute;
+        padding-top: 10px;
+        padding-bottom: 10px;
         bottom: 0;
-        left: 0;
         width: 100%;
         text-align: center;
         background-color: #eeeeee;
 }
+
+footer a {
+        color: #555;
+        font-weight: bold;
+        text-decoration: none;
+}