.header{
  width:50%;
  margin: 0 auto;
  text-align: center;
  border-bottom: 2px solid rgb(120, 182, 238);
  font-size: 32px;
}

.footer1{
  width: 50%;
  margin: 0 auto;
  font-size: 20px;
  text-align: center;
  border-top: 2px solid rgb(120, 182, 238);
}

.box-container{
  width: 50%;
  height: 620px;
  margin: 0 auto;
  background-color: rgba(184, 254, 227, 0.34);
  position: relative;
}

.box1-radius{
  height:500px;
  text-align: center;
  vertical-align: center;
  display: flex;
}

.box2{
  height:500px;
  text-align: center;
  vertical-align: center;
}

.container1,.container2,.container3,.container4{
  width:45px;
  height:45px;
  color: white;
  background: rgb(60, 86, 196);
  border-radius: 5px;
  border: 2px solid rgb(91, 91, 91);
  position: absolute;

}

.container1{
  z-index: 1;
}

.container2{
  z-index:2;
  left:70px;
}

.container3{
  z-index:3;
  left:140px;
}

.container4{
  z-index:4;
  left:210px;
}

.ball{
  width:20px;
  height:20px;
  border-radius: 15px;
  background: black;
  position: absolute;
  z-index: 0;
  top:60px;
}

.number1, .number2, .number3, .number4{
    display: none;
    position: absolute;
}

.number5{
  position: absolute;
  top:360px;
  left:55px;
  font-weight: bold;
  color: rgb(47, 86, 201);
  font-size: 18px;
}

.number6{
  font-size: 12px;
}

.start{
  width: 80px;;
}

.number1{
  top:200px;
  left:152px;
  font-weight: bold;
  font-size: 24px;
}
.number2{
  top:200px;
  left:12px;
  font-weight: bold;
  font-size: 24px;
}
.number3{
  top:200px;
  left:83px;
  font-weight: bold;
  font-size: 24px;
}
.number4{
  top:200px;
  left:223px;
  font-weight: bold;
  font-size: 24px;
}

  .button1{
    background-color:rgb(13, 126, 231) ;
    color: white;
    border-radius: 5px;
  }

  }

.info{
  font-size: 8px;
}