body
div.col-xs-1.col-md-2
div.col-xs-10.col-md-8.base
  div.row
    div.col-xs-8.left
      div.row.info
        div.col-xs-1.pause
          i.glyphicon.glyphicon-pause
        div.col-xs-6.songname
          p City of Angels<br>
            span Thirty Seconds to Mars
        div.col-xs-1.comment
          i.glyphicon.glyphicon-comment
          span 9
        div.col-xs-1.favourite
          i.glyphicon.glyphicon-heart-empty
          span 8
        div.col-md-1.repeat
          i.glyphicon.glyphicon-repeat
        div.col-md-2.time
          p 3:56
      hr.one
      hr.two
      div.track
      div.row.info
        div.col-xs-1.pause
          i.glyphicon.glyphicon-play
        div.col-xs-9.songname
          p Up In The Air<br>
            span Thirty Seconds to Mars
        div.col-xs-2.time
          p 2:59
      hr.one
      div.row.info
        div.col-xs-1.pause
          i.glyphicon.glyphicon-play
        div.col-xs-9.songname
          p Night of the Hunter<br>
            span Thirty Seconds to Mars
        div.col-xs-2.time
          p 3:34
      hr.one
      div.row.info
        div.col-xs-1.pause
          a(href="https://youtu.be/GC63HGcsfEg" target="_blank")
            i.glyphicon.glyphicon-play
        div.col-xs-9.songname
          p Do or Die<br>
            span Thirty Seconds to Mars
        div.col-xs-2.time
          p 4:25
      hr.one
      div.row.controls.text-center
        div.col-xs-2.back
          i.glyphicon.glyphicon-step-backward
        div.col-xs-2.bigpause
          i.glyphicon.glyphicon-pause
        div.col-xs-5.forward
          i.glyphicon.glyphicon-step-forward
        div.col-xs-1.random
          i.glyphicon.glyphicon-random
        div.col-xs-1.volume
          i.glyphicon.glyphicon-volume-up
        div.col-xs-1.fullscreen
          i.glyphicon.glyphicon-fullscreen
    div.col-xs-4.right

@import 'https://fonts.googleapis.com/css?family=Mada'

body
  height: 100vh
  width: 100vw
  overflow-x: hidden
  background: linear-gradient( rgba(150,150,150, 0.5), rgba(150,150,150, 0.5)), url(https://goo.gl/vIdGAQ)
  background-size: 100% 100%
  font-family: 'Mada', sans-serif

.base
  height: 550px
  margin: 100px 0 100px 0
  background-color: rgba(0, 0, 0, 0.8)
  color: lighten(black, 65%)
  -webkit-box-shadow: 0px 0px 30px 6px rgba(0,0,0,0.8)
  -moz-box-shadow: 0px 0px 30px 6px rgba(0,0,0,0.8)
  box-shadow: 0px 0px 30px 6px rgba(0,0,0,0.8)
  
.info
  margin-top: 30px

.pause i
  border: 2px solid
  border-radius: 100%
  padding: 10px
  margin: 5px 5px 0 15px
  cursor: pointer
  transition: ease-in-out .2s
  &:hover
    color: #e0e0e0
    border: 2px solid #e0e0e0
    transition: ease-in-out .2s

.songname 
  p
    font-size: 18px
    margin-left: 20px
  span
    font-style: italic
    font-size: 14px

.comment i
  margin: 10px 8px 0 -8px
  color: #24CEDB

.favourite i
  margin: 10px 8px 0 -8px
  color: #24CEDB

.repeat i
  margin: 10px 8px 0 0

.time p
  margin-top: 10px 

.one
  border: 1px solid #a6a6a6
  width: 89%
  margin: 7px 0 0 15px

.two
  border: 1px solid #24CEDB
  width: 65%
  margin: -2px 0 0 15px

.track
  height: 10px
  width: 10px
  background-color: #24CEDB
  border-radius: 100%
  position: absolute
  cursor: pointer
  margin: -1% 0 0 64%
  -webkit-box-shadow: 0px 0px 10px 2px rgba(36,206,219,1)
  -moz-box-shadow: 0px 0px 10px 2px rgba(36,206,219,1)
  box-shadow: 0px 0px 10px 2px rgba(36,206,219,1)

.back
  i
    font-size: 25px
    padding: 10px
    border: 2px solid #6a6a6a
    border-radius: 100%
    margin: 60px 0 0 30px
    cursor: pointer
    transition: ease-in-out .2s
    &:hover
      color: #e0e0e0
      border: 2px solid #e0e0e0
      transition: ease-in-out .2s

.bigpause
  i
    font-size: 60px
    padding: 12px 10px 12px 14px
    border: 2px solid #e0e0e0
    border-radius: 100%
    margin: 40px 0 0 0
    color: #e0e0e0
    cursor: pointer
    transition: ease-in-out .2s
    &:hover
      color: #24CEDB
      border: 2px solid #24CEDB
      transition: ease-in-out .2s

.forward
  i
    font-size: 25px
    padding: 10px
    border: 2px solid #6a6a6a
    border-radius: 100%
    margin: 60px 0 0 -170px
    cursor: pointer
    transition: ease-in-out .2s
    &:hover
      color: #e0e0e0
      border: 2px solid #e0e0e0
      transition: ease-in-out .2s

.random
  i
    font-size: 18px
    color: #24CEDB
    margin: 75px 0 0 -90px
    cursor: pointer
.volume
  i
    font-size: 23px
    margin: 72px 0 0 -90px
    cursor: pointer
    transition: ease-in-out .2s
    &:hover
      color: #24CEDB
      transition: ease-in-out .2s

.fullscreen
  i
    font-size: 16px
    margin: 76px 0 0 -110px
    cursor: pointer
    transition: ease-in-out .2s
    &:hover
      color: #24CEDB
      transition: ease-in-out .2s

a
  color: #a6a6a6
  &:visited
    color: #a6a6a6

.right
  background-image: url("https://goo.gl/xuJecQ")
  background-size: contain
  background-color: white
  background-repeat: no-repeat
  height: 550px