:root{
  --primary-color:#0D6FFA;
  --accent-color:#49CE95;
  --danger-color:#EC3582;
  --fore-color:rgba(0,0,0,0.65);
  --main-cast-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08), 0px 3px 6px rgba(0, 0, 0, 0.12);
}
body{
  background-color:#9664a5;
}
.sc-bottom-bar{
  position:absolute;
  display:flex;
  
  padding: 16px 36px;
  justify-content:space-between;
  width:375px;
  margin:auto;
  top:0;
  left:0;
  bottom:0;
  right:0;
  height: 32px;
  
  font-size:26px;
  background-image:radial-gradient(circle at 36px 6px,transparent 36px, #ffffff 37px);
  filter: drop-shadow(0px -1px 6px  rgba(0, 0, 0, 0.08)) drop-shadow(0px -2px 12px  rgba(0, 0, 0, 0.12));
  /* border-bottom-left-radius:30px; */
  /* border-bottom-right-radius:30px; */
  transition: cubic-bezier(0.57, 0.23, 0.08, 0.96) .45s;
}

.sc-nav-indicator{
  position:absolute; 

  width: 56px;
  height: 56px;
  bottom:28px;
  margin:auto;
  left:0;
  
  background-color: #000000;
  box-shadow: var(--main-cast-shadow);
  border-radius:50%;
  transition: cubic-bezier(0.45, 0.73, 0, 0.59) .3s;
}
.sc-menu-item{
  color:var(--fore-color);
  transition:ease-in-out .5s;
  
  cursor: pointer;
}
.sc-current{
  position:relative;
  
  color:#ffffff;
  
  z-index:3;
  transform:translate3d(0px,-22px,0px);
}