input{
    height: 20px;
    font-size: 18px;
}
#container input{
    display: block;
    margin: 10px 0;
    border: none;
 
}
/* 🌌 Alapstílus – szürke-kék átmenet */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #cfd9df, #e2ebf0);
    min-height: 100vh;
    margin: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
/* 📦 Listaelemek konténere */
#container {
    width: 90%;
    max-width: 600px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
 
/* 🧩 Listaelem doboz (árnyékkal és kék csíkkal) */
[id^="itemcontainer"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(145deg, #f2f6f9, #d9e2ec);
    border-radius: 10px;
    padding: 12px 18px;
    box-shadow: 0 6px 12px rgba(0, 30, 60, 0.2);
    transition: all 0.25s ease-in-out;
    animation: fadeIn 0.3s ease;
    position: relative;
    overflow: hidden;
}
/* 💙 Bal oldali díszcsík – alapértelmezett */
[id^="itemcontainer"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
 
/* 💙 Páratlan elemek világosabb kék csíkkal */
#container > div:nth-child(odd)::before {
    background: linear-gradient(180deg, #6ea6d8, #2e6fa3);
}
 
/* 💙 Páros elemek sötétebb kék csíkkal */
#container > div:nth-child(even)::before {
    background: linear-gradient(180deg, #3f5b83, #1f3d64);
}
 
/* Hover effektek */
[id^="itemcontainer"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 18px rgba(0, 30, 60, 0.25);
}
 
/* ✏️ Általános inputok (a te eredetidből) */
input {
    height: 20px;
    font-size: 18px;
}
 
/* 🔹 A #container-en belüli inputok (listaelemek) */
#container input {
    display: block;
    margin: 10px 0;
    border: none;
}
 
/* 🗒️ Listaelem szövegmező */
.listitem {
    border: none;
    background: transparent;
    font-size: 1rem;
    flex-grow: 1;
    outline: none;
    color: #2c3e50;
    font-weight: 500;
}
 
/* 🗑️ Törlés ikon */
.delete_img {
    width: 25px;
    height: 25px;
    margin-left: 10px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
}
 
.delete_img:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 5px #ff4b5c);
}
 
/* ➕ Hozzáadás rész */
div:last-of-type {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
 
/* 🖊️ Input mező (új elem hozzáadásához) */
#elem {
    width: 300px;
    padding: 10px 15px;
    border-radius: 10px;
    border: 2px solid #5b8db8;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s;
    background: #f7fbff;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}
 
#elem:focus {
    border-color: #1f4e79;
    box-shadow: 0 0 8px #5b8db8;
}
 
/* ➕ Ikon (hozzáadás gomb) */
img[alt="Hozzáadás"] {
    width: 35px;
    height: 35px;
    cursor: pointer;
    transition: transform 0.25s, filter 0.25s;
}
 
img[alt="Hozzáadás"]:hover {
    transform: rotate(90deg) scale(1.1);
    filter: drop-shadow(0 0 6px #5b8db8);
}
 
/* 🌈 Páros/páratlan elemek finom váltása */
#container > div:nth-child(odd) {
    background: linear-gradient(145deg, #e9eff3, #d0dae2);
}
 
#container > div:nth-child(even) {
    background: linear-gradient(145deg, #f3f7fa, #dde5ed);
}
 
/* 🎉 Animáció új elemre */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}