:root {
    --bg-dark: #121212;        /* Consistent with your other styles */
    --tag-bg: #2d2d2d;         /* Background for tags */
    --text-light: lightgray;   /* Tag text color */
    --spacing-sm: 5px;         /* Small spacing */
    --spacing-md: 10px;        /* Medium spacing (used consistently) */
    --spacing-lg: 20px;        /* Large spacing for margins */
    --border-radius: 5px;      /* Consistent radius */
    --accent: #edb049;         /* From your other styles, for hover effects */
}

.skills-panel {
    background: none;          /* Transparent background as preferred */
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);    /* Space between title and tags */
    width: 100%;               /* Full width of parent */
    margin-bottom: var(--spacing-lg);
    -webkit-user-select: none; /* Safari support */
    user-select: none;         /* Prevent text selection */
}

.software-tag-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--spacing-md);    /* Consistent spacing between tags */
    width: 100%;
}

.software-tag {
    background-color: var(--tag-bg);
    color: var(--text-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 0.25em;
    font-size: 14px;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.1s ease; /* Smooth hover effects */
}


/* Styling for each section panel */
.section-panel {
    background: none; /* Matches your last .skills-panel declaration */
    border-radius: 5px;
    padding: 10px; /* Consistent padding around title and tags */
    display: flex;
    flex-direction: column; /* Stack title and tags vertically */
    align-items: flex-start; /* Align content to the left */
    gap: 10px; /* Space between title and tags */
    width: 100%; /* Full width of the parent container */
    margin-bottom: 20px; /* Space between sections */
    -webkit-user-select: none; /* For Safari */
    user-select: none; /* Prevent text selection */
}

/* Styling for the tag containers */
.software-tag-container {
    display: flex;
    flex-wrap: wrap; /* Tags wrap to next line as needed */
    justify-content: flex-start; /* Align tags to the left */
    gap: 10px; /* Space between tags */
    width: 100%; /* Full width for responsiveness */
}



/* Styling for individual tags */
.software-tag {
    background-color: #2d2d2d; /* Dark background for tags */
    color: lightgray; /* Readable text color */
    padding: 5px 10px; /* Comfortable padding */
    border-radius: .25em; /* Slightly rounded corners */
    font-size: 14px; /* Readable font size */
    white-space: nowrap; /* Prevent tag text from wrapping */
}

/* Existing separator styling */
hr {
    opacity: .05; /* Keep your faint horizontal rule */
}

hr {
    opacity: 0.05;
    border: none;                    /* Remove default border */
    height: 1px;
    background-color: var(--text-light);
    margin: var(--spacing-md) 0;     /* Consistent spacing */
}


/* Responsive adjustments */
@media (max-width: 600px) {
    .skills-panel {
        padding: var(--spacing-sm);  /* Reduce padding on small screens */
        gap: var(--spacing-sm);
    }

    .software-tag-container {
        gap: var(--spacing-sm);      /* Tighter spacing for tags */
    }

    .software-tag {
        font-size: 12px;             /* Slightly smaller text */
        padding: 4px 8px;            /* Adjusted padding */
    }
}