diff --git a/index.html b/index.html
index 18a343e..5880f4c 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Piano</title>
     <link rel="stylesheet" href="../cssfiles/style.css">
+    <link rel="stylesheet" href="cssfiles/style.css">
+
 </head>
 <body>
     <div class="piano">
@@ -19,5 +21,7 @@
         <div class="key" data-note="493.88"><kbd>J</kbd></div> 
     </div>
     <script src="../javascriptfiles/script.js"></script>
+    <script src="javascriptfiles/script.js"></script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..368c4fa
--- /dev/null
+++ b/style.css
@@ -0,0 +1,37 @@
+
+body {
+    /*  font-family: Arial, sans-serif; */
+     font-family: "Sofia", sans-serif;
+     background: url('https://source.unsplash.com/1920x1080/?piano,art,music') center/cover fixed no-repeat;
+     color: #333;
+     margin: 1;
+     padding: 0;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     height: 100vh;
+  }
+  
+  .piano {
+      display: flex;
+  
+    }
+    
+    
+    .key {
+      width: 75px;
+      height: 220px;
+      background: white;
+      border:5px solid black;
+      cursor: pointer;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      position: relative;
+    }
+    .key:hover{
+      display: ruby-base;
+      background-color: aquamarine;
+  
+    }
+    
\ No newline at end of file
