Updated css

resources/css/main.css

@@ -54,6 +54,27 @@ input[type=color] {
   background-color: #787878;
 }
 
+table {
+  width: 100%;
+}
+
+td, th {
+  border: 1px solid white;
+  padding: 8px;
+}
+
+th {
+  text-align: left;
+  background-color: #4CAF50;
+}
+
+tr:nth-child(even) {
+  background-color: #00000033;
+}
+tr:hover {
+  background-color: rgba(255, 255, 255, 0.281);
+}
+
 .center {
   background-color: #505050;
   margin: auto;
@@ -80,23 +101,32 @@ input[type=color] {
   text-align: left;
 }
 
-table {
-  width: 100%;
+.textboxGrid {
+  display: grid;
+  justify-content: space-evenly;
+  align-content: space-evenly;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: auto;
+  grid-row-gap: 20px;
 }
-
-td, th {
-  border: 1px solid white;
-  padding: 8px;
+.textboxGrid * {
+  size: 100%;
+  padding: 40px 80px;
+  background-color: #787878;
 }
-
-th {
-  text-align: left;
-  background-color: #4CAF50;
+.textboxGrid .linkElement {
+  border: 1px solid black;
 }
-
-tr:nth-child(even) {
-  background-color: #00000033;
+.textboxGrid .linkElement:hover {
+  background-color: #505050;
+  cursor: pointer;
 }
-tr:hover {
-  background-color: rgba(255, 255, 255, 0.281);
+.textboxGrid .linkElement a:hover {
+  text-decoration: underline;
+  color: #66D9EF;
+}
+.textboxGrid .linkElement * {
+  margin: 0px;
+  padding: 0px;
+  background-color: transparent;
 }

resources/css/scss/_classes.scss

@@ -0,0 +1,67 @@
+.center {
+    background-color: $grey3;
+    margin: auto;
+    margin-bottom: 10%;
+    width: 70%;
+    padding: 5%;
+    height: max-content;
+    border-radius: $radius;
+    
+    * {
+        margin: auto;
+        display: block;
+    }
+}
+
+.inline {
+    margin: $standardMargin;
+    * {display: inline-block;}
+}
+
+.leftalign * {
+    margin: $standardMargin;
+    text-align: left;
+}
+
+.textboxGrid {
+
+    display: grid;
+    justify-content: space-evenly;
+    align-content: space-evenly;
+
+    grid: {
+        template-columns: repeat(3, 1fr);
+
+        column-gap: auto;
+        row-gap: 20px;
+    }
+
+    * {
+
+        size: 100%;
+        padding: 40px 80px;
+        background-color: $grey4;
+
+    }
+
+    .linkElement {
+        border: 1px solid black;
+
+        &:hover {
+            background-color: $grey3;
+            cursor: pointer;
+        }
+
+        a:hover {
+            text-decoration: underline;
+            color: $linkStill;
+        }
+
+        * {
+            margin: 0px;
+            padding: 0px;
+            background-color: transparent;
+        }
+
+    }
+}

resources/css/scss/_colors.scss

@@ -10,6 +10,8 @@ $grey3: rgb(80, 80, 80);
 $grey4: rgb(120, 120, 120);
 
 $border-color: white;
+$linkStill: #66D9EF;
+$linkHover: #A6E22E;;
 
 $radius: 15px;
 $standardMargin: 15px;

resources/css/scss/main.scss

@@ -48,8 +48,8 @@ h2 {
 }
  
 a { 
-    color: #66D9EF;
-    &:hover { color: #A6E22E; }
+    color: $linkStill;
+    &:hover {color: $linkHover;}
 }
 
 input[type=color] {
@@ -57,31 +57,6 @@ input[type=color] {
     height: 2em;
     background-color: $grey4;
 }
- 
-.center {
-    background-color: $grey3;
-    margin: auto;
-    margin-bottom: 10%;
-    width: 70%;
-    padding: 5%;
-    height: max-content;
-    border-radius: $radius;
-    
-    * {
-        margin: auto;
-        display: block;
-    }
-}
-
-.inline {
-    margin: $standardMargin;
-    * {display: inline-block;}
-}
-
-.leftalign * {
-    margin: $standardMargin;
-    text-align: left;
-}
 
 table {
     width: 100%;
@@ -100,4 +75,6 @@ th {
 tr {
 	&:nth-child(even) { background-color: #00000033;}
 	&:hover { background-color: rgba(255, 255, 255, 0.281);}
-}
+}
+
+@import "classes";