style.css

@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700");  
 @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:300,500');  
 html {  
      box-sizing: border-box;  
 }  
 *,  
 *:before,  
 *:after {  
      box-sizing: inherit;  
 }  
 * {  
      margin: 0;  
      padding: 0;  
 }  
 body {  
      background: #24272e;  
      color: #fff;  
      font-family: "Roboto", sans-serif;  
 }  
 code {  
      font-family: 'Source Code Pro', monospace;  
      font-size: 12px;  
 }  
 a {  
      font-family: 'Source Code Pro', monospace;  
      color: #ffcc99;  
 }  
 a:hover {  
      color: #ffba76;  
 }  
 header {  
      background: #fff;  
      padding: 20px;  
 }  
 header h1 {  
      color: #444;  
      text-align: center;  
      font-weight: 100;  
 }  
 .score-board {  
      border: 3px solid #fff;  
      width: 300px;  
      margin: 40px auto;  
      font-size: 40px;  
      border-radius: 4px;  
      text-align: center;  
      padding: 15px 20px;  
      position: relative;  
 }  
 .badge {  
      background: #e2584d;  
      text-transform: uppercase;  
      font-size: 14px;  
      padding: 10px 6px;  
 }  
 #user-label {  
      position: absolute;  
      top: 50%;  
      left: -5%;  
      transform: translate(-10%, -50%);  
 }  
 #computer-label {  
      position: absolute;  
      top: 50%;  
      right: -5%;  
      transform: translate(10%, -50%);  
 }  
 .result {  
      font-weight: 300;  
      text-align: center;  
      font-size: 32px;  
      line-height: 40px;  
 }  
 .result {  
      line-height: 50px;  
 }  
 .choices {  
      margin: 0 auto;  
      text-align: center;  
      padding: 40px 0;  
 }  
 .choice {  
      display: inline-block;  
      border: 3px solid #fff;  
      border-radius: 50%;  
      padding: 10px;  
      margin: auto 10px;  
      transition: all 0.3s ease;  
 }  
 .choice img {  
      filter: invert(100%);  
 }  
 #action-message {  
      text-align: center;  
      font-weight: 500;  
      text-transform: uppercase;  
      letter-spacing: 2px;  
      margin: 40px 0;  
 }  
 .winningStyles {  
      border: 3px solid #4dcc7d;  
      background-color: #043507;  
      box-shadow: 0 0 20px #043507;  
 }  
 .losingStyles {  
      border: 3px solid #c52e2e;  
      background-color: #2e0303;  
      box-shadow: 0 0 20px #2e0303;  
 }  
 .drawStyles {  
      border: 3px solid #444;  
      background-color: #222;  
      box-shadow: 0 0 20px #222;  
 }  
 sup {  
      margin: 0;  
      padding: 0;  
 }