src/components/HomepageFeatures/styles.module.css

.features {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  width: 100%;
}

.redisStyle{
  visibility:visible;
  width:100%;
}

.performanceStyle{
  visibility:hidden;
  width:100%;
}

.menuBlock{
  display:flex;
  flex-direction: column;
  align-items: center;
  width:50%;
  justify-content: flex-start;
}

.chartBlock{
  display:flex;
  align-items: center;
  justify-content:center;
  width:100%;
}

.blueLine {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:20px 0
}

.blueLine div{
  width:15%;
  border-radius:20pt;
  border:2px solid rgba(0, 114, 252, 1)
}

.blueLine + p{
  font-family:'PingFang SC-Light';
  font-weight:light;
  color:rgba(59, 61, 63, 1)
}

[data-theme='dark'] .blueLine + p {
  color:rgba(220, 220, 220, 1);
}

.redisCompatible{
  display:flex;
  flex-direction:row;
  position:relative;
  padding-top:20px;
  width:90%;
  margin:10px 5%
}

.redisCompatible img{
  width:60%;
  float:left;
  margin:10px 0
}

.Pie{
  margin:60px 10%;
  width: 240px;
  height: auto;
  padding: relative;
}

.Pie > div:first-child{
  width:240px;
  height:240px;
  background-color:rgba(60, 119, 235, 1);
  border-radius:50%;
}

.Pie > div:nth-child(2){
  width:0;
  height:0;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 60%;
  left: 51%;
}

.tri{
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-bottom:130px solid rgba(247, 136, 107, 1);
  border-top:0;
  transform: rotate(150deg);
}
.imgItem{
  width:auto;
  height:35%;
  margin-bottom:30px;
  
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}
.itemDes{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:light;
  color:rgba(59, 61, 63, 1);
}

[data-theme='dark'] .itemDes {
  color:rgba(220, 220, 220, 1);
}

.itemDes p{
  width: 50%;
}

.featureTitle {
  color: #333333;
}

[data-theme='dark'] .featureTitle {
  color: #ffffff;
}

.container{
  margin-left:5%;
  width:90%;
  display: flex;
}

.selectMenuBlock{
  width:100%;
}

@media screen and (max-width:820px) {
  .redisCompatible{
    flex-direction: column;
    position: relative;
  }

  .redisCompatible img{
    width:80%;
    float:left;
    margin:10px 10%
  }

  .Pie{
    margin:10% 10% 0 10%;
    width: 80%;
    height: auto;
    padding: relative;
  }
  
  .Pie > div:first-child{
    width:10rem;
    height:10rem;
    margin-left: auto;
    margin-right: auto;
    background-color:rgba(60, 119, 235, 1);
    border-radius:50%;
  }
  
  .Pie > div:nth-child(2){
    width:0;
    height:0;
    position: absolute;
    margin: auto;
    top: 0%;
    right: 28%;
    bottom: 0;
    left: 0;
  }
  
  .tri{
    border-left:1rem solid transparent;
    border-right:1rem solid transparent;
    border-bottom:6rem solid rgba(247, 136, 107, 1);
    border-top:0;
    transform: rotate(150deg);
  }

  .selectMenuBlock{
    display:none;
  }
}