body {
    font-family: 'Poppins', sans-serif;
    background-color: white;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.login-box {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 40rem;
    height: 41rem;
}

img {
    width: 14rem;
    margin-bottom: 12px;
    margin-left: 8px;
}

h2 {
    margin-bottom: 20px;
    font-size: 2rem;
}

label {
    font-size: 1.2rem;
    font-weight: bold;
}

input {
    width: 95%;
    padding: 12px;
    margin: 10px 0;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 1.2rem;
}

button {
    width: 100%;
    padding: 12px;
    background: #4a90e2;
    color: white;
    cursor: pointer;
    border-radius: 2rem;
    border: none;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}

button:hover {
    background: #3b7ec2;
    transform: scale(1.05);
}

.error {
    color: red;
    font-size: 16px;
}

.form-login{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 29rem;
}


.input-box {
    position: relative;
    width: 90%;
}

.input-box input {
    width: 95%;
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease-in-out, padding-top 0.3s ease-in-out;
    margin-bottom: 1rem;
}

.input-box label {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #888;
    transition: 0.3s ease-in-out;
    pointer-events: none;
}

.input-box input:focus, 
.input-box input:valid {
    padding-top: 18px;
    padding-bottom: 6px;
    border-color: #4777f5;
}

.input-box input:focus + label,
.input-box input:not(:placeholder-shown) + label {
    top: 4px;
    left: 12px;
    font-size: 12px;
    color: #4777f5;
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #888;
}

.toggle-password:hover {
    color: #4777f5;
}

p{
    display: flex;
    flex-direction: column;
}

.for-pass {
    text-align: right;
    width: 90%;
    margin-top: -13px;
}

.for-pass a {
    text-decoration: none;
    color: #4a90e2; /* Adjust color as needed */
    font-weight: bold;
}

.for-pass a:hover {
    color: #3b7ec2;
}

.error-message{
    color: red;
}

.success-message{
    color: red;
}

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

.shake {
    animation: shake 0.5s ease-in-out;
    color: red;
    font-weight: bold;
}


.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #6873f3;
    overflow: hidden;
}

.background span {
    width: 40vmin;
    height: 40vmin;
    border-radius: 40vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 38;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #ade0ff;
    top: 42%;
    left: 84%;
    animation-duration: 24s;
    animation-delay: -20s;
    transform-origin: 4vw -22vh;
    box-shadow: -80vmin 0 10.197126825674555vmin currentColor;
}
.background span:nth-child(1) {
    color: #ade0ff;
    top: 39%;
    left: 25%;
    animation-duration: 90s;
    animation-delay: -68s;
    transform-origin: -9vw 25vh;
    box-shadow: 80vmin 0 10.421037537229536vmin currentColor;
}
.background span:nth-child(2) {
    color: #ade0ff;
    top: 80%;
    left: 91%;
    animation-duration: 73s;
    animation-delay: -76s;
    transform-origin: 9vw -4vh;
    box-shadow: 80vmin 0 10.733996328313273vmin currentColor;
}
.background span:nth-child(3) {
    color: #00affa;
    top: 1%;
    left: 22%;
    animation-duration: 70s;
    animation-delay: -80s;
    transform-origin: 20vw -24vh;
    box-shadow: -80vmin 0 10.812668348509261vmin currentColor;
}
.background span:nth-child(4) {
    color: #56bbe6;
    top: 97%;
    left: 44%;
    animation-duration: 14s;
    animation-delay: -111s;
    transform-origin: 10vw 24vh;
    box-shadow: 80vmin 0 10.494899894317129vmin currentColor;
}
.background span:nth-child(5) {
    color: #56bbe6;
    top: 17%;
    left: 69%;
    animation-duration: 12s;
    animation-delay: -2s;
    transform-origin: -8vw -4vh;
    box-shadow: 80vmin 0 10.31729643063361vmin currentColor;
}
.background span:nth-child(6) {
    color: #ade0ff;
    top: 9%;
    left: 51%;
    animation-duration: 102s;
    animation-delay: -43s;
    transform-origin: -20vw -18vh;
    box-shadow: -80vmin 0 10.244895818304244vmin currentColor;
}
.background span:nth-child(7) {
    color: #00affa;
    top: 41%;
    left: 46%;
    animation-duration: 35s;
    animation-delay: -84s;
    transform-origin: -10vw -21vh;
    box-shadow: -80vmin 0 10.709367982295522vmin currentColor;
}
.background span:nth-child(8) {
    color: #ade0ff;
    top: 72%;
    left: 99%;
    animation-duration: 34s;
    animation-delay: -97s;
    transform-origin: 19vw -4vh;
    box-shadow: 80vmin 0 10.843089149111728vmin currentColor;
}
.background span:nth-child(9) {
    color: #56bbe6;
    top: 36%;
    left: 63%;
    animation-duration: 15s;
    animation-delay: -114s;
    transform-origin: 10vw -4vh;
    box-shadow: 80vmin 0 10.10762498508252vmin currentColor;
}
.background span:nth-child(10) {
    color: #56bbe6;
    top: 32%;
    left: 61%;
    animation-duration: 112s;
    animation-delay: -96s;
    transform-origin: 2vw -4vh;
    box-shadow: 80vmin 0 10.770962615680752vmin currentColor;
}
.background span:nth-child(11) {
    color: #56bbe6;
    top: 90%;
    left: 75%;
    animation-duration: 26s;
    animation-delay: -100s;
    transform-origin: 11vw -14vh;
    box-shadow: -80vmin 0 10.000485123256425vmin currentColor;
}
.background span:nth-child(12) {
    color: #ade0ff;
    top: 86%;
    left: 3%;
    animation-duration: 36s;
    animation-delay: -60s;
    transform-origin: 15vw -7vh;
    box-shadow: -80vmin 0 10.82240453924733vmin currentColor;
}
.background span:nth-child(13) {
    color: #ade0ff;
    top: 6%;
    left: 79%;
    animation-duration: 114s;
    animation-delay: -38s;
    transform-origin: 13vw 21vh;
    box-shadow: 80vmin 0 10.711619213003017vmin currentColor;
}
.background span:nth-child(14) {
    color: #00affa;
    top: 77%;
    left: 36%;
    animation-duration: 65s;
    animation-delay: -24s;
    transform-origin: -8vw -6vh;
    box-shadow: 80vmin 0 10.865782123013338vmin currentColor;
}
.background span:nth-child(15) {
    color: #00affa;
    top: 91%;
    left: 27%;
    animation-duration: 109s;
    animation-delay: -77s;
    transform-origin: 0vw -24vh;
    box-shadow: 80vmin 0 10.851951793281042vmin currentColor;
}
.background span:nth-child(16) {
    color: #00affa;
    top: 47%;
    left: 98%;
    animation-duration: 110s;
    animation-delay: -61s;
    transform-origin: 23vw 8vh;
    box-shadow: -80vmin 0 10.084993513758084vmin currentColor;
}
.background span:nth-child(17) {
    color: #56bbe6;
    top: 46%;
    left: 89%;
    animation-duration: 84s;
    animation-delay: -100s;
    transform-origin: -11vw 17vh;
    box-shadow: -80vmin 0 10.092536511925019vmin currentColor;
}
.background span:nth-child(18) {
    color: #56bbe6;
    top: 30%;
    left: 20%;
    animation-duration: 73s;
    animation-delay: -109s;
    transform-origin: -16vw -8vh;
    box-shadow: -80vmin 0 10.258851317022572vmin currentColor;
}
.background span:nth-child(19) {
    color: #ade0ff;
    top: 29%;
    left: 16%;
    animation-duration: 47s;
    animation-delay: -60s;
    transform-origin: 0vw 14vh;
    box-shadow: -80vmin 0 10.316429247224741vmin currentColor;
}
.background span:nth-child(20) {
    color: #ade0ff;
    top: 71%;
    left: 46%;
    animation-duration: 74s;
    animation-delay: -44s;
    transform-origin: -10vw -14vh;
    box-shadow: -80vmin 0 10.852683383555462vmin currentColor;
}
.background span:nth-child(21) {
    color: #ade0ff;
    top: 91%;
    left: 69%;
    animation-duration: 38s;
    animation-delay: -70s;
    transform-origin: -23vw -10vh;
    box-shadow: -80vmin 0 10.761694735208339vmin currentColor;
}
.background span:nth-child(22) {
    color: #00affa;
    top: 95%;
    left: 24%;
    animation-duration: 12s;
    animation-delay: -14s;
    transform-origin: -21vw 17vh;
    box-shadow: -80vmin 0 10.258742871614228vmin currentColor;
}
.background span:nth-child(23) {
    color: #ade0ff;
    top: 39%;
    left: 55%;
    animation-duration: 44s;
    animation-delay: -73s;
    transform-origin: -21vw 12vh;
    box-shadow: -80vmin 0 10.531003376476066vmin currentColor;
}
.background span:nth-child(24) {
    color: #00affa;
    top: 27%;
    left: 44%;
    animation-duration: 14s;
    animation-delay: -86s;
    transform-origin: -24vw -8vh;
    box-shadow: 80vmin 0 10.529334771614506vmin currentColor;
}
.background span:nth-child(25) {
    color: #00affa;
    top: 76%;
    left: 77%;
    animation-duration: 10s;
    animation-delay: -114s;
    transform-origin: 8vw -1vh;
    box-shadow: -80vmin 0 10.427534186481907vmin currentColor;
}
.background span:nth-child(26) {
    color: #00affa;
    top: 82%;
    left: 30%;
    animation-duration: 62s;
    animation-delay: -22s;
    transform-origin: -14vw 1vh;
    box-shadow: -80vmin 0 10.518016483030186vmin currentColor;
}
.background span:nth-child(27) {
    color: #00affa;
    top: 56%;
    left: 38%;
    animation-duration: 98s;
    animation-delay: -94s;
    transform-origin: -16vw 16vh;
    box-shadow: 80vmin 0 10.34290012056785vmin currentColor;
}
.background span:nth-child(28) {
    color: #00affa;
    top: 82%;
    left: 3%;
    animation-duration: 93s;
    animation-delay: -93s;
    transform-origin: 25vw 22vh;
    box-shadow: 80vmin 0 10.19185282404197vmin currentColor;
}
.background span:nth-child(29) {
    color: #56bbe6;
    top: 17%;
    left: 92%;
    animation-duration: 87s;
    animation-delay: -20s;
    transform-origin: 13vw -7vh;
    box-shadow: 80vmin 0 10.459639258860806vmin currentColor;
}
.background span:nth-child(30) {
    color: #ade0ff;
    top: 3%;
    left: 41%;
    animation-duration: 116s;
    animation-delay: -21s;
    transform-origin: -8vw 20vh;
    box-shadow: 80vmin 0 10.139753529799727vmin currentColor;
}
.background span:nth-child(31) {
    color: #56bbe6;
    top: 87%;
    left: 5%;
    animation-duration: 75s;
    animation-delay: -113s;
    transform-origin: -16vw 4vh;
    box-shadow: 80vmin 0 10.340860893698364vmin currentColor;
}
.background span:nth-child(32) {
    color: #ade0ff;
    top: 63%;
    left: 5%;
    animation-duration: 38s;
    animation-delay: -38s;
    transform-origin: 22vw 23vh;
    box-shadow: 80vmin 0 10.604550065102009vmin currentColor;
}
.background span:nth-child(33) {
    color: #00affa;
    top: 97%;
    left: 59%;
    animation-duration: 71s;
    animation-delay: -59s;
    transform-origin: 24vw -21vh;
    box-shadow: -80vmin 0 10.820790429898075vmin currentColor;
}
.background span:nth-child(34) {
    color: #00affa;
    top: 99%;
    left: 96%;
    animation-duration: 17s;
    animation-delay: -23s;
    transform-origin: 0vw 12vh;
    box-shadow: 80vmin 0 10.565536417285966vmin currentColor;
}
.background span:nth-child(35) {
    color: #56bbe6;
    top: 83%;
    left: 47%;
    animation-duration: 117s;
    animation-delay: -110s;
    transform-origin: -16vw 17vh;
    box-shadow: -80vmin 0 10.099172817647052vmin currentColor;
}
.background span:nth-child(36) {
    color: #56bbe6;
    top: 80%;
    left: 54%;
    animation-duration: 104s;
    animation-delay: -12s;
    transform-origin: 17vw -1vh;
    box-shadow: 80vmin 0 10.406056856651167vmin currentColor;
}
.background span:nth-child(37) {
    color: #56bbe6;
    top: 40%;
    left: 82%;
    animation-duration: 30s;
    animation-delay: -34s;
    transform-origin: 18vw -18vh;
    box-shadow: 80vmin 0 10.512193855431134vmin currentColor;
}
.background span:nth-child(38) {
    color: #56bbe6;
    top: 68%;
    left: 93%;
    animation-duration: 73s;
    animation-delay: -53s;
    transform-origin: 7vw -8vh;
    box-shadow: -80vmin 0 10.198384138251692vmin currentColor;
}
.background span:nth-child(39) {
    color: #ade0ff;
    top: 29%;
    left: 1%;
    animation-duration: 76s;
    animation-delay: -62s;
    transform-origin: 4vw 4vh;
    box-shadow: 80vmin 0 10.779275271586751vmin currentColor;
}
.background span:nth-child(40) {
    color: #00affa;
    top: 72%;
    left: 76%;
    animation-duration: 31s;
    animation-delay: -116s;
    transform-origin: -22vw -15vh;
    box-shadow: -80vmin 0 10.686040112298368vmin currentColor;
}
.background span:nth-child(41) {
    color: #ade0ff;
    top: 18%;
    left: 38%;
    animation-duration: 75s;
    animation-delay: -68s;
    transform-origin: -24vw -8vh;
    box-shadow: -80vmin 0 10.42237689990018vmin currentColor;
}
.background span:nth-child(42) {
    color: #ade0ff;
    top: 95%;
    left: 17%;
    animation-duration: 87s;
    animation-delay: -5s;
    transform-origin: 24vw 11vh;
    box-shadow: -80vmin 0 10.631405940609719vmin currentColor;
}
.background span:nth-child(43) {
    color: #ade0ff;
    top: 80%;
    left: 44%;
    animation-duration: 36s;
    animation-delay: -83s;
    transform-origin: 7vw 8vh;
    box-shadow: 80vmin 0 10.291630662379472vmin currentColor;
}
.background span:nth-child(44) {
    color: #56bbe6;
    top: 86%;
    left: 43%;
    animation-duration: 62s;
    animation-delay: -17s;
    transform-origin: -24vw -18vh;
    box-shadow: -80vmin 0 10.37736025771759vmin currentColor;
}
.background span:nth-child(45) {
    color: #00affa;
    top: 74%;
    left: 5%;
    animation-duration: 33s;
    animation-delay: -105s;
    transform-origin: 15vw 14vh;
    box-shadow: 80vmin 0 10.595255087834452vmin currentColor;
}
.background span:nth-child(46) {
    color: #ade0ff;
    top: 13%;
    left: 65%;
    animation-duration: 37s;
    animation-delay: -91s;
    transform-origin: -7vw 6vh;
    box-shadow: 80vmin 0 10.480438201413913vmin currentColor;
}
.background span:nth-child(47) {
    color: #56bbe6;
    top: 81%;
    left: 68%;
    animation-duration: 100s;
    animation-delay: -51s;
    transform-origin: -15vw 18vh;
    box-shadow: 80vmin 0 10.39708717065799vmin currentColor;
}
.background span:nth-child(48) {
    color: #00affa;
    top: 30%;
    left: 5%;
    animation-duration: 61s;
    animation-delay: -63s;
    transform-origin: 5vw -19vh;
    box-shadow: 80vmin 0 10.550101521392607vmin currentColor;
}
.background span:nth-child(49) {
    color: #ade0ff;
    top: 96%;
    left: 1%;
    animation-duration: 20s;
    animation-delay: -114s;
    transform-origin: -10vw 8vh;
    box-shadow: 80vmin 0 10.529393007956498vmin currentColor;
}