*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Times New Roman", Times, serif;
}

/* ===== BACKGROUND ===== */

body{
    min-height:100vh;
    color:white;
    overflow-x:hidden;

    background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.8) 1px, transparent 2px),
    radial-gradient(circle at 70% 40%, rgba(255,255,255,0.7) 1px, transparent 2px),
    radial-gradient(circle at 40% 70%, rgba(255,255,255,0.6) 1px, transparent 2px),
    radial-gradient(circle at 90% 20%, rgba(255,255,255,0.8) 1px, transparent 2px),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,0.7) 1px, transparent 2px),
    linear-gradient(180deg,#0b0f2a,#020617);

    animation: moveStars 120s linear infinite;
}

@keyframes moveStars{
    from{
        background-position:0 0,0 0,0 0,0 0,0 0,0 0;
    }
    to{
        background-position:
        1000px 2000px,
        -1000px 1500px,
        800px -1200px,
        -1200px 1000px,
        1500px -800px,
        0 0;
    }
}

/* ===== HEADER ===== */

header{
    position:relative;
    padding:25px 0;
    text-align:center;

    background:linear-gradient(90deg,#7c3aed,#2563eb);
    box-shadow:0 5px 25px rgba(0,0,0,0.5);
}

/* ===== AVATAR ===== */

.avatar{
    position:absolute;
    right:30px;
    top:15px;

    width:50px;
    height:50px;

    border-radius:50%;
    border:3px solid #6366f1;

    background:url("https://i.pinimg.com/474x/6a/44/f0/6a44f0e35b10e6ed063eeebf7ed844f9.jpg?nii=t") center/cover;

    transition:transform .25s;
}

.avatar:hover{
    transform:scale(1.1);
}

/* ===== CONTAINER ===== */

.container{
    width:90%;
    max-width:1200px;
    margin:60px auto;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:40px;
}

/* ===== CARD ===== */

.card{
    background:rgba(255,255,255,0.07);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.15);

    height:200px;
    border-radius:18px;

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

    font-size:20px;
    font-weight:bold;
    letter-spacing:1px;

    cursor:pointer;

    transition:transform .25s ease, box-shadow .25s ease, background .25s;
}

.card:hover{
    transform:translateY(-8px) scale(1.04);
    background:rgba(124,58,237,0.25);
    box-shadow:0 15px 40px rgba(124,58,237,0.5);
}