.container .topic{
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #000;
}

.content input{
  display: none;
}

.content{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content .list{
  display: flex;
  flex-direction: column;
  position: relative;
  width: 25%;
  margin-right: 50px;
  height:100%;
   
  
}

.content .list label{
  cursor: pointer;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  padding-left: 25px;
  transition: all 0.5s ease;
  z-index: 10;
  border-radius:15px;
  margin-bottom:1px;
   background-color:#0b163e;
 }

#home:checked ~ .list label.home,
#blog:checked ~ .list label.blog,
#help:checked ~ .list label.help,
#code:checked ~ .list label.code,
#about5:checked ~ .list label.about5,
#about6:checked ~ .list label.about6,
#about7:checked ~ .list label.about7,
#about8:checked ~ .list label.about8,
#about9:checked ~ .list label.about9,
#about10:checked ~ .list label.about10,
#about11:checked ~ .list label.about11,
#about12:checked ~ .list label.about12{
  color: #fff;
  background-color:#c80036;
}

 
.content .text-content{
  width: 75%;
  height: 100%;
  color: #000;
  
}

.content .text{
  display: none;
}

.content .text .title{
  font-size: 25px;
  margin-bottom: 10px;
  font-weight: 500;
}

.container .text p{
  text-align: justify;
}

.content .text-content .home{
  display: block;
}

#home:checked ~ .text-content .home,
#blog:checked ~ .text-content .blog,
#help:checked ~ .text-content .help,
#code:checked ~ .text-content .code,
#about5:checked ~ .text-content .about5,
#about6:checked ~ .text-content .about6,
#about7:checked ~ .text-content .about7,
#about8:checked ~ .text-content .about8,
#about9:checked ~ .text-content .about9,
#about10:checked ~ .text-content .about10,
#about11:checked ~ .text-content .about11,
#about12:checked ~ .text-content .about12{
  display: block;
  
}

#blog:checked ~ .text-content .home,
#help:checked ~ .text-content .home,
#code:checked ~ .text-content .home,
#about5:checked ~ .text-content .home,
#about6:checked ~ .text-content .home,
#about7:checked ~ .text-content .home,
#about8:checked ~ .text-content .home,
#about9:checked ~ .text-content .home,
#about10:checked ~ .text-content .home,
#about11:checked ~ .text-content .home,
#about12:checked ~ .text-content .home{
  display: none;
  
}

.content .list label:hover{
  color: #fff;
  background-color:#000;
}
.content .list label:checked{
  color: #fff;
  background-color:#c80036;
}