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

body{
    background:#000;
    overflow:hidden;
}

#startPage{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:
    radial-gradient(circle at top,#4b006e 0%,#190022 45%,#000 100%);
    overflow:hidden;
}

#startPage::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    background:radial-gradient(circle,#ff00cc55,transparent 70%);
    filter:blur(60px);
    animation:pulse 5s ease-in-out infinite;
}

h2{
    position:relative;
    color:white;
    font-size:34px;
    margin-bottom:30px;
    text-align:center;
    text-shadow:
        0 0 10px #ff00ff,
        0 0 30px #ff00ff,
        0 0 60px #ff00ff;
}

input{
    position:relative;
    width:300px;
    max-width:90%;
    padding:15px;
    border-radius:18px;
    border:2px solid #ff3dbf;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
    color:white;
    text-align:center;
    font-size:18px;
    outline:none;
    transition:.3s;
}

input::placeholder{
    color:#ddd;
}

input:focus{
    box-shadow:0 0 25px #ff3dbf;
}

button{
    position:relative;
    margin-top:25px;
    width:180px;
    padding:14px;
    border:none;
    border-radius:30px;
    background:linear-gradient(45deg,#ff1493,#b400ff);
    color:white;
    font-size:20px;
    cursor:pointer;
    transition:.3s;
    box-shadow:
        0 0 15px #ff1493,
        0 0 40px #b400ff;
}

button:hover{
    transform:scale(1.05);
}

@keyframes pulse{
    0%,100%{
        transform:scale(1);
        opacity:.6;
    }
    50%{
        transform:scale(1.2);
        opacity:1;
    }
}

h2{
    color:white;
    margin-bottom:20px;
}

input{

    width:250px;
    padding:12px;
    border:none;
    border-radius:12px;
    text-align:center;
    margin-bottom:20px;
    font-size:18px;

}

button{

    padding:12px 35px;
    border:none;
    border-radius:12px;
    background:#ff1493;
    color:white;
    cursor:pointer;
    font-size:18px;

}

button:hover{

    background:#ff0088;

}

#nameShow{

    position:fixed;
    top:25px;
    width:100%;
    text-align:center;
    color:white;
    font-size:42px;
    font-weight:bold;
    text-shadow:
        0 0 10px #ff00ff,
        0 0 20px #ff00ff,
        0 0 40px #ff00ff;

}

.word{

    position:absolute;
    color:#ff77ff;
    white-space:nowrap;
    text-shadow:
        0 0 8px #ff00ff,
        0 0 15px #ff00ff,
        0 0 30px #ff00ff;

    animation:move linear forwards;

}

@keyframes move{

    from{

        transform:translateY(100vh);
        opacity:0;

    }

    20%{

        opacity:1;

    }

    to{

        transform:translateY(-120vh);
        opacity:0;

    }

}