@font-face {
  font-family: "San Francisco";
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff");
}
* {
    margin: 0;
    padding: 0;
  }
  body {
    background: #1a1a1b;
    padding-top: 25px;
    -moz-transform: scale(1.3); /* for Firefox, default 1*/
    zoom:140%; /* For Chrome, IE, default 100%*/
    font-family: "San Francisco";
  }
  
  #screen {
    width: 276px;
    height: 490.66px;
    bo-shadow: 0px 0px 35px 5px #1e001e;
    background-color: #000;
    margin: auto;
  }
  #notification-bar {
    font-weight: 100;
    color: #fff;
    font-size: 9px;
    padding: 5px 5px 0px 5px;
    display: inline-block;
    width: 262px;
  }
  #service {
    float: left;
    font-family: "San Francisco";
  }
  #time {
    float: left;
    margin-left: 64.9px;
    font-family: "San Francisco";
  }
  #battery {
    float: right;
    font-family: "San Francisco";
  }
  #userscreen {
    width: 100%;
    height: 95.9%;
  }
  #behind {
    width: 96%;
    height: 6px;
    background-color: #999;
    margin: auto;
    border-radius: 23px 23px 0px 0px;
  }
  #main {
    background-color: #fff;
    width: 98.5%;
    margin: auto;
    height: 98.6%;
    border-radius: 5px 5px 0px 0px;
  }
  #down {
    width: 20px;
    height: 10px;
    margin: auto;
    padding: 5px;
    text-align: center;
    font-size: 15px;
    transform: scale(2.3,1);
    color: #999;
  }
  #cover {
    width: 225px;
    height: 225px;
    margin: auto;
    margin-top: 3px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 11px 55px 8px #333;
    margin-bottom: 15px;
  }
  #cover img {
    width: 100%
  }
  #music_time {
    height: 2.5px;
    width: 225px;
    background-color: #555;
    margin: auto;
    border-radius: 50px;
  }
  .length {
    border-radius: 50px;
    width: 47.5%;
    background-color: #444;
    height: 2.5px;
    float: left;
  }
  #music_time .circle {
    width: 5px;
    height: 5px;
    background-color:#333;
    float: left;
    margin: -1.25px;
    border-radius: 50px;
  }
  #time_overlap {
    color: #666;
    width: 225px;
    height: 5px;
    margin: auto;
    font-size: 8px;
    padding-top: 2px;
  }
  #time_passed {
    float: left;
  }
  #time_left {
    float: right;
  }
  #music_info {
    font-family: arial;
    text-align: center;
    padding: 15px 0px 5px 0px;
  }
  #music_info p {
    font-size: 12px;
    color: #555;
  }
  #actions {
    width: 225px;
    margin: auto;
    font-size: 30px;
    text-align: center;
    padding: 20px;
  }
  #actions i {
    margin: 0px 15px 0px 15px;
  }

  #actions a {
    text-decoration: none; 
    background-color: none; 
    color: #000;
  }
  
  #volume {
    width: 238px;
    height: 12px;
    margin: auto;
    font-size: 10px;
  }
  #none {
    float: left;
    margin: 2px -6px 0px 0px;
  }
  #volume_back {
    width: 206px;
    margin: 4px 0px 0px 12px;
    height: 2.5px;
    display: inline-block;
    background-color: #999;
    border-radius: 50px;
  }
  #volume_back .circle {
    width: 15px;
    height: 15px;
    background-color: #fff;
    margin-top: -6px;
    float: left;
    border-radius: 50px;
    box-shadow: 0px 3px 13px 0.5px #333;
  }
  #all {
    float: right;
    margin-top: 3px;
  }
  #options {
    width: 230px;
    margin: auto;
    padding: 18px;
    font-size: 15px;
    display: inline-block;
  }
  #options .left {
    float: left;
  }
  #options .right {
    float: right;
  }