@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;
}

html,
body{
    width:100%;
    min-height:100vh;
}

body{
    font-family:Poppins,sans-serif;
    background:#050816;
    overflow:hidden;
    position:relative;
}

.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:-2;
}

.background::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(white 1px,transparent 1px);
    background-size:45px 45px;
    opacity:.18;
}

.container{
    width:100%;
    min-height:100vh;

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

    padding:20px;
}

.card{
    width:430px;
    max-width:100%;
}


/* نجوم */

.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 */



/* يخلي كل العناصر تحسب الحجم صح */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* الصور متكبرش عن حجمها */
img {
    max-width: 100%;
    height: auto;
}

/* الحاوية الرئيسية */
.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* للشاشات الصغيرة */
@media (max-width: 768px) {

    .container {
        width: 95%;
    }

    h1 {
        font-size: 28px;
    }

    p {
        font-size: 15px;
    }

    .menu {
        flex-direction: column;
    }

    .card {
        width: 100%;
    }
}


/* للموبايلات الصغيرة */
@media (max-width: 480px) {

    h1 {
        font-size: 22px;
    }

    button {
        width: 100%;
    }
}