.skills-container{flex-wrap:wrap;gap:1rem;padding:1rem 0;display:flex}.skills-container .skill-container{background:var(--container-color,#fff);cursor:pointer;color:var(--text-color);border:1px solid #00000014;border-radius:.75rem;align-items:center;max-width:max-content;padding:.75rem 1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1);animation:.5s ease-out forwards bottomToTop;display:inline-flex;box-shadow:0 2px 4px #00000005}.skills-container .skill-container:hover{border-color:#0070f34d;transform:translateY(-3px);box-shadow:0 6px 12px #0070f31a}.app.dark .skills-container .skill-container{background:var(--container-color,#1a1a1a);border:1px solid #ffffff1a}.app.dark .skills-container .skill-container:hover{border-color:#fff3;box-shadow:0 6px 12px #ffffff0d}.skills-container .sub-skill-container{justify-content:space-between;align-items:center;gap:1rem;width:100%;display:flex}.skills-container .skill-name-container{flex-direction:row;align-items:center;gap:.75rem;display:flex}.skills-container .skill-name-container .skill-name{letter-spacing:-.01em;text-wrap:nowrap;justify-self:start;font-size:.95rem;font-weight:600}.skill-details{justify-content:flex-end;align-items:center;gap:.25rem;display:flex}.heading#skills .btn-container{gap:1rem;display:flex}.sort.btn{color:var(--text-color);background:#0070f31a;border:1px solid #0000;border-radius:.5rem;padding:.5rem 1rem;font-weight:500;transition:all .2s}.sort.btn:hover{background:#0070f326;border-color:#0070f333}.app.dark .sort.btn{background:#ffffff1a}.skill-details-container{flex-direction:column;width:100%;height:100%;display:flex}.skill-details-container .heading{border-bottom:1px solid #0000001a;margin-bottom:1rem;padding-bottom:1rem}.skill-details-container .projects-container{box-sizing:border-box;padding:.5rem;overflow-y:auto}@media (max-width:870px){.skills-container .skill-container{padding:.6rem 1rem}}@media (max-width:420px){.sort.btn{font-size:.85rem}.heading#skills .btn-container{gap:.5rem}}