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

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

body{

    font-family:Poppins,sans-serif;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:#050816;

}

/* الخلفية */

.background{

    position:fixed;

    inset:0;

    background:
    radial-gradient(circle at top left,#2563eb55,transparent 35%),
    radial-gradient(circle at bottom right,#9333ea55,transparent 35%),
    linear-gradient(135deg,#050816,#0B1026);

    z-index:-3;

}

/* نجوم */

.background::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(white 1px,transparent 1px);

    background-size:45px 45px;

    opacity:.18;

    animation:stars 40s linear infinite;

}

/* الكارت */

.card{

    width:430px;

    padding:45px;

    border-radius:25px;

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

    backdrop-filter:blur(20px);

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

    box-shadow:
    0 0 60px rgba(0,212,255,.15);

}

.card h1{

    text-align:center;

    font-size:38px;

    color:#fff;

    font-family:Orbitron,sans-serif;

}

.card p{

    text-align:center;

    color:#bcbcbc;

    margin-top:12px;

    margin-bottom:35px;

}

/* Inputs */

.input-box{

    display:flex;

    align-items:center;

    gap:12px;

    background:#11182d;

    padding:16px;

    border-radius:15px;

    margin-bottom:18px;

    border:1px solid transparent;

    transition:.35s;

}

.input-box:hover{

    border-color:#00d4ff;

    box-shadow:0 0 20px rgba(0,212,255,.25);

}

.input-box i{

    color:#00d4ff;

}

.input-box input{

    width:100%;

    background:none;

    border:none;

    outline:none;

    color:white;

    font-size:15px;

}

/* Create Account */

button{

    width:100%;

    border:none;

    cursor:pointer;

    padding:16px;

    border-radius:15px;

    font-size:16px;

    font-weight:bold;

    transition:.35s;

}

form button{

    margin-top:10px;

    color:white;

    background:linear-gradient(135deg,#2563eb,#9333ea);

}

form button:hover{

    transform:translateY(-3px);

    box-shadow:0 0 30px #2563eb;

}

/* الخط */

.line{

    margin:30px 0;

    display:flex;

    align-items:center;

}

.line::before,
.line::after{

    content:"";

    flex:1;

    height:1px;

    background:#444;

}

.line span{

    margin:0 12px;

    color:#aaa;

}

/* Google */

.google{

    background:white;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-bottom:15px;

}

.google:hover{

    transform:scale(1.03);

}

/* Apple */

.apple{

    background:#111;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}

.apple:hover{

    background:#222;

}

/* Login */

.login{

    margin-top:30px;

    text-align:center;

}

.login a{

    color:#00d4ff;

    text-decoration:none;

}

.login a:hover{

    text-decoration:underline;

}

/* Animation */

@keyframes stars{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-200px);

    }

}