pub

css/style.css

@@ -13,11 +13,21 @@ html{
 body{
   display: grid;
   width:100%;
-  grid-template-columns: 10vw 80vw 10vw;
+  grid-template-columns: 10vw 78.5vw 10vw;
   grid-template-rows: auto auto auto;
   grid-auto-rows: minmax(auto, auto);
   background:linear-gradient(lightgray, #775cff);
 }
+@media only screen and (max-width: 850px) {
+  body {
+    grid-template-columns: 10vw 78vw 10vw;
+  }
+}
+@media only screen and (max-width: 550px) {
+  body {
+    grid-template-columns: 10vw 77vw 10vw;
+  }
+}
 
 
 main{
@@ -55,16 +65,14 @@ main{
   grid-row-start: 2;
   grid-row-end: 2;
   z-index:3;
-  background-color: green;
+  margin:1%;
 }
-
-
-
-@media only screen and (max-width: 600px) {
-  main {
-    width:100%;
-    background: none;
-  }
+.pubD img{
+  margin-top: 50%;
+  width:100%;
+  border-color: black;
+  border-width: 1px;
+  border-style: solid;
 }
 
 footer {

css/upload.css

@@ -9,5 +9,38 @@
     border-style:solid;
     border-width:10px;
     border-color: white;
-    border-radius:100px;
-}
+    border-radius:10px;
+}
+.title{
+    text-align: center;
+    font-size: 200%;
+}
+.dragndrop{
+    background: rgba(0, 0, 0, 0.212);
+    border-style:dotted;
+    border-width:7px;
+    border-radius:10px;
+    width:80%;
+    margin: auto;
+}
+.dragndrop:hover{
+    background: rgba(100, 100, 100, 0.212);
+}
+.dragndrop img{
+    margin-left: 46%;
+    margin-bottom: 20%;
+    width:8%;
+}
+.dragndrop:hover img{
+    margin-left: 45%;
+    margin-bottom: 17.34%;
+    width:10%;
+}
+.dragndrop-title{
+    text-align: center;
+    margin-top:10%;
+}
+.warning{
+    text-align: center;
+    color: white;
+}