@import url("https://fonts.googleapis.com/css?family=Lato|Oswald|Ubuntu|Roboto")

html
  height: 100%

body
  margin: 0
  padding: 0
  height: 100%
  overflow: hidden
  background: -webkit-linear-gradient(#0AFDF2, #45d6ff, #03c6fc) no-repeat

/* phone setup */

.container
  position: absolute
  top: 50%
  left: 50%
  height: 580px
  width: 300px
  border: 1px solid #ddd
  border-radius: 20px
  background: #fff
  transform: translate3d(-50%, -50%, 0)
  user-select: none /* supported by Chrome and Opera */
  -webkit-user-select: none /* Safari */
  -khtml-user-select: none /* Konqueror HTML */
  -moz-user-select: none /* Firefox */
  -ms-user-select: none /* Internet Explorer/Edge */

.screen
  position: absolute
  margin: 30px 9px
  padding: 0
  width: 280px
  height: 500px
  background: #fff
  border: 1px solid #ddd
  overflow-y: auto
  overflow-x: hidden
  
.top-line
  position: absolute
  background-color: #ddd
  height: 10px
  width: 50px
  border-radius: 5px
  top: 12px
  left: 50%
  transform: translateX(-50%)
  
.bottom-circle
  position: absolute
  background-color: #ddd
  height: 30px
  width: 30px
  border-radius: 25px
  top: 540px
  left: 50%
  transform: translateX(-50%)
  
.screen::-webkit-scrollbar-track
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3)
  background-color: #F5F5F5

.screen::-webkit-scrollbar
  width: 4px
  background-color: #F5F5F5

.screen::-webkit-scrollbar-thumb
  border-radius: 10px
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)
  background-color: #03c6fc