.hachi-maru-pop-regular {
  font-family: "Hachi Maru Pop", cursive;
  font-weight: 400;
  font-style: normal;
}


body{
  margin:0;
  text-align:center;

  background:linear-gradient(135deg,#ff9ad5,#ff6fb5,#ffd1e8);

  color:white;

  min-height:100vh;
}

#container{
  padding:20px;
}

.roulette-area{

  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;

  margin:30px 0;
}

.roulette-block{
  width:250px;
}

.roulette-box{

  background:white;
  color:black;

  border-radius:12px;
  border:4px solid #ff6fb5;

  height:70px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:bold;

  white-space:nowrap;
  overflow:hidden;
}

#start-btn{
  position:relative;

  width:120px;
  height:120px;

  border-radius:50%;
  border:none;

  background:#ff9ad5;

  font-weight:bold;
  font-size:16px;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:0.15s;
}

#start-btn:hover{
  transform:scale(1.08);
}

#start-btn:active{
  transform:scale(0.95);
}

#start-btn::before,
#start-btn::after{
  content:"";
  position:absolute;

  width:16px;
  height:34px;

  background:black;

  border-radius:50%;

  top:32px;
}

#start-btn::before{
  left:36px;
}

#start-btn::after{
  right:36px;
}

#start-btn span{
  position:absolute;

  width:22px;
  height:14px;

  background:#ff5fa0;

  border-radius:50%;

  bottom:32px;
}

#start-btn span.left{
  left:20px;
}

#start-btn span.right{
  right:20px;
}