Update style.css

Author: AdishiSood

DrumKit/style.css

@@ -1,165 +1,58 @@
-@import url(https://fonts.googleapis.com/css?family=Handlee|Pacifico);
-
-html,
-body {
-	padding: 0;
-	margin: 0;
-	background-color: #fff;
-}
-
-.main-wrapper {
-	margin: 30px auto 0;
-	width: 1080px;
-	text-align: center;
-}
-
-.main-title {
-	font-family: 'Pacifico', cursive;
-	text-align: center;
-	font-size: 3.2em;
-	color: #cb2026;
-	text-shadow: 1px 1px 1px #5a0b0d;
-}
-
-.drum-kit-wrapper {
-	position: relative;
-	width: 600px;
-	margin: -100px auto 0;
-}
-
-.drum-kit {
-	width: 100%;
-	height: 520px;
-	position: relative;
-}
-
-.crash-cymbal {
-	position: absolute;
-	top: 114px;
-    left: 80px;
-    transform: rotate(-7.2deg) scale(1.5);
-    transition: all ease-in-out .042s;
-}
-
-.hihat-top-cymbal {
-	position: absolute;
-    top: 166px;
-    right: 71px;
-    transform: scale(1.35);
-    z-index: 0;
-    transition: all ease-in-out .042s;
-}
-
-.key {
-	display: inline-block;
-	transition: all ease-in-out .042s;
-	position: absolute;
-	background: #eaeaea;
-    font-size: 1.5em;
-    height: 32px;
-    width: 32px;
+html
+{
+    font-size:10px;
+    background: url('https://i.imgur.com/XSUEg63.jpg') bottom center;
+    background-size: cover;
+}
+
+body,html
+{
+    margin: 0;
+    padding:0;
+    font-family: cursive;
+}
+
+.keys
+{
+    display:flex;
+    flex: 1;
+    min-height:100vh;
+    align-items: center;
+    justify-content:center;
+}
+
+.key
+{
+    border: .4rem solid black;
+    border-radius: 1.8rem;
+    margin: 1rem;
+    font-size: 1.5rem;
+    padding: 1rem .5rem;
+    transition: all .07s ease;
+    width: 10rem;
     text-align: center;
-    border-radius: 4px;
-    border: 3px solid #aaa;
-    color: #444;
-    box-shadow: 1px 1px 1px rgba(0,0,0,.65);
-    z-index: 2;
-}
-
-.key.kick {
-	top: 355px;
-    right: 250px;
-}
-
-.key.kick2 {
-    top: 355px;
-    right: 308px;
-}
-
-.key.snare {
-	right: 145px;
-    top: 280px;
-}
-
-.key.tom-high {
-	right: 227px;
-    top: 240px;
-}
-
-.key.tom-mid {
-	left: 222px;
-    top: 220px;
-}
-
-.key.tom-low {
-	top: 320px;
-    left: 133px;
-}
-
-.key.crash {
-	top: 80px;
-    left: 75px;
-}
-
-.key.ride {
-	left: 165px;
-    top: 87px;
-}
-
-.key.hihat-open {
-	right: 165px;
-    top: 144px;
-}
-
-.key.hihat-close {
-	right: 60px;
-    top: 150px;
-}
-
-.playing {
-	transform: scale(1.12);
-}
-
-.key-map-wrapper {
-	position: absolute;
-    right: 0;
-    top: 0;
-    height: 700px;
-    background: #111;
-    width: 250px;
-    z-index: 3;
-}
-
-.key-map-wrapper > h2 {
-	color: #fff;
-	font-family: 'Handlee', cursive;
-	margin-bottom: 35px;
-	border-bottom: 1px solid #fff;
-    padding-bottom: 20px;
-}
-
-.key-map-list {
-	list-style: none;
-	color: #fff;
-	text-align: left;
+    color: white;
+    background: rgba(0,0,0,0.4);
+    text-shadow: 0 0 .5rem black;
 }
 
-.key-map-list > li {
-	margin-bottom: 25px;
+.playing 
+{
+  transform: scale(1.1);
+  border-color: #ffc600;
+  box-shadow: 0 0 1rem #ffc600;
 }
 
-.key-code {
-	color: #444;
-    background-color: #eaeaea;
-    font-size: 1.25em;
-    padding: 5px 10px;
-    border-radius: 4px;
-    border: 3px solid #aaa;
+kbd 
+{
+  display: block;
+  font-size: 4rem;
 }
 
-.key-sound {
-	font-size: 1.2em;
-	margin-left: 10px;
-	font-family: 'Handlee', cursive;
-	vertical-align: middle;
+.sound 
+{
+  font-size: 1.2rem;
+  text-transform: uppercase;
+  letter-spacing: .1rem;
+  color: #ffc600;
 }