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

body{
    font-family:'Orbitron', sans-serif;
    height:100vh;
    overflow:hidden;

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

    background-image:url("https://images.unsplash.com/photo-1462331940025-496dfbfc7564");
    background-size:cover;
    background-position:center;

    color:white;
}

.overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(15,0,40,.75),
        rgba(10,0,30,.85)
    );
}

main{
    position:relative;
    z-index:2;

    text-align:center;

    padding:40px;
}

.logo{
    width:320px;
    margin-bottom:30px;

    filter:
        drop-shadow(0 0 20px #7c3aed);
}

h1{
    font-size:48px;
    margin-bottom:20px;

    text-shadow:
        0 0 10px #9333ea;
}

p{
    color:#d8b4fe;
    line-height:1.7;
    margin-bottom:40px;
}

.box{
    display:inline-block;

    padding:18px 40px;

    border-radius:18px;

    border:2px solid #9333ea;

    background:rgba(88,28,135,.25);

    box-shadow:
        0 0 25px rgba(147,51,234,.45);

    animation:pulse 2s infinite;
}

@keyframes pulse{

    50%{
        transform:scale(1.05);
    }

}

.dots{
    margin-top:30px;
}

.dots span{

    width:14px;
    height:14px;

    border-radius:50%;

    background:#a855f7;

    display:inline-block;

    margin:0 5px;

    animation:blink 1.5s infinite;
}

.dots span:nth-child(2){
    animation-delay:.2s;
}

.dots span:nth-child(3){
    animation-delay:.4s;
}

@keyframes blink{

    50%{
        opacity:.2;
    }

}