@font-face {
    font-family: 'cubicregular';
    src: url('cubic-webfont.woff2') format('woff2'),
         url('cubic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.cubic{
	font-family: 'cubicregular';
	font-size: 160px;
}
.cubic .e{
  -moz-transform: scaleX(-1);    /* Gecko */
  -o-transform: scaleX(-1);      /* Opera */
  -webkit-transform: scaleX(-1); /* Webkit */
  transform: scaleX(-1);         /* Standard */
  filter: FlipH;                 /* IE 6/7/8 */
}

      body{
        font-family: 'Helvetica', Arial, sans-serif;
        overflow-x: hidden;
        margin: 0 auto;
      }
      header, footer{
        margin: 15px;
      }
      p{
        padding: 5px;
        font-size: 12px;
      }
      button{
        width: 100%;
        padding: 10px;
        box-sizing:border-box;
        margin-top: 10px;
          background: #fff;
          border: none;
      }
      button:hover, button:focus{
          background: #555555;
          color: #fff;
          cursor: pointer;
      }
      .svgbox{
        background-color: #000;
        margin:10px;
      }
      .svgcontainer{
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding-bottom: 20px;
      }
      .suggest-btn{

        padding: 10px;
        box-sizing:border-box;
          background: #fff;
          border: none;
          width: 35px;
      }
      .swap-btn{
        padding: 10px;
        box-sizing:border-box;
          background: #fff;
          border: none;
      }
      .suggest-btn:hover, .suggest-btn:focus, .swap-btn:hover, .swap-btn:focus{
          background: #555555;
          color: #fff;
          cursor: pointer;
      }
      .color{
        padding: 5px;
        border: 1px solid #cccccc;
      }
      .controls{
          padding: 10px;
      }
      .suggestions input{
        margin-top: 5px;
      }
      #swapBack{
        display: none;
      }
      .btn {
      background: #3498db;
      background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
      background-image: -moz-linear-gradient(top, #3498db, #2980b9);
      background-image: -ms-linear-gradient(top, #3498db, #2980b9);
      background-image: -o-linear-gradient(top, #3498db, #2980b9);
      background-image: linear-gradient(to bottom, #3498db, #2980b9);
      -webkit-border-radius: 5;
      -moz-border-radius: 5;
      border-radius: 5px;
      color: #ffffff;
      text-decoration: none;
    }

    .btn:hover {
      background: #3cb0fd;
      text-decoration: none;
    }
    #control{
      -webkit-border-radius: 5;
      -moz-border-radius: 5;
      border-radius: 5px;
      padding: 20px;
          background: #ececec;

    }
      @media (max-width: 992px){
        body{
          text-align: center;
        }
      p{
        padding: 5px;
        font-size: 10px;
      }
        .swap-btn{
            margin: 0 auto;
        }
        #randomColor, #swapColor, #swapBack{
          width: 100%;
        }
      }