@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@300;400&display=swap');

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

body{
    font-family:Inter,sans-serif;
    background:
    radial-gradient(circle at top,#1c3425 0%,#0b0f0d 45%,#000 100%);
    color:#dbe6d8;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    overflow:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle,#2d4f3722 0%,transparent 70%);
    animation:fog 18s infinite alternate ease-in-out;
}

@keyframes fog{
from{transform:scale(1);}
to{transform:scale(1.2) translateY(-25px);}
}

.container{
    width:430px;
    padding:50px;
    background:rgba(7,10,8,.75);
    border:1px solid rgba(77,119,88,.35);
    border-radius:18px;
    backdrop-filter:blur(12px);
    box-shadow:0 0 45px rgba(50,100,60,.35);
    text-align:center;
    position:relative;
    z-index:2;
}

h1{
    font-family:Cinzel,serif;
    letter-spacing:5px;
    margin-bottom:10px;
}

.subtitle{
    color:#76907c;
    font-style:italic;
    margin-bottom:30px;
}

input{
    width:100%;
    padding:15px;
    border-radius:10px;
    border:1px solid #35543d;
    background:#121614;
    color:white;
    font-size:15px;
}

input:focus{
    outline:none;
    border-color:#79b285;
    box-shadow:0 0 15px rgba(121,178,133,.3);
}

button{
    width:100%;
    margin-top:25px;
    padding:15px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
    letter-spacing:2px;
    background:linear-gradient(#35543d,#203126);
    color:white;
    transition:.3s;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:0 0 20px rgba(80,140,90,.4);
}

.error{
    color:#d66;
    margin-top:20px;
}

a{
    color:#8bc695;
    text-decoration:none;
}