first small changes for mobile and slow computers

library/static/css/dropdown.css

@@ -53,3 +53,15 @@
 
 /* Change the background color of the dropdown button when the dropdown content is shown */
 .dropdown:hover .dropbtn {background-color: #3e8e41;}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px)  {
+  .dropdown-content button {
+      font-size: 1.6em;
+  }
+  .container > button {
+      font-size: 1.6em;
+  }
+  .dropdown > button {
+      font-size: 1.6em;
+  }
+}

library/static/css/style.css

@@ -5,7 +5,6 @@ html, body {
 
 body:after {
   font-size: .8em;
-  background-color: #EB4377;
   position: fixed;
   width: 100%;
   text-align: center;
@@ -16,7 +15,6 @@ body:after {
   width: 1px; height: 1px;
   transform: translate(-100%, -100%);
   border-radius: 50%;
-  filter: url(#filter);
 	z-index: -1;
 	position: fixed;
 }
@@ -148,3 +146,9 @@ a:link { text-decoration: none; }
 a:visited { text-decoration: none; }
 a:hover { text-decoration: none; }
 a:active { text-decoration: none; }
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px)  {
+  td {
+      font-size: 1.6em;
+  }
+}

library/static/js/script.js

@@ -11,7 +11,7 @@ function boxShadows(max) {
   let ret = [];
   for (let i = 0; i < max; ++i) {
     ret.push(`
-      ${ rn(1, 100) }vw ${ rn(1, 100) }vh ${ rn(20, 60) }vmin ${ rn(10, 30) }vmin
+      ${ rn(1, 110) }vw ${ rn(1, 110) }vh ${ rn(20, 30) }vmin ${ rn(10, 60) }vmin
       ${ rs('#F52D75', '#CCBD4F', '#32497F', '#EB4377') }
     `)
   }
@@ -21,7 +21,12 @@ function boxShadows(max) {
 const cloud = document.querySelector('#cloud');
 
 function update() {
-  cloud.style.boxShadow = boxShadows(30);
+  if (window.screen.availWidth > 400 && window.screen.availHeight > 400 ) {
+    cloud.style.boxShadow = boxShadows(15);
+  }
+  else {
+    document.body.style.backgroundImage = "linear-gradient(to bottom right, white, #F52D75)";
+  }
 }
 
 window.addEventListener('load', update);