/* Px to Rem Converter specific styles */

/* Different gradient for this tool page */
body {
    background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 50%, #fce7f3 100%); /* Light Violet -> Light Purple -> Light Fuchsia */
}

/* Style the tool title with a different gradient */
.gradient-text-pxrem {
    background: linear-gradient(to right, #8b5cf6, #a855f7, #d946ef); /* Violet -> Purple -> Fuchsia */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.25rem;
}

/* Input field focus */
.input-field:focus {
    border-color: #a855f7; /* Purple-500 */
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
}

/* Base font size input */
#baseFontSize {
    font-weight: 500;
}

/* Input fields for units */
.unit-input input {
    /* padding-right adjusted if using copy button inside */
    padding-right: 2.5rem; /* Make space for copy button */
}

/* Copy button styling */
.copy-btn {
    /* Basic styling, customize as needed */
}

/* Swap button styling */
.swap-btn {
    /* Customize if needed */
}