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

body{
overflow:hidden;
background:
linear-gradient(
180deg,
#4da6ff,
#b8e7ff
);

font-family:Arial,sans-serif;
}


canvas{
width:100vw;
height:100vh;
display:block;
}


.logo{

position:absolute;
top:60px;
width:100%;
text-align:center;

font-size:52px;
font-weight:bold;

color:white;

z-index:5;


text-shadow:
0 0 10px white,
0 0 25px #00bfff,
0 0 60px #008cff;


animation:
float 3s infinite ease-in-out,
glow 2s infinite alternate;

}


.logo span{
color:#dff7ff;
}



.subtitle{

position:absolute;
top:130px;

width:100%;
text-align:center;

color:white;

font-size:22px;

text-shadow:
0 0 10px #008cff;

z-index:5;

}



@keyframes float{

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

}



@keyframes glow{

from{

text-shadow:
0 0 10px white,
0 0 20px #00bfff;

}

.visitor-box {
    color: white;
    font-size: 22px;
    padding: 15px;
    border-radius: 15px;
    background: rgba(0,0,0,0.5);
    text-align: center;
    box-shadow: 0 0 20px #00ffff;
    width: 250px;
    margin: auto;
}

to{

text-shadow:
0 0 20px white,
0 0 70px #008cff;

}

}


@media(max-width:600px){

.logo{
font-size:32px;
}

.subtitle{
font-size:16px;
}

}