*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
    background:linear-gradient(-45deg,#0f172a,#1e3a8a,#7c3aed,#0f766e);
    background-size:400% 400%;
    animation:bgAnimation 12s ease infinite;
    overflow-x:hidden;
}

/* Floating Background Circles */

body::before,
body::after{
    content:"";
    position:fixed;
    width:350px;
    height:350px;
    border-radius:50%;
    filter:blur(120px);
    z-index:-1;
}

body::before{
    top:-100px;
    left:-100px;
    background:#00e5ff;
}

body::after{
    bottom:-100px;
    right:-100px;
    background:#ff4ecd;
}

.cover{
    width:95%;
    max-width:1000px;
    padding:50px;
    border-radius:30px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(25px);
    border:1px solid rgba(255,255,255,.25);
    box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    inset 0 1px 1px rgba(255,255,255,.25);
    text-align:center;
    color:white;
    animation:fadeUp 1s ease;
    transition:.4s;
}

.cover:hover{
    transform:translateY(-8px);
    box-shadow:
    0 30px 70px rgba(0,0,0,.45),
    0 0 30px rgba(0,255,255,.3);
}

.profile{
    width:200px;
    height:200px;
    border-radius:50%;
    object-fit:cover;
    border:6px solid rgba(255,255,255,.8);
    box-shadow:
    0 0 25px #00e5ff,
    0 0 45px #00e5ff;
    transition:.5s;
    animation:float 4s ease-in-out infinite;
}

.profile:hover{
    transform:scale(1.08) rotate(5deg);
    box-shadow:
    0 0 40px #00ffff,
    0 0 70px #ff4ecd;
}

h1{
    margin-top:25px;
    font-size:42px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    background:linear-gradient(90deg,#ffffff,#00ffff,#ff4ecd);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

h2{
    margin-top:15px;
    color:#ddd;
    font-weight:400;
}

p{
    margin-top:20px;
    line-height:1.8;
    color:#f2f2f2;
}

table{
    width:100%;
    margin-top:35px;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

table th{
    background:linear-gradient(45deg,#00c6ff,#0072ff);
    color:white;
    padding:18px;
    font-size:18px;
}

table td{
    padding:18px;
    background:rgba(255,255,255,.15);
    color:white;
    border-bottom:1px solid rgba(255,255,255,.12);
    transition:.3s;
}

table tr:hover td{
    background:rgba(255,255,255,.28);
    transform:scale(1.01);
}

ul{
    margin-top:35px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    list-style:none;
}

ul li{
    background:rgba(255,255,255,.12);
    padding:18px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,.15);
    transition:.4s;
    font-size:18px;
    font-weight:500;
}

ul li:hover{
    transform:translateY(-8px);
    background:linear-gradient(45deg,#00c6ff,#7c3aed);
    box-shadow:0 12px 25px rgba(0,0,0,.3);
}

.btn{
    display:inline-block;
    margin-top:40px;
    padding:16px 45px;
    border-radius:50px;
    text-decoration:none;
    color:white;
    font-size:18px;
    font-weight:600;
    background:linear-gradient(45deg,#ff512f,#dd2476,#7c3aed);
    background-size:250% 250%;
    animation:gradientMove 5s linear infinite;
    box-shadow:
    0 10px 25px rgba(0,0,0,.3);
    transition:.4s;
}

.btn:hover{
    transform:translateY(-6px) scale(1.05);
    box-shadow:
    0 15px 35px rgba(0,0,0,.45),
    0 0 30px rgba(255,0,150,.5);
}

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes gradientMove{

    0%{
        background-position:0% 50%;
    }

    100%{
        background-position:100% 50%;
    }

}

@keyframes bgAnimation{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

@media(max-width:768px){

.cover{
    padding:30px;
}

.profile{
    width:150px;
    height:150px;
}

h1{
    font-size:32px;
}

table{
    font-size:14px;
}

.btn{
    width:100%;
}

}