.container{box-sizing:border-box;background:#282828;border-radius:7px;width:100%;max-width:100%;padding:10px 20px;position:relative}.container .skill-box{width:100%;margin:25px 0}.skill-box .title{color:#e2e2e2;font-size:14px;font-weight:600;display:block}.skill-box .skill-bar{background:rgba(236,236,236,.1);border-radius:6px;width:100%;height:8px;margin-top:6px}.skill-bar .skill-per{opacity:0;background:#e2e2e2;border-radius:6px;width:90%;height:100%;animation:.4s ease-in-out forwards progress;display:block;position:relative}.skill-per.html{width:98%;animation-delay:.1s}.skill-per.css{width:80%;animation-delay:.1s}.skill-per.JavaScript{width:80%;animation-delay:.2s}.skill-per.TypeScript{width:70%;animation-delay:.2s}.skill-per.Python,.skill-per.Csharp{width:30%;animation-delay:.2s}.skill-per.Java{width:20%;animation-delay:.2s}.skill-per.React{width:50%;animation-delay:.2s}.skill-per.Next{width:30%;animation-delay:.2s}.skill-per.TailwindCSS{width:50%;animation-delay:.2s}.skill-per.NodeJs{width:40%;animation-delay:.2s}.skill-per.Figma{width:70%;animation-delay:.2s}@keyframes progress{0%{opacity:1;width:0}to{opacity:1}}.skill-per .tooltip{color:#000;z-index:1;background:#e2e2e2;border-radius:3px;padding:2px 6px;font-size:9px;font-weight:700;position:absolute;top:-28px;right:-14px}.tooltip:before{content:"";z-index:-1;background-color:#e2e2e2;width:10px;height:10px;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)rotate(45deg)}