@font-face {
    font-family: 'Vazir';
    font-display: swap;
    src: url(/static/fonts/vazir.woff);
}

@font-face {
    font-family: 'Material';
    font-display: swap;
    src: url(/static/fonts/material.woff);
}

*{

margin:0;
padding:0;
box-sizing:border-box;
font-family: 'Vazir', sans-serif;

}

body{

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

height:100vh;

/* background:#0f172a; */
background: url(/static/images/1.jpg) center no-repeat;
background-size: cover;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

}

.background{

position:absolute;
width:100%;
height:100%;

overflow:hidden;

}

.blob{

position:absolute;

border-radius:50%;

filter:blur(100px);

animation:move 10s infinite alternate;

}

.one{

width:450px;
height:450px;

/* background:#4F46E5; */

top:-100px;
left:-100px;

}

.two{

width:350px;
height:350px;

/* background:#06B6D4; */

right:-100px;
bottom:-100px;

}

@keyframes move{

to{

transform:translateY(60px) translateX(40px);

}

}

.container{

z-index:2;

}

.card{

width:430px;

backdrop-filter:blur(10px);

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

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

border-radius:24px;

padding:45px;

box-shadow:

0 20px 60px rgba(0,0,0,.4);

}

.card h2{

color:#f9dbc3;

margin-bottom:10px;

font-size:30px;

}

.card p{

color:#ebd4c1;

margin-bottom:35px;

}

.input-group{

margin-bottom:20px;

}

input{

width:100%;

padding:17px;

border:none;

border-radius:14px;

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

color:#f9dbc3;

font-size:16px;

outline:none;

transition:.3s;

}

input:focus{

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

box-shadow:0 0 0 2px #f9dbc3;

}

input::placeholder {
    color: #ebd4c1;
}

button{

width:100%;

padding:17px;

border:none;

border-radius:14px;

cursor:pointer;

font-size:17px;

font-weight:700;

background:linear-gradient(135deg,#f9dbc3,#f9dbc3);

color:#7b9c7e;

transition:.3s;

}

button:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(235, 212, 193, 0.35);

}

#error{

height:30px;

color:#ff8080;

font-size:14px;

display:flex;
align-items:center;

}

@media(max-width:480px){

.card{

width:92vw;

padding:30px;

}

}