@import"https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Gabarito,sans-serif}body,#root{background-color:#0f172a;color:#fff;margin-left:2%;margin-right:2%}header{margin-top:2%}h1{color:#38bdf8;font-size:clamp(1.5rem,5vw,2.5rem);text-align:center;text-transform:uppercase}h2{color:#a0d8f1;font-size:clamp(1.2rem,4vw,2rem);text-transform:uppercase}.skills-container{list-style:none;position:relative;display:flex;justify-content:space-around;flex-wrap:wrap;align-items:center;text-align:center;gap:2rem;padding:1rem}.skills-container .progress{position:relative;width:120px;height:120px;border-radius:50%;color:#fff;background:#0f172a linear-gradient(to right,transparent 50%,var(--clr) 0);flex-shrink:0}.skills-container .progress h3{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2em;z-index:1;font-weight:500}.skills-container .progress h3 span{font-size:.65em;font-weight:400}.skills-container .progress h4{position:absolute;top:62%;left:50%;transform:translate(-50%);z-index:1;font-weight:500;color:var(--clr);text-transform:uppercase;font-size:.85em}.skills-container .progress:before{content:"";display:block;height:100%;margin-left:50%;transform-origin:left;border-radius:0 100% 100% 0/50%}.skills-container .progress:after{content:"";position:absolute;inset:8%;border-radius:50%;background:#0f172a}.skills-container .progress:before{background:var(--clr);transform:rotate(calc(((var(--i) - 50)*.01turn)))}.skills-container .progress.less:before{background:#0f172a;transform:rotate(calc(((var(--i) - 0)*.01turn)))}.skillForm{margin-top:5%}.themeForm{margin-top:15%}.themes{margin-bottom:1%}label{color:#a0d8f1}input{background:none;outline:none;padding:1%;border-color:#a0d8f1;color:#fff}button{width:2rem;height:2rem;background-color:#a0d8f1;border:none;border-radius:50%}footer{justify-content:center;background-color:#000;width:100%}@media(max-width:768px){.skills-container .progress{width:100px;height:100px}.skills-container .progress h3{font-size:1.6em}.skills-container .progress h4{font-size:.75em}.skills-container{gap:1.5rem}}@media(max-width:480px){.skills-container .progress{width:90px;height:90px}.skills-container .progress h3{font-size:1.4em}.skills-container{gap:1rem}}footer{background-color:#2c3e50;color:#ecf0f1;padding:40px 20px 20px;margin-top:50px;font-size:.7rem}.footer-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;padding-bottom:30px}.footer-section h3{color:#3498db;margin-bottom:15px;font-size:1rem}.footer-section p{line-height:1.6;margin:10px 0}.footer-section ul{list-style:none;padding:0}.footer-section ul li{margin:8px 0}.footer-section ul li a{color:#ecf0f1;text-decoration:none;transition:color .3s ease}.footer-section ul li a:hover{color:#3498db}.social-links{display:flex;gap:15px;flex-wrap:wrap}.social-links a{color:#ecf0f1;text-decoration:none;transition:color .3s ease}.social-links a:hover{color:#3498db}.footer-bottom{border-top:1px solid #34495e;padding-top:20px;text-align:center;margin-top:20px}.footer-bottom p{margin:0;font-size:.7rem;color:#bdc3c7}@media(max-width:768px){.footer-container{grid-template-columns:1fr;text-align:center}.social-links{justify-content:center}}