html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f5f9;
  font-family: "Raleway";
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon {
  position: relative;
  width: 32px;
  height: 32px;
  display: block;
  fill: rgba(51, 51, 51, 0.5);
  margin-right: 20px;
  transition: all 0.2s ease-out;
}

.icon.active {
  fill: #64e73c;
}

.icon.big {
  width: 64px;
  height: 64px;
  fill: rgba(51, 51, 51, 0.5);
}

#wrapper {
  width: 900px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: hidden;
}

#left-side {
  height: 70%;
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#left-side ul li {
  padding-top: 10px;
  padding-bottom: 10px;
  width:65px;
  display: flex;
  line-height: 34px;
  color: rgba(51, 51, 51, 0.5);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-out;
}
#left-side ul li:hover {
  color: #333333;
  transition: all 0.2s ease-out;
}
#left-side ul li:hover > .icon {
  fill: #333;
}
#left-side ul li.active {
  color: #6af049;
}
#left-side ul li.active:hover > .icon {
  fill: #3ce745 ;
}

#border {
  height: 920px;
  margin-top:1px;
  margin-left:20px;
 
  background-color: rgba(51, 51, 51, 0.2);
}
#border #line.one {
  width: 3px;
  height: 54px;
  background-color: #3ce745;
  margin-left: -2px;
  margin-top: 150px;
  transition: all 0.4s ease-in-out;
}
#border #line.two {
  width: 3px;
  height: 54px;
  background-color: #3ce745;
  margin-left: -2px;
  margin-top: 199px;
  transition: all 0.4s ease-in-out;
}
#border #line.three {
  width: 3px;
  height: 54px;
  background-color: #3ce745;
  margin-left: -2px;
  margin-top: 250px;
  transition: all 0.4s ease-in-out;
}
#border #line.four {
  width: 3px;
  height: 54px;
  background-color: #3ce745;
  margin-left: -2px;
  margin-top: 314px;
  transition: all 0.4s ease-in-out;
}
#border #line.five {
  width: 3px;
  height: 54px;
  background-color: #3ce745;
  margin-left: -2px;
  margin-top: 314px;
  transition: all 0.4s ease-in-out;
}
#border #line.six {
  width: 3px;
  height: 54px;
  background-color: #3ce745;
  margin-left: -2px;
  margin-top: 362px;
  transition: all 0.4s ease-in-out;
}
#border #line.seven {
  width: 3px;
  height: 54px;
  background-color: #3ce745;
  margin-left: -2px;
  margin-top: 423px;
  transition: all 0.4s ease-in-out;
}
#border #line.eight {
  width: 3px;
  height: 54px;
  background-color: #3ce745;
  margin-left: -2px;
  margin-top: 469px;
  transition: all 0.4s ease-in-out;
}
#border #line.nine {
  width: 3px;
  height: 54px;
  background-color: #3ce745;
  margin-left: -2px;
  margin-top: 520px;
  transition: all 0.4s ease-in-out;
}
#border #line.ten {
  width: 3px;
  height: 54px;
  background-color: #3ce745;
  margin-left: -2px;
  margin-top: 582px;
  transition: all 0.4s ease-in-out;
}
#border #line.eleven {
  width: 3px;
  height: 54px;
  background-color: #3ce745;
  margin-left: -2px;
  margin-top: 635px;
  transition: all 0.4s ease-in-out;
}
#right-side {
  height: 300px;
  width: 75%;
  overflow: hidden;
}
#right-side #first, 
#right-side #second,
#right-side #third, 
#right-side #fourth, 
#right-side #fiveth,
#right-side #sixth,
#right-side #seventh,
#right-side #eighty,
#right-side #ninety,
#right-side #hundred, 
#right-side #thousand {
  position: absolute;
  height: 300px;
  width: 75%;
  transition: all 0.6s ease-in-out;
  margin-top: -350px;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#right-side #first h1,
 #right-side #second h1, 
 #right-side #third h1,
 #right-side #fourth h1 ,
 #right-side #fiveth h1,
 #right-side #sixth h1,
 #right-side #seventh h1,
 #right-side #eighty h1,
 #right-side #ninety h1,
 #right-side #hundred h1,
 #right-side #thousand h1{
  font-weight: 800;
  color: #333;
}
#right-side #first p,
 #right-side #second p, 
 #right-side #third p, 
 #right-side #fourth p ,
 #right-side #fiveth p,
 #right-side #sixth p,
 #right-side #seventh p,
 #right-side #eighty p,
 #right-side #ninety p,
 #right-side #hundred p,
 #right-side #thousand p{
  color: #333;
  font-weight: 500;
  padding-left: 30px;
  padding-right: 30px;
}
#right-side #first.active, 
#right-side #second.active, 
#right-side #third.active, 
#right-side #fourth.active ,
#right-side #fiveth.active,
#right-side #sixth.active,
#right-side #seventh.active,
#right-side #eighty.active,
#right-side #ninety.active,
#right-side #hundred.active,
#right-side #thousand.active {
  margin-top: 0px;
  opacity: 1;
  transition: all 0.6s ease-in-out;
}