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

html{
    scroll-behavior:smooth;
}

body{

    background:
    radial-gradient(circle at top,#0d2d68 0%,#050b18 45%,#000000 100%);

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

}

/* ===========================
   Animated Background
=========================== */

.background-animation{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:0;

    pointer-events:none;

}

.background-animation span{

    position:absolute;

    width:2px;

    height:220px;

    background:linear-gradient(
    transparent,
    #00c8ff,
    transparent);

    opacity:.45;

    animation:moveLine linear infinite;

    filter:blur(.4px);

}

.background-animation span:nth-child(1){left:4%;animation-duration:5s;}
.background-animation span:nth-child(2){left:13%;animation-duration:7s;}
.background-animation span:nth-child(3){left:23%;animation-duration:6s;}
.background-animation span:nth-child(4){left:34%;animation-duration:8s;}
.background-animation span:nth-child(5){left:45%;animation-duration:5.5s;}
.background-animation span:nth-child(6){left:57%;animation-duration:7.5s;}
.background-animation span:nth-child(7){left:68%;animation-duration:6.5s;}
.background-animation span:nth-child(8){left:79%;animation-duration:5.2s;}
.background-animation span:nth-child(9){left:90%;animation-duration:8s;}
.background-animation span:nth-child(10){left:97%;animation-duration:6.2s;}

@keyframes moveLine{

0%{

transform:translateY(-250px);

opacity:0;

}

15%{

opacity:.5;

}

100%{

transform:translateY(120vh);

opacity:0;

}

}

/* ===========================
Main Container
=========================== */

.container{

    position:relative;

    z-index:2;

    max-width:430px;

    width:100%;

    margin:auto;

    padding:18px 14px 40px;

}

/* ===========================
Banner
=========================== */

.banner{

    width:100%;

    aspect-ratio:600/314;

    overflow:hidden;

    border-radius:20px;

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

    box-shadow:

    0 0 25px rgba(0,170,255,.25),

    0 0 60px rgba(0,100,255,.12);

}

.banner img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* ===========================
Cards
=========================== */

.box{

    margin-top:20px;

    padding:18px;

    border-radius:18px;

    background:rgba(12,18,35,.70);

    backdrop-filter:blur(20px);

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

    box-shadow:

    0 10px 30px rgba(0,0,0,.45),

    inset 0 0 12px rgba(0,170,255,.08);

}

/* ===========================
Name
=========================== */

.box h2{

    color:#ffffff;

    text-align:center;

    font-size:21px;

    font-weight:bold;

    margin-bottom:16px;

    letter-spacing:1px;

}

/* ===========================
Register Button
=========================== */

.btn{

display:block;

width:100%;

text-align:center;

text-decoration:none;

padding:17px;

border-radius:14px;

font-size:18px;

font-weight:700;

color:#fff;

background:linear-gradient(
135deg,
#ff3fa4,
#d100ff,
#72ff7f);

background-size:300% 300%;

animation:gradientMove 4s linear infinite;

box-shadow:

0 12px 28px rgba(255,0,170,.35),

0 0 25px rgba(0,255,120,.20);

transition:.35s;

}

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

.btn:hover{

transform:translateY(-3px);

box-shadow:

0 15px 35px rgba(255,0,170,.50),

0 0 35px rgba(0,255,120,.35);

}

.btn:active{

transform:scale(.98);

}

/* ===========================
Desktop
=========================== */

@media(min-width:431px){

body{

display:flex;

justify-content:center;

background:#000;

}

.container{

max-width:430px;

}

}