/* =======================================
AJ FIRE SAFETY LOGIN SYSTEM
Premium Fire Theme CSS
======================================= */

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

html,
body{
width:100%;
height:100%;
overflow:hidden;
font-family:'Segoe UI',sans-serif;
background:#050505;
}

/* Canvas */

#fireCanvas{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}

/* Dark Overlay */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;

background:
linear-gradient(
180deg,
rgba(0,0,0,.35),
rgba(0,0,0,.75)
);

}

/* Center Layout */

.login-container{

position:relative;
z-index:100;

width:100%;
height:100vh;

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

padding:20px;

}

/* Login Card */

.login-card{

width:420px;
max-width:100%;

padding:40px;

border-radius:25px;

background:
rgba(255,255,255,.08);

backdrop-filter:
blur(15px);

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

border:
1px solid rgba(255,255,255,.12);

box-shadow:

0 0 30px rgba(255,120,0,.25),

0 0 60px rgba(255,60,0,.15),

inset 0 0 30px rgba(255,255,255,.05);

animation:
cardGlow 3s infinite alternate;

}

/* Glow */

@keyframes cardGlow{

from{

box-shadow:
0 0 25px rgba(255,120,0,.2);

}

to{

box-shadow:

0 0 50px rgba(255,120,0,.45),

0 0 90px rgba(255,60,0,.25);

}

}

/* Logo Area */

.logo-area{

text-align:center;
margin-bottom:25px;

}

.logo-area h1{

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

color:#fff;

text-shadow:

0 0 15px #ff5e00,

0 0 30px #ff7b00;

}

.logo-area p{

margin-top:10px;

color:#ddd;

font-size:14px;

letter-spacing:1px;

}

/* Form */

.input-group{

margin-bottom:18px;

}

.input-group label{

display:block;

margin-bottom:8px;

font-size:14px;

font-weight:600;

color:#fff;

}

.input-group input{

width:100%;

padding:14px 16px;

border-radius:10px;

outline:none;

border:1px solid rgba(255,255,255,.15);

background:
rgba(255,255,255,.08);

color:#fff;

font-size:15px;

transition:.3s;

}

.input-group input::placeholder{

color:#bbb;

}

.input-group input:focus{

border-color:#ff7300;

box-shadow:

0 0 15px rgba(255,115,0,.45);

}

/* Remember */

.remember{

display:flex;
align-items:center;
gap:10px;

color:#ddd;

font-size:14px;

margin-bottom:20px;

}

/* Button */

.login-btn{

width:100%;

padding:15px;

border:none;

cursor:pointer;

font-size:16px;

font-weight:700;

border-radius:12px;

color:#fff;

background:
linear-gradient(
45deg,
#ff3c00,
#ff7b00,
#ffb300
);

transition:.35s;

}

.login-btn:hover{

transform:
translateY(-2px);

box-shadow:

0 0 25px rgba(255,120,0,.6),

0 0 50px rgba(255,80,0,.35);

}

/* Message */

#message{

margin-top:18px;

text-align:center;

font-weight:700;

color:#fff;

}

/* Fire Reflection */

.login-card::before{

content:"";

position:absolute;

top:-2px;
left:-2px;
right:-2px;
bottom:-2px;

border-radius:25px;

background:
linear-gradient(
45deg,
#ff3300,
#ff6600,
#ff9900,
#ff3300
);

z-index:-1;

filter:blur(20px);

opacity:.35;

}

/* Floating Ember */

.login-card::after{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

background-image:

radial-gradient(
circle,
rgba(255,180,0,.25) 1px,
transparent 1px
);

background-size:25px 25px;

animation:
embers 8s linear infinite;

opacity:.3;

}

@keyframes embers{

from{
transform:translateY(0);
}

to{
transform:translateY(-100px);
}

}

/* Mobile */

@media(max-width:768px){

.login-card{

padding:30px;

width:95%;

}

.logo-area h1{

font-size:26px;

}

}