body{
  color: white;
}
h1{
  text-align: center;
  color: white;
}
#title{
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
}
ion-content{
  background: #0f0f0f;
}
.lock-cont{
  position: relative;
  transform: rotate(30deg);
  margin: auto;
  transition: top 1s, transform 0.5s;
  -webkit-transition: top 1s, transform 0.5s;
  z-index: 0;
}
.lock-cont .lock-body{
  border-radius: 1000px;
  background: #333;
  width: 75%;
  height: 60%;
  position: absolute;
  top: 32.5%;
  left: 12.5%;
  z-index: 99;
}
.lock-cont .lock-dial{
  border-radius: 1000px;
  background: #222;
  width: 50%;
  height: 50%;
  position: absolute;
  top: 25%;
  left: 25%;
}
#lock-canvas{
  background: transparent;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.lock-cont .lock-top{
  border-radius: 1000px 1000px 0 0;
  background: #333;
  width: 50%;
  height: 40%;
  position: absolute;
  top: 7.5%;
  left: 25%;
  z-index: 98;
  transition: top 0.5s;
}
.lock-cont .lock-space{
  border-radius: 1000px 1000px 0 0;
  background: #0f0f0f;
  width: 50%;
  height: 76%;
  position: absolute;
  top: 25%;
  left: 25%;
}