@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
background:#121417;
transition:0.6s;
}

.title{
        font-size: 36px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 50px;
    text-align: center;

    background: linear-gradient(90deg,#ffd89b,#ffffff,#c9a16b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 0 10px rgba(255,255,255,0.4),
        0 0 20px rgba(255,215,150,0.4),
        0 0 40px rgba(255,215,150,0.3);

    position: relative;
    animation: glowTitle 3s ease-in-out infinite alternate;
}

/* Main container */

.container{
display:flex;
justify-content:center;
align-items:center;
gap:120px;
}

/* Lamp */

.lamp{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
cursor:pointer;
}

/* Lamp Shade */

.shade{
width:160px;
height:80px;
background:#ddd8c8;
border-radius:80px 80px 0 0;
}

/* Stand */

.stand{
width:10px;
height:120px;
background:#dddbc8;
}

/* Base */

.base{
width:60px;
height:15px;
background:#dddbc8;
border-radius:5px;
}

/* Chain */

.chain{
position:absolute;
right:29px;
top:80px;
display:flex;
flex-direction:column;
align-items:center;
}

.rope{
width:4px;
height:50px;
background:#c9a16b;
}

.ball{
width:14px;
height:14px;
background:#c9a16b;
border-radius:50%;
margin-top:3px;
}

/* Lamp light effect */

.lamp.on .shade{
box-shadow:0 0 120px 50px rgba(255,230,150,0.6);
}

/* Login box */
.login{
width:300px;
padding:30px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(15px);
border-radius:15px;
opacity:1;            /* always visible */
transform:scale(1);   /* normal size */
transition:0.5s;
color:#fff;
}

/* .login{
width:300px;
padding:30px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(15px);
border-radius:15px;
opacity:0;
transform:scale(0.8);
transition:0.5s;
color:#fff;
} */

/* .login.active{
opacity:1;
transform:scale(1);
} */

.login h2{
margin-bottom:20px;
font-weight:400;
text-align:center;
}

.login input{
width:100%;
padding:10px;
margin-bottom:15px;
border:none;
border-radius:8px;
background:rgba(255,255,255,0.1);
color:#fff;
}

.login button{
width:100%;
padding:10px;
border:none;
border-radius:8px;
background:#dddbc8;
cursor:pointer;
transition:0.3s;
}

.login button:hover{
background:#c9a16b;
}

.back{
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    position: absolute;
    top: 35px;
    left: 55px;
}

.back i:hover{
    color: #fff;
}
.login h2{
 font-size: 24px;
 font-weight: 500;
 text-align: center;
 margin-bottom: 25px;
 background: linear-gradient(90deg,#ffd89b,#fff,#c9a16b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:0 0 10px rgba(255,255,255,0.2),0 0 20px rgba(255,215,150,0.3),0 0 40px rgba(255,215,150,0.2);
position: relative;
}
@media (max-width: 768px) {
    .container{
        flex-direction: column;
    }
    .back{
        left: 15px;
    }
}