css for mobile display

static/css/style.css

@@ -168,7 +168,7 @@ div.explanation{
 /* NAVIGATION */
 /********************************************************/
 
-header{
+/*header{
   margin-top: 7em;
   margin-right: 10em;
   position: absolute;
@@ -183,7 +183,7 @@ header{
 			-ms-transform: rotate(-90deg) translate(-50%, 50%);
 			 -o-transform: rotate(-90deg) translate(-50%, 50%);
 					transform: rotate(-90deg) translate(-50%, 50%);
-}
+}*/
 
 #logobox{
   display: inline-block;
@@ -234,6 +234,7 @@ div.generate-button {
   animation: giro 24s infinite linear;
   background:red;
   position: fixed;
+  z-index: 2000.
 }
 
 div.generate-button > span:first-child {
@@ -269,6 +270,7 @@ div.generate-button-index {
   animation: giro 7.5s infinite linear;
   background: magenta;
   position: fixed;
+  z-index: 2000;
 }
 
 div.generate-button-index > span:first-child {
@@ -303,6 +305,7 @@ div.generate-button-about {
   animation: girominus 10s infinite linear;
   background:yellow;
   position: fixed;
+  z-index: 2000;
 
 }
 div.generate-button-about > span:first-child {
@@ -521,7 +524,7 @@ div.theindexpage{
   color: black;
   width: 80%;
   height: 98%;
-  display: inline-block;
+  /*display: inline-block;*/
 }
 .foldersindex a:hover{
   background-color: red;
@@ -545,11 +548,30 @@ a.li-index:hover {
 /********************************************************/
 /* OTHER DISPLAYS */
 /********************************************************/
+
+@media screen and (min-width: 600px) {
+  header{
+  margin-top: 7em;
+  margin-right: 10em;
+  position: absolute;
+  top:17em;
+  -webkit-transform-origin: 0 50%;
+     -moz-transform-origin: 0 50%;
+      -ms-transform-origin: 0 50%;
+       -o-transform-origin: 0 50%;
+          transform-origin: 0 50%;
+  -webkit-transform: rotate(-90deg) translate(-50%, 50%);
+     -moz-transform: rotate(-90deg) translate(-50%, 50%);
+      -ms-transform: rotate(-90deg) translate(-50%, 50%);
+       -o-transform: rotate(-90deg) translate(-50%, 50%);
+          transform: rotate(-90deg) translate(-50%, 50%);
+}
+  }
 /* Use a media query to add a breakpoint at 800px: */
 @media screen and (max-width: 600px) {
   /*all pages*/
   div.content-block {
-    padding: 0em 2em 0em 2.5em; /* The width is 100%, when the viewport is 800px or smaller */
+    padding: 0em 2em 0em 2em; /* The width is 100%, when the viewport is 800px or smaller */
   }
   #logobox{
     padding: 0em;
@@ -557,6 +579,10 @@ a.li-index:hover {
   /*home*/
   div.home{
     padding: 0em;
+    text-align: left;
+  }
+  div.explanation{
+    margin: 0.5em;
   }
   /*diverge*/
   div.diverge_all{
@@ -576,8 +602,32 @@ a.li-index:hover {
     display: flex;
     flex-direction: column-reverse;
   }
+  img{
+    max-width: 100%
+  }
   /*index*/
   div.theindexpage{
     width: 100%;
   }
+  /*pushingscores*/
+  header {
+      bottom: 0em;
+      margin-bottom: 0em;
+      position: fixed;
+      z-index: 1000;
+      width: 100%;
+      background-color: red;
+}
+div#logobox {
+    width: 100%;
+
+}
+#logobox a, #logobox a:visited{
+  color: black;
+}
+h1.logo {
+    text-align: center;
+    padding: 0px;
+    margin: 0;
+}
 }