diff --git a/css/style.css b/css/style.css
index 1c05fb8..8febf26 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,15 +1,23 @@
 
-:root {
-  --main-color: #01a4e4;
-  --main-gray: #3d3d3d;
+:root { 
+  --kpedu: #01a4e4;  /*Matti nimes muuttujat*/
+  --Pääharmaa: #3d3d3d;
   color-scheme: light dark;
+  --MUSTA: 	#40444b;
+  --MUSTA2: #c2c2c2;
+  --MUSTA3:  #2f3136;
+  --Valkoinen: white;
+  --Porche-911: #999999;
+  
 }
 
 * {
     font-family: sans-serif;
     
 }
-
+body{
+    background-color: light-dark(var(--Valkoinen),var(--MUSTA));
+}
 
 a {
     text-decoration: none;
@@ -18,8 +26,8 @@ a {
 
 button {
     border: none;
-	background-color: var(--main-color);
-    color: white;
+	background-color:  light-dark(var(--Valkoinen),var(--MUSTA));
+    color: var(--Valkoinen);
     padding: 6px 8px;
     border-radius: 10%;
     cursor: pointer;
@@ -37,7 +45,7 @@ table {
   table-layout: fixed;
   border-collapse: collapse;
   border-top: 1px solid #999999;
-  border-bottom: 1px solid #999999;
+  border-bottom: 1px light
 }
 
 th,
@@ -47,7 +55,7 @@ td {
 }
 
 tbody tr:nth-child(odd) {
-  background-color: #eeeeee;
+  background-color: light-dark(var(--Valkoinen),var(--MUSTA));;
 }
 
 thead tr th:nth-child(1), /* Siivoa jos osaat css */
@@ -55,7 +63,7 @@ tbody tr td:nth-child(1) {
 	position: sticky;
 	left: 0;
 	z-index: 0;
-	background-color: var(--main-color) ;
+	background-color: light-dark(var(--kpedu),var(--MUSTA));
 }
 
 .table-container{
@@ -79,8 +87,8 @@ footer{
     left: 0;
     bottom: 0;
     width: 100%;
-    background-color: light-dark(white,black);
-    color: light-dark (white,black);
+    background-color: light-dark(var(--Valkoinen), var(--MUSTA3));
+    color: light-dark (var(--Valkoinen), var(--MUSTA3));
     text-align: center;
 }
 
@@ -89,7 +97,7 @@ header {
 }
 
 .navigaatio {
-    background-color: light-dark(white,black);
+    background-color:light-dark(var(--Valkoinen),var(--MU));
     position: sticky; 
     top: 0;
     overflow: hidden;
@@ -106,18 +114,18 @@ header {
     display: flex;
     flex-direction: row;
     gap: 4px;
-    color: light-dark( var(--main-gray),#c2c2c2);
+    color: light-dark( var(--Pääharmaa),#c2c2c2);
 }
 
 .navigaatio-osio a {
-    color:  light-dark( var(--main-gray),#c2c2c2);
+    color:  light-dark( var(--Pääharmaa),#c2c2c2);
 }
 
 .navigaatio-osio a:hover {
-    color:  light-dark( var(--main-gray),#c2c2c2);
+    color:  light-dark( var(--Pääharmaa),#c2c2c2);
 }
 
 footer {
-    color:  light-dark( var(--main-gray),#c2c2c2);
+    color:  light-dark( var(--Pääharmaa),#c2c2c2);
 }
-
+body