:root {
    --font-size: clamp(1rem, 2vw, 1.5rem);
    --smaller-font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    --background-color: #f8f9fa;
    --text-color: #000000;
    --selected-input-color: #3aa357;
    --text-placeholder-color: rgb(211, 211, 211);
}
html {
    font-size: 16px; /* Default size */
}
@media (max-width: 768px) {
    html {
        font-size: 14px; /* Shrinks text for smaller screens */
    }
}
body {
    font-size: var(--font-size);
}

.container-input {
    position: relative;
    /* display: inline-block;*/
    border: 1px solid rgb(0, 0, 0);
    padding: 5px;
    border-radius: 3px;
    /* margin-bottom: 15px;
    width: 220px;*/
    z-index: 0;
}

.container-input input {
    font-size: var(--font-size); /* Ensures input text size is responsive */
    border: none;
    outline: none;
    padding: 5px;
    width: 100%;
    background: transparent;
}

.placeholder-element {
    pointer-events: none;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: var(--text-placeholder-color);
    transition: all 0.3s ease;
}
input:placeholder-shown + .placeholder-element {
       
}
input:focus + .placeholder-element,
input:not(:placeholder-shown) + .placeholder-element {
    left: 5px;
    top: 0px;
    font-size: var(--smaller-font-size);
    background: rgb(255, 255, 255,1) !important;
    padding: 0 5px;
    color: var(--text-color);
    z-index: 1;
}

.container-input:focus-within {
    border: 1px solid var(--selected-input-color);   
}