* Fix css for up button

demo/pacman/pacman.css

@@ -2,97 +2,97 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-}
+  }
   
-body {
+  body {
     font-family: 'Roboto', serif;
-}
+  }
   
-#pacman {
+  #pacman {
     display: flex;
     width: 730px;
     margin: 3em auto;
-}
+  }
   
-#my-canvas {
+  #my-canvas {
     width: 482px;
     height: 528px;
-}
+  }
   
-#info {
+  #info {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 528px;
     width: 250px;
-}
+  }
   
-#info > #logo {
+  #info > #logo {
     border: 1px solid #B0B0B0;
     display: flex;
     align-items: center;
     justify-content: center;
-}
+  }
   
-#info > #scare-envelope {
+  #info > #scare-envelope {
     border: 1px solid #B0B0B0;
     border-radius: 2px;
-}
+  }
   
-#info > #bonus-envelope {
+  #info > #bonus-envelope {
     border: 1px solid #B0B0B0;
     border-radius: 2px;
-}
+  }
   
-#info > #highscore-envelope {
+  #info > #highscore-envelope {
     border: 1px solid #B0B0B0;
     border-radius: 2px;
     display: flex;
     align-items: center;
     font-weight: bold;
-}
+  }
   
-#info > #score-envelope {
+  #info > #score-envelope {
     border: 1px solid #B0B0B0;
     border-radius: 2px;
     display: flex;
     align-items: center;
     font-weight: bold;
-}
+  }
   
-#info > #lives-envelope {
+  #info > #lives-envelope {
     border: 1px solid #B0B0B0;
     border-radius: 2px;
     display: flex;
     align-items: center;
     font-weight: bold;
-}
+  }
   
-#info > #status-envelope {
+  #info > #status-envelope {
     border: 1px solid #B0B0B0;
     border-radius: 2px;
     display: flex;
     align-items: center;
     font-weight: bold;
-}
+  }
   
-#info > #ghosts-envelope {
+  #info > #ghosts-envelope {
     border: 1px solid #B0B0B0;
     border-radius: 2px;
     display: flex;
     align-items: center;
     font-weight: bold;
-}
+  }
   
-#info > #bonus-envelope {
+  #info > #bonus-envelope {
     border: 1px solid #B0B0B0;
     border-radius: 2px;
     display: flex;
     align-items: center;
     font-weight: bold;
-}
+  }
   
-#info > #controls-envelope {
+  #info > #controls-envelope {
     border: 1px solid #B0B0B0;
     border-radius: 2px;
     padding: 0.5em 0;
@@ -100,22 +100,22 @@ body {
     flex-direction: column;
     justify-content: center;
     font-weight: bold;
-}
+  }
   
-#info > #sound-envelope {
+  #info > #sound-envelope {
     display: flex;
     align-items: center;
     border: 1px solid #B0B0B0;
     border-radius: 2px;
     font-weight: bold
-}
+  }
   
-.progress-inner {
+  .progress-inner {
     height: 15px;
     margin: 2px;
-}
+  }
   
-.button {
+  .button {
     margin: 0.4em;
     padding: 0.7em;
     text-align: center;
@@ -127,82 +127,82 @@ body {
     border: none;
     border-radius: 15px;
     box-shadow: 1px 2px #aaa;
-}
+  }
   
-#control-rotate {
+  #control-up {
     background-color: #537fe4;
-}
+  }
-#control-rotate:hover {
+  #control-up:hover {
     background-color: #275edd;
-}
+  }
   
-#control-left {
+  #control-left {
     background-color: #0EA7E1;
-}
+  }
-#control-left:hover {
+  #control-left:hover {
     background-color: #0b85b1;
-}
+  }
   
-#control-right {
+  #control-right {
     background-color: rgb(206, 123, 155);
-}
+  }
-#control-right:hover {
+  #control-right:hover {
     background-color: #c15780;
-}
+  }
   
-#control-down {
+  #control-down {
     background-color: #d2c537;
-}
+  }
-#control-down:hover {
+  #control-down:hover {
     background-color: #afa328;
-}
+  }
   
-#control-pause {
+  #control-pause {
     background-color: rgb(215, 77, 77);
-}
+  }
-#control-pause:hover {
+  #control-pause:hover {
     background-color: #c32c2c;
-}
+  }
   
-.button:active {
+  .button:active {
     box-shadow: 0 3px #888;
     transform: translateY(2px);
-}
+  }
   
-#controls > .one-btn {
+  #controls > .one-btn {
     display: flex;
     justify-content: center;
-}
+  }
   
-#controls > .two-btn {
+  #controls > .two-btn {
     display: flex;
     justify-content: space-between;
-}
+  }
   
-.label {
+  .label {
     text-transform: uppercase;
     margin-right: 0.5em;
     padding-left: 0.5em;
-}
+  }
   
-.img {
+  .img {
     margin-bottom: -5px;
-}
+  }
   
-.source {
+  .source {
     width: 730px;
     margin: -45px auto;
     font-size: 0.9em;
-}
+  }
   
-.source-inner {
+  .source-inner {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 482px;
-}
+  }
   
-#btn-reset{
+  #btn-reset{
     background: #275edd;
     color: #fff;
     font-weight: bold;
@@ -214,13 +214,14 @@ body {
     font-size: 14px;
     cursor: pointer;
     outline: none;
-}
+  }
   
-#btn-reset:hover {
+  #btn-reset:hover {
     background-color: #1e4fc2;
-}
+  }
   
-#btn-reset:active {
+  #btn-reset:active {
     background-color: #1e4fc2;
     transform: translateY(2px);
-}
+  }
+