style: fix responsive design

index.html

@@ -7,11 +7,11 @@
     <style>
       a {
         text-decoration: none;
-        color: black;
+        color: white;
       }
 
       a:hover {
-        color: black;
+        color: white;
         text-decoration: underline;
       }
 
@@ -174,7 +174,7 @@
           width: 290px;
           display: grid;
           grid-template-columns: 141px 141px;
-          grid-template-rows: 340px 160px 160px;
+          grid-template-rows: 352px 160px 160px;
           gap: 8px 8px;
           grid-auto-flow: row;
           grid-template-areas:
@@ -199,7 +199,7 @@
           height: 160px;
           transition-property: opacity;
           transition-duration: 500ms;
-          opacity: 0.3;
+          opacity: 0.8;
         }
 
         .app-disabled {
@@ -223,17 +223,17 @@
 
         .app1 {
           grid-area: app1;
-          padding: 20px 0;
+          padding: 0 0;
         }
 
         .app2 {
           grid-area: app2;
-          padding: 20px 0;
+          padding: 0 0;
         }
 
         .app3 {
           grid-area: app3;
-          padding: 20px 0;
+          padding: 0 0;
         }
       }
 
@@ -249,6 +249,16 @@
         .app-disabled {
           border: 1px solid black;
         }
+
+        a {
+          text-decoration: none;
+          color: black;
+        }
+
+        a:hover {
+          color: black;
+          text-decoration: underline;
+        }
       }
     </style>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />