*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

/* BODY */
body{
    min-height:100vh;

    overflow:hidden;

    position:relative;

    font-family:'Inter',sans-serif;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#0f172a;

    transition:
        background 2s ease;

    color:white;
}

/* SKY */
.sky{
    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    z-index:1;

    background:
    linear-gradient(
        180deg,
        #0f172a 0%,
        #1e3a8a 100%
    );

    transition:
        background 6s ease-in-out,
        filter 6s ease-in-out,
        opacity 6s ease-in-out;

    will-change:
        background,
        filter;
}

/* CLOUDS */
.clouds{
    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;

    z-index:2;

    pointer-events:none;
}

/* CLOUD */
.cloud{
    position:absolute;

    background:rgba(255,255,255,0.08);

    border-radius:200px;

    filter:blur(2px);

    transition:
        opacity 6s ease,
        background 6s ease;
}

body.morning .cloud{
    opacity:0.35;
}

body.afternoon .cloud{
    opacity:0.2;
}

body.evening .cloud{
    opacity:0.4;
}

body.night .cloud{
    opacity:0.15;
}

.cloud::before,
.cloud::after{
    content:'';

    position:absolute;

    background:inherit;

    border-radius:50%;
}

.cloud::before{
    width:100px;
    height:100px;

    top:-50px;
    left:50px;
}

.cloud::after{
    width:140px;
    height:140px;

    top:-70px;
    right:40px;
}

.x1{
    width:320px;
    height:100px;

    top:10%;

    animation:moveCloud 80s linear infinite;
}

.x2{
    width:250px;
    height:80px;

    top:35%;

    animation:moveCloud 65s linear infinite;
}

.x3{
    width:400px;
    height:120px;

    top:60%;

    animation:moveCloud 100s linear infinite;
}

.x4{
    width:220px;
    height:70px;

    top:75%;

    animation:moveCloud 70s linear infinite;
}

@keyframes moveCloud{
    from{
        transform:translateX(-500px);
    }

    to{
        transform:translateX(calc(100vw + 600px));
    }
}

/* WEATHER BOX */
.weather-box{

    position:fixed;

    top:20px;
    left:20px;

    z-index:20;

    width:clamp(280px, 38vw, 520px);

    background:rgba(255,255,255,0.08);

    border:1px solid rgba(255,255,255,0.1);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    padding:14px 18px;

    border-radius:22px;

    color:white;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.2);
}

/* WEATHER LEFT */
.weather-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.weather-icon{
    font-size:32px;
}

.weather-info{
    min-width:180px;
}

.weather-info h4{
    font-size:16px;
    font-weight:700;
    margin-bottom:4px;
}

.weather-info p{
    font-size:13px;
    opacity:0.75;
}

/* DIVIDER */
.weather-divider{
    width:1px;
    height:42px;

    background:
    rgba(255,255,255,0.12);
}

/* WEATHER RIGHT */
.weather-right{
    text-align:right;

    min-width:140px;

    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

/* TIME */
.live-time{
    font-size:24px;
    font-weight:700;

    line-height:1;

    letter-spacing:1px;

    font-variant-numeric: tabular-nums;

    min-width:120px;

    text-align:right;
}

/* DATE */
.live-date{
    margin-top:6px;

    font-size:12px;

    opacity:0.75;

    white-space:nowrap;

    min-width:120px;

    text-align:right;
}

/* LOGIN */
.login-container{
    position:relative;

    z-index:10;

    width:min(92%, 420px);

    padding:20px;

    flex-shrink:0;
}

.login-card{

    background:
    linear-gradient(
        180deg,
        rgba(15,23,42,0.72),
        rgba(15,23,42,0.58)
    );

    border:1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);

    padding:40px;

    border-radius:28px;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.35);

    color:white;

    animation:fadeUp .8s ease;

    text-align:center;

    transition:
        background 6s ease,
        border-color 6s ease,
        box-shadow 6s ease;
}

/* LOGIN CARD MODE */
body.morning .login-card{
    background:
    linear-gradient(
        180deg,
        rgba(15,23,42,0.70),
        rgba(15,23,42,0.58)
    );
}

body.afternoon .login-card{
    background:
    linear-gradient(
        180deg,
        rgba(15,23,42,0.64),
        rgba(15,23,42,0.50)
    );
}

body.evening .login-card{
    background:
    linear-gradient(
        180deg,
        rgba(15,23,42,0.74),
        rgba(15,23,42,0.60)
    );
}

body.night .login-card{
    background:
    linear-gradient(
        180deg,
        rgba(2,6,23,0.82),
        rgba(15,23,42,0.74)
    );
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* LOGO */
.logo{
    max-width:170px;

    margin:0 auto 25px;

    display:block;
}

/* TITLE */
.login-card h1{
    font-size:34px;

    margin-bottom:12px;

    text-align:center;
}

.subtitle{
    opacity:0.7;

    margin-bottom:30px;

    text-align:center;

    font-size:14px;

    line-height:1.5;
}

/* FORM */
form{
    text-align:left;
}

/* INPUT GROUP */
.input-group{
    position:relative;

    margin-bottom:18px;
}

/* LEFT ICON */
.input-group > i{
    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    color:rgba(255,255,255,0.5);

    z-index:2;
}

/* INPUT */
.input-group input{

    width:100%;
    height:54px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,0.12);

    background:rgba(15,23,42,0.35);

    color:white;

    padding-left:46px;
    padding-right:52px;

    font-size:15px;

    transition:.3s;
}

.input-group input:focus{
    outline:none;

    border-color:#3b82f6;

    box-shadow:
    0 0 0 4px rgba(59,130,246,0.2);
}

.input-group input::placeholder{
    color:rgba(255,255,255,0.5);
}

/* PASSWORD */
.password-group{
    position:relative;
}

/* EYE ICON */
.toggle-password{

    position:absolute;

    right:16px;
    top:50%;

    transform:translateY(-50%);

    width:20px;
    height:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    color:rgba(255,255,255,0.55);

    transition:.2s;

    z-index:5;
}

.toggle-password:hover{
    color:white;
}

/* BUTTON */
button{
    width:100%;
    height:54px;

    border:none;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    color:white;

    font-size:15px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:
    0 8px 25px rgba(37,99,235,0.35);
}

button:hover{
    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(37,99,235,0.4);
}

button.loading{
    opacity:0.7;
}

/* FORGOT */
.forgot{
    display:block;

    margin-top:18px;

    color:#93c5fd;

    text-decoration:none;

    font-size:14px;

    text-align:center;
}

/* ERROR */
.error{
    margin-top:15px;

    color:#fca5a5;

    font-size:14px;
}

/* RAIN */
.rain{
    position:fixed;

    width:2px;
    height:80px;

    pointer-events:none;

    background:
    linear-gradient(
        transparent,
        rgba(255,255,255,0.5)
    );

    animation:rainFall linear infinite;

    z-index:4;
}

@keyframes rainFall{
    from{
        transform:translateY(-100px);
    }

    to{
        transform:translateY(120vh);
    }
}

/* MORNING */
body.morning .sky{
    background:
    linear-gradient(
        180deg,
        #ffb347 0%,
        #ffd56f 30%,
        #87ceeb 100%
    );

    filter:
        saturate(1.08)
        brightness(1.03);
}

/* AFTERNOON */
body.afternoon .sky{
    background:
    linear-gradient(
        180deg,
        #3b82f6 0%,
        #60a5fa 45%,
        #93c5fd 100%
    );

    filter:
        saturate(1.02)
        brightness(1);
}

/* EVENING */
body.evening .sky{
    background:
    linear-gradient(
        180deg,
        #ff7e5f 0%,
        #feb47b 35%,
        #7c3aed 100%
    );

    filter:
        saturate(1.18)
        brightness(0.96);
}

/* NIGHT */
body.night .sky{
    background:
    linear-gradient(
        180deg,
        #020617 0%,
        #0f172a 40%,
        #1e3a8a 100%
    );

    filter:
        brightness(0.82)
        saturate(0.9);
}

/* RAINY */
body.rainy .sky{
    background:
    linear-gradient(
        180deg,
        #334155 0%,
        #1e293b 100%
    );
}

/* TABLET */
@media(max-width:900px){

    body{
        align-items:center;
    }

    .weather-box{

        left:50%;
        transform:translateX(-50%);

        width:92%;

        max-width:500px;
    }
}

/* MOBILE */
@media(max-width:768px){

    .weather-box{

        top:15px;

        width:calc(100% - 30px);

        padding:12px 14px;

        gap:14px;
    }

    .weather-divider{
        display:none;
    }

    .weather-icon{
        font-size:28px;
    }

    .weather-info h4{
        font-size:14px;
    }

    .weather-info p{
        font-size:12px;
    }

    .live-time{
        font-size:18px;
    }

    .live-date{
        font-size:11px;
    }

    .login-container{
        width:100%;
        padding:16px;
        margin-top:70px;
    }

    .login-card{
        padding:26px;
    }

    .login-card h1{
        font-size:28px;
    }
}

/* SMALL MOBILE */
@media(max-width:468px){

    .weather-box{
        border-radius:18px;
    }

    .login-card{
        padding:24px;
    }

    .login-card h1{
        font-size:26px;
    }

    .subtitle{
        font-size:13px;
    }
}