body {
}

#page {
}

#box {
  width:360px;
  filter: drop-shadow(0px 1px #000) drop-shadow(0 -1px #000) drop-shadow(1px 0 #000) drop-shadow(-1px 0 #000);
  background:#E7E8EA;
  box-shadow: inset -2px -2px 3px #00000033, inset 2px 2px 10px white, inset 2px 2px 10px white;
  border-top:2px solid #575A5C;
  border-left:2px solid #575A5C;
  border-right:2px solid #C8CCCF;
  border-bottom:2px solid #C8CCCF;
  height:600px;
  margin:50px auto;
  border-radius:25px;
}

#screen {
  width:315px;
  margin:20px auto;
  background:#323638;
  height:225px;
  border-radius:15px;
}

#nav {
  background:#CDD1D3;
  margin:55px auto;
  border-radius:50%;
  height:230px;
  width:230px;
  text-align:center;
  box-shadow: inset -2px -2px 8px #B9BEC2, inset 2px 1px 0px white, inset 2px 1px 0px white;
  filter: drop-shadow(0px -1px #D0D1D6) drop-shadow(0 1px #fff) drop-shadow(-1px 0 #D0D1D6) drop-shadow(1px 0 #fff);
}

.menu {
  position:relative;
  top:10px;
}

.rewind {
  position:absolute;
  top:100px;
  left:10px;
}



.skip {
  position:absolute;
  top:100px;
  right:10px;
}

.play {
  position:relative;
  top:160px;
}

#nav button {
  background:none;
  border:none;
  cursor:pointer;
  font-size:1.5em;
  font-family:arial;
  color:white;
  text-align:center;
}

#home {
  border-radius:50%;
  background:white;
  height:100px;
  width:100px;
  border:none;
  position:absolute;
  top:60px;
  left:65px;
}