.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem}.skills-grid .left{display:flex;flex-direction:column;justify-self:end;justify-content:center}.skills-grid .right{justify-self:start}.skills .languages-container{display:flex;flex-direction:column;gap:15px;align-items:center}.skills .hex-grid-container{justify-content:center;align-items:center;height:100%;margin:4rem 2rem 2rem}.skills .concepts-and-practices{display:flex;flex-direction:column;gap:1rem}.skills .concepts-and-practices .expandable-box .content{display:flex;flex-direction:column;align-items:left;width:100%;margin-top:1rem;margin-left:7%;padding-right:4rem;gap:1%}.skills .concepts-and-practices li{font-size:.875rem}.skills .concepts-and-practices ul{list-style-type:circle;padding-left:1.5rem;margin-bottom:2rem;margin-top:.5rem}.skills .concepts-and-practices .expandable-box .two-col{font-size:.875rem}.skills-expandable-box-content~.one-col{grid-template-columns:1fr}@media (max-width:639px){.skills-grid{grid-template-columns:1fr}}.hex-grid{display:grid;grid-template-columns:max-content max-content max-content;width:fit-content;justify-self:center}.hex-grid .left{display:flex;flex-direction:column;justify-content:center;background-color:var(--color-accent-pink-dark);height:15rem;text-align:center;width:3rem}.hex-grid-column{margin-left:calc((var(--hexagon-size) / 2) + (var(--hex-gap) / 2))}.hex-grid-column,.hex-grid-column-odd{margin-top:-1rem;display:flex;flex-direction:row;align-items:center}.hexagon{width:var(--hexagon-size);aspect-ratio:1;position:relative;perspective:100vmin;transform-style:preserve-3d;transition:transform .45s ease}.hex-shape{fill:color-mix(in srgb,var(--color-accent-pink-dark) 20%,transparent);stroke:var(--color-accent-pink-dark);stroke-width:1px;transition:stroke-width .25s ease}.text-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;font-weight:700;color:var(--color-brand);backface-visibility:hidden;transform-style:preserve-3d}.text-face.front{transform:rotateY(0deg) translateZ(1px)}.text-face.back{transform:rotateY(180deg) translateZ(1px)}.hexagon:hover{transform:translateY(-1rem) rotateY(180deg)}@media (max-width:639px){.text-face{font-size:.6rem}}