.main-box{
  margin-top: 25%
}

div {
  margin: 20px auto;
  width: 530px;
  height: 212px;
  background-color: #FF00FF;
  border-radius: 106px;
  box-shadow: 4px 1px 5px gray;
}

#stepContainer {
  display: flex;
  align-items: center;
  font-family: arial;
}

#circle {
  width: 174px;
  height: 174px;
  border-radius: 87px;
  margin-left: 16px;
  background-color: #FFBFBF;
  box-shadow: 4px -1px 4px gray inset;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

#circle-1 {
  width: 174px;
  height: 174px;
  border-radius: 87px;
  margin-left: 16px;
  background-color: #BFD9FF;
  box-shadow: 4px -1px 4px gray inset;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

#clockFace {
  font-family: arial;
  display: flex;
  justify-content: center;
  align-items: center;  
}

ul {
  list-style: none;
  padding: 0;
}

#time{
  font-size: 60px;
}

#day {
  float: right;
}

#steps {
  font-size: 60px;
}

#texts {
  float: right;
}

#waterContainer {
  display: flex;
  align-items: center;
  font-family: arial;
}

#drops {
 font-size: 60px
}

#cups {
  float: right; 
}

.shoe {
  max-width: 160px;
  margin-top: 10px  
}

.water {
  max-width: 160px;
  max-height: 140px;
  margin-top:20px;   
}

.first {
}

.second {
  width: 50%;
  margin: auto;
}

.third {
  width: 50%;
  margin: auto;
}

.li-2 {
  width: 61%;
  margin: auto;
}

.li-3 {
  width: 81%;
  margin: auto;