#doboz {
    background: transparent;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    max-width: 450px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
}

html,
body {
    height: 100%;
    width: 100%;
    user-select: none;
}

.email {
    background: rgba(255, 255, 255, 0.075);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.email::placeholder {
    color: white;
}

.email:focus {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.jelszo {
    background: rgba(255, 255, 255, 0.075);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.jelszo::placeholder {
    color: white;
}

.jelszo:focus {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.nev {
    background: rgba(255, 255, 255, 0.075);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.nev::placeholder {
    color: white;
}

.nev:focus {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.osztaly {
    background: rgba(255, 255, 255, 0.075);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.osztaly::placeholder {
    color: white;
}

.osztaly:focus {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

body {
    font-family: Verdana;
}

.btn-link {
    text-decoration: none;
}


.btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}



@media screen and (max-width: 842px) {
    #doboz {
        width: 420.58px;
    }
}

@media screen and (max-width: 450px) {
    #doboz {
        width: 90%;
    }
}




/* ─── ANIMATED BACKGROUND ─── */
.background {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 15% 25%, #4a8fd4 0%, transparent 45%),
        radial-gradient(circle at 85% 20%, #2a6fbb 0%, transparent 45%),
        radial-gradient(circle at 70% 75%, #8a7abf 0%, transparent 50%),
        linear-gradient(135deg, #3a7fd0, #7a6ab8);
    animation: bgShift 12s ease-in-out infinite alternate;
}

@keyframes bgShift {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }

    100% {
        filter: hue-rotate(15deg) brightness(1.05);
    }
}