.title{
   font-weight: bold;
   font-size: 40px;
   margin-bottom: 10px;
}
.about-me, .skill, .devtool{
   color: white;
   background-color: #3f3f3f;
   margin: 30px;
   padding: 30px;
   justify-content: space-around;
   flex-flow: wrap;
   height: fit-content;
}
.about-me p{
   text-align: justify;
   width: auto;
}
.about-and-skill{
   overflow: hidden;
}
.skill .speak, .devtool .speak{
   font-size: 16px;
   margin-bottom: 15px;
   font-weight: bold;
}
.skill-icon{
   opacity: 0;
   margin-right: 10px;
   overflow: hidden;
}
.skill-item .skill-name{
   width: 0;
   overflow: hidden;
}
.skill-item,.devtool li{
   display: flex;
   padding-bottom: 10px;
}
.skill-item data{
   width: 100%;
   user-select: none;
}
.skill-bar-background{
   transition: all 0.2s;
}
.skill-bar{
   width: 0;
   margin-top: 8px;
   background-color: #de4040;
   background-image: linear-gradient(to right,#de4040,#ff7676);
   height: 10px;
   position: relative;
   border-radius: 3px;
}
.skill mark{
   background-color: white;
   position: absolute;
   padding-left: 4px;
   padding-right: 4px;
   font-size: 12px;
   font-weight: bold;
   border-radius: 3px;
   top: -18px;
   right: -15px;
}
.skill-item data:hover .skill-bar-background{
   box-shadow: 6px 6px 5px #242424;
}
.devtool li{
   flex-flow: wrap;
}
.tool{
   opacity: 0;
   position: relative;
   margin: 0px 10px 10px 10px;
   width: 140px;
   height: 55px;
}
.tool-item{
   display: flex;
   background-color: #5a5a5a;
   overflow: hidden;
   border-radius: 15px;
   width: 100%;
   padding: 5px;
   cursor: pointer;
   position: absolute;
   transition: all 0.2s;
}
.tool-item p{
   margin: auto;
   margin-left: 10px;
}
.tool-item:hover{
   transform: scale(1.1);
}
@media screen and (min-width:900px){ /* pc */
   .about-and-skill{
      display: flex;
      margin: 50px;
   }
   .about-me{
      width: 40%;
      font-size: 18px;
      text-indent: 3em;
      border-radius: 20px;
   }
   .skill-and-devtool{
      width: 60%;
   }
   .skill, .devtool{
      margin-left: 5px;
      font-size: 15px;
      border-radius: 20px;
   }
   .skill li img{
      height: 45px;
      width: 50px;
   }
}
@media screen and (max-width:900px){ /* mobile 1 */
   .about-and-skill{
      display: block;
      margin: 20px;
   }
   .title{
      font-size: 30px;
   }
   .about-me{
      font-size: 14px;
      text-indent: 2em;
      border-radius: 15px;
   }
   .skill, .devtool{
      font-size: 13px;
      border-radius: 15px;
   }
   .skill li img{
      height: 45px;
      width: 50px;
   }
   .skill-bar{
      height: 8px;
   }
}
@media screen and (max-width:440px){ /* mobile 2*/
   .about-and-skill{
      display: block;
   }
   .about-me{
      font-size: 13px;
      text-indent: 2em;
      margin: 25px;
      padding: 20px;
      border-radius: 15px;
   }
   .skill, .devtool{
      font-size: 12px;
      border-radius: 15px;
   }
   .skill .speak,.devtool .speak{
      font-size: 14px;
   }
   .skill li img{
      height: 30px;
      width: 35px;
      margin-right: 10px;
   }
   .skill mark{
      font-size: 10px;
      padding-left: 2px;
      padding-right: 2px;
      top: -15px;
   }
   .skill-bar{
      height: 7px;
   }
   .devtool li{
      display: block;
   }
   .tool{
      margin: 0;
      margin-bottom: 10px;
      width: 100%;
   }
}