Fiksa litt css

css/main.css

@@ -7,6 +7,8 @@
   --dark-text-color: #eeeeee;
   --dark-btn-color: #303f9f;
   --dark-link-color: #5C6BC0;
+  --dark-shadow-color: #1a1a1a;
+
 }
 body {
   min-height: 100%;
@@ -20,6 +22,7 @@ body {
   --text-color: black;
   --btn-color: #303f9f;
   --link-color: #3949AB;
+  --shadow-color: rgba(0,0,0,.15);
   background-color: var(--bg-color);
   color: var(--text-color);
 
@@ -78,6 +81,7 @@ a {
 /* Container for main content */
 .cont {
   margin: auto;
+  min-width: 20%;
   background: var(--cont-bg-color);
   border-radius: 1rem;
   grid-area: main;
@@ -99,17 +103,16 @@ a {
   background-repeat: no-repeat;
   width: 10rem;
   height: 8rem;
-  border: thin solid #3c4043;
-  border-radius: 0.5rem;
-  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
 
-.service-list li:hover {
+.service-list li a:focus {
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-  box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important;
-
+  box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem var(--shadow-color) !important;
+}
+.service-list li a:hover {
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem var(--shadow-color) !important;
 }
-
 
 .service-list li a {
   font-size: 1.5rem;
@@ -124,6 +127,10 @@ a {
   flex-flow: column;
   align-items: center;
   justify-content: center;
+
+  border: thin solid #3c4043;
+  border-radius: 0.5rem;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
 
 .service-list li a div {
@@ -140,10 +147,23 @@ a {
 
 @media screen and (max-width:600px){
   .cont {
+    max-width: 100%;
     width: calc(100% - 0.5rem);
     padding: 0.25rem;
   }
 }
+@media only screen and (max-width:800px){
+  .cont {
+    max-width: 90%;
+  }
+}
+
+@media only screen and (min-width:800px){
+  .cont {
+    max-width: 80%;
+  }
+}
+
 @media only screen and (min-width:1000px){
   .cont {
     padding: 1rem;
@@ -161,6 +181,9 @@ a {
   html {              
     font-size: 20px;
   }
+  .cont {
+    max-width: 40%;
+  }
 }
 
 
@@ -175,6 +198,7 @@ a {
     --btn-color: var(--dark-btn-color);
     --accent-color: var(--dark-accent-color);
     --link-color: var(--dark-link-color);
+    --shadow-color: var(--dark-shadow-color);
     }    
     #li-nextcloud {  }
     #li-matrix { filter: invert(); }