Change px to em

style.css

@@ -109,7 +109,7 @@ hr {
 
 .notATable>li>* {
   display: table-cell;
-  padding: 2px;
+  padding: 0.125em;
 }
 
 
@@ -123,7 +123,7 @@ hr {
 }
 
 #shadowbox {
-  border: 0px solid;
+  border: 0em solid;
   border-radius: 1em;
   padding: 0.6em;
   box-shadow: 0.3em 0.3em 1em #999999;
@@ -131,7 +131,7 @@ hr {
 
 hr.style-one {
   border: 0;
-  height: 1px;
+  height: 0.1em;
   background: #333;
   background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
   background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
@@ -141,7 +141,7 @@ hr.style-one {
 
 hr.style-zero {
   border: 0;
-  height: 0px;
+  height: 0em;
   background: #333;
   background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
   background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
@@ -151,7 +151,7 @@ hr.style-zero {
 
 hr.curve {
   border: 0;
-  height: 15px;
+  height: 1em;
   background-image: url(curve.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -159,9 +159,9 @@ hr.curve {
 
 .box {
   width: 100%;
-  height: 280px;
+  height: 18em;
   background: rgb(220, 220, 220);
-  margin: 40px auto;
+  margin: 2.5em auto;
 }
 
 .effect2 {
@@ -173,15 +173,15 @@ hr.curve {
   z-index: -1;
   position: absolute;
   content: "";
-  bottom: 15px;
-  left: 10px;
+  bottom: 1em;
+  left: 0.5em;
   width: 50%;
   top: 80%;
-  max-width: 300px;
+  max-width: 18empx;
   background: #777;
-  -webkit-box-shadow: 0 15px 10px #777;
-  -moz-box-shadow: 0 15px 10px #777;
-  box-shadow: 0 15px 10px #777;
+  -webkit-box-shadow: 0 1em 0.5em #777;
+  -moz-box-shadow: 0 1em 0.5em #777;
+  box-shadow: 0 1em 0.5em #777;
   -webkit-transform: rotate(-3deg);
   -moz-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
@@ -195,14 +195,14 @@ hr.curve {
   -o-transform: rotate(3deg);
   -ms-transform: rotate(3deg);
   transform: rotate(3deg);
-  right: 10px;
+  right: 0.5em;
   left: auto;
 }
 
 .container {
-  width: 200px;
-  height: 200px;
-  padding-top: 0px;
+  width: 12.5em;
+  height: 12.5em;
+  padding-top: 0em;
   margin: 0 auto;
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
@@ -220,10 +220,10 @@ hr.curve {
 }
 
 .ball {
-  width: 10px;
-  height: 10px;
-  margin: 10px auto;
-  border-radius: 50px;
+  width: 0.5em;
+  height: 0.5em;
+  margin: 0.5em auto;
+  border-radius: 3em;
 }
 
 .ball:nth-child(1) {
@@ -277,84 +277,84 @@ hr.curve {
 
 @-webkit-keyframes right {
   0% {
-    -webkit-transform: translate(-15px);
+    -webkit-transform: translate(-1em);
   }
 
   50% {
-    -webkit-transform: translate(15px);
+    -webkit-transform: translate(1em);
   }
 
   100% {
-    -webkit-transform: translate(-15px);
+    -webkit-transform: translate(-1em);
   }
 }
 
 @-webkit-keyframes left {
   0% {
-    -webkit-transform: translate(15px);
+    -webkit-transform: translate(1em);
   }
 
   50% {
-    -webkit-transform: translate(-15px);
+    -webkit-transform: translate(-1em);
   }
 
   100% {
-    -webkit-transform: translate(15px);
+    -webkit-transform: translate(1em);
   }
 }
 
 @-moz-keyframes right {
   0% {
-    -moz-transform: translate(-15px);
+    -moz-transform: translate(-1em);
   }
 
   50% {
-    -moz-transform: translate(15px);
+    -moz-transform: translate(1em);
   }
 
   100% {
-    -moz-transform: translate(-15px);
+    -moz-transform: translate(-1em);
   }
 }
 
 @-moz-keyframes left {
   0% {
-    -moz-transform: translate(15px);
+    -moz-transform: translate(1em);
   }
 
   50% {
-    -moz-transform: translate(-15px);
+    -moz-transform: translate(-1em);
   }
 
   100% {
-    -moz-transform: translate(15px);
+    -moz-transform: translate(1em);
   }
 }
 
 @keyframes right {
   0% {
-    transform: translate(-15px);
+    transform: translate(-1em);
   }
 
   50% {
-    transform: translate(15px);
+    transform: translate(1em);
   }
 
   100% {
-    transform: translate(-15px);
+    transform: translate(-1em);
   }
 }
 
 @keyframes left {
   0% {
-    transform: translate(15px);
+    transform: translate(1em);
   }
 
   50% {
-    transform: translate(-15px);
+    transform: translate(-1em);
   }
 
   100% {
-    transform: translate(15px);
+    transform: translate(1em);
   }
 }