body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #1a1a1a;
    background-image: url('https://cdn.rustyfields.com/web/img/bgs/linking_main.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(52 0 99 / 47%);
    z-index: 1;
}

.container {
    background: hsl(202.11deg 76% 4.9% / 78%);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    width: 70%;
    max-width: 645px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.gradient-preview {
    width: 100%;
    height: 100px;
    border-radius: 4px;
    margin: 20px auto;
    border: 1px solid #444;
}

.color-input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.color-input input[type="color"] {
    margin-right: 10px;
    background-color: #3333334d;
    border: 1px solid #555;
    border-radius: 4px;
}

.color-input input[type="text"] {
    width: 80px;
    margin-right: 10px;
    background-color: #3333334d;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 4px;
    text-align: center;
}

button {
    padding: 8px 16px;
    margin: 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
}

button:hover {
    background-color: #0056b3;
}

#removeColor {
    background-color: #dc3545;
}

#removeColor:hover {
    background-color: #b02a37;
}

.instructions {
    margin-top: 10px;
    font-size: 13px;
    color: #ffffff; /* Slightly muted for contrast */
}

#output {
    margin-top: 10px;
    padding: 10px;
    background-color: #3333334d;
    color: #e0e0e0;
    border-radius: 4px;
    word-break: break-all;
}

#copyButton {
    margin-top: 10px;
    background-color: #ffa2449c; /* Green for copy action */
}

#copyButton:hover {
    background-color: #ffa344d9;
}

h1 {
    color: #e0e0e0;
    margin-bottom: 20px;
}

#colorInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button-container {
    display: flex;
    justify-content: center;
}

.text-sample {
    margin: 20px 0;
}

.text-sample label {
    display: block;
    margin-bottom: 5px;
    color: #b0b0b0;
}

.text-sample input {
    padding: 8px;
    width: 200px;
    background-color: #3333334d;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 4px;
    text-align: center;
}

.live-sample {
    margin: 20px 0;
    font-size: 32px; /* Increased from 32px to match in-game size */
    font-weight: 600; /* Increased to make text bolder */
    letter-spacing: 0px; /* Increased to match in-game spacing */
    line-height: 1; /* Match in-game text compactness */
    background-image: url('https://img.restlessrust.com/restless_network/images/global/images/Screenshot%202025-04-29%20182549.png');
    background-size: cover; /* Ensure the image covers the element */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent tiling */
    padding: 5px 10px; /* Add padding to ensure text isn't too close to edges */
    display: inline-block; /* Fit the background to the text width */
    font-family: "Helvetica Black Condensed", "Helvetica Neue", "Arial Narrow", Arial, sans-serif; /* Match requested font with fallbacks */
    -webkit-text-stroke: 1px black; /* Add outline effect for Webkit browsers */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), /* Add shadow as fallback */
                -1px -1px 1px rgba(0, 0, 0, 0.8),
                1px -1px 1px rgba(0, 0, 0, 0.8),
                -1px 1px 1px rgba(0, 0, 0, 0.8);
}