.skills-container {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 2px dashed var(--dpurple);
    border-radius: 18px;
    background: color-mix(in srgb, var(--sectionbg) 65%, transparent);
    backdrop-filter: blur(2px);

    margin: 0 auto 0 auto;
    max-width: clamp(200px, 50vw, 800px);
}

.skills-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.skills-column {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.skills-column::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;

  background: linear-gradient(
    to bottom,
    transparent,
    var(--dpurple),
    var(--dpurple),
    transparent
  );

  pointer-events: none;
}

.skills-column:last-child::after {
    display: none;
}

.skills-title {
    font-weight: 400;
    font-size: 2rem;
    margin: 0;
    color: var(--fblue);
}

.skills-subtitle {
    color: var(--glassviolet);
    font-family: "Lexend";
    font-weight: 400;
    font-size: clamp(1rem, 3vw, 1.2rem);
    margin-bottom: -0.25rem;
    margin-top: 1rem;
}

.skills-desc {
    color: var(--white);
    font-weight: 400;
    font-size: clamp(0.8rem, 3vw, 1rem);
    font-family: "Lexend";
    margin-right: 10px;
    margin-bottom: -0.25rem;
}

.skills-subtitle::before {
    content: "✦ ";
    color: var(--muted);
}