body{
margin:0;
font-family:Arial;
background:black;
overflow:hidden;
color:white;
user-select:none;
}

.noselect{
user-select:none;
}

#galaxy{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

#intro{
position:fixed;
width:100%;
height:100%;
background:black;
z-index:50;
animation:introFade 1.5s forwards;
animation-delay:2s;
}

@keyframes introFade{
to{
opacity:0;
visibility:hidden;
}
}

.logo{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:90px;
color:red;
text-shadow:
0 0 20px red,
0 0 50px red,
0 0 100px red;
animation:logoMove 1.6s forwards;
animation-delay:2s;
}

@keyframes logoMove{
0%{
top:50%;
transform:translate(-50%,-50%) scale(1);
}
100%{
top:30px;
transform:translateX(-50%) scale(.9);
}
}

.glass{
background:rgba(20,20,20,.5);
backdrop-filter:blur(10px);
border:1px solid rgba(255,0,0,.6);
box-shadow:0 0 25px rgba(255,0,0,.4);
}

.center{
position:absolute;
top:60%;
left:50%;
transform:translate(-50%,-50%);
}

.connect{
font-size:30px;
padding:22px 65px;
background:transparent;
border:2px solid red;
border-radius:14px;
color:white;
box-shadow:0 0 20px red;
transition:.35s;
cursor:pointer;
}

.connect:hover{
transform:scale(1.1);
box-shadow:0 0 60px red;
}

.menu-btn{
background:transparent;
border:2px solid red;
padding:10px 20px;
border-radius:10px;
color:white;
box-shadow:0 0 10px red;
cursor:pointer;
transition:.3s;
}

.menu-btn:hover{
transform:scale(1.05);
box-shadow:0 0 30px red;
}

.top-right{position:absolute;top:20px;right:20px;}
.top-left{position:absolute;top:20px;left:20px;}
.bottom-left{position:absolute;bottom:20px;left:20px;}
.bottom-right{position:absolute;bottom:20px;right:20px;}

.menu{
position:absolute;
top:80px;
right:20px;
width:260px;
padding:20px;
border-radius:15px;
display:none;
animation:menuGlow 3s infinite alternate;
}

@keyframes menuGlow{
0%{box-shadow:0 0 15px rgba(255,0,0,0.3);}
50%{box-shadow:0 0 40px red;}
100%{box-shadow:0 0 15px rgba(255,0,0,0.3);}
}

.menu:hover{
transform:scale(1.03);
box-shadow:0 0 70px red;
}
.download{

width:100%;
margin-top:12px;
padding:12px;

background:linear-gradient(45deg,#111,#1a0000);

border:2px solid red;
color:white;

border-radius:10px;

cursor:pointer;

font-size:15px;
letter-spacing:1px;

transition:all .35s;

box-shadow:0 0 10px rgba(255,0,0,0.4);

position:relative;
overflow:hidden;

}

.download:hover{

transform:translateY(-3px) scale(1.05);

background:linear-gradient(45deg,#220000,#550000);

box-shadow:
0 0 15px red,
0 0 35px red,
0 0 60px rgba(255,0,0,0.6);

border-color:#ff3b3b;

}

.download::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:100%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.3),
transparent
);

transition:0.6s;

}

.download:hover::before{
left:120%;
}

#passwordBox{
border:2px dashed red;
padding:10px;
text-align:center;
cursor:pointer;
}

#notify{
position:fixed;
top:-80px;
left:50%;
transform:translateX(-50%);
background:#111;
padding:15px 30px;
border:2px solid red;
border-radius:10px;
box-shadow:0 0 20px red;
transition:.5s;
z-index:200;
}

#notify.show{
top:20px;
}

.musicMenu{
position:absolute;
bottom:80px;
right:20px;
width:220px;
padding:15px;
border-radius:12px;
display:none;
}

.musicHeader{
display:flex;
justify-content:space-between;
margin-bottom:10px;
}

#closeMusic{
cursor:pointer;
color:#ff4444;
}

.musicControls{
display:flex;
justify-content:space-around;
}

.musicControls button{
background:red;
border:none;
padding:8px 14px;
color:white;
border-radius:6px;
cursor:pointer;
}

.supportBox{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
}

#supportBtn{
background:transparent;
border:2px solid red;
padding:12px 35px;
border-radius:10px;
color:white;
font-size:18px;
box-shadow:0 0 20px red;
cursor:pointer;
transition:.3s;
}

#supportBtn:hover{
transform:scale(1.1);
box-shadow:0 0 50px red;
}

#supportOverlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:black;
display:flex;
align-items:center;
justify-content:center;
z-index:500;
transform:translateY(100%);
transition:1s;
}

#supportOverlay.show{
transform:translateY(0);
}

#supportText{
font-size:38px;
text-align:center;
max-width:700px;
text-shadow:
0 0 20px red,
0 0 60px red;
}
body{
margin:0;
font-family:Arial;
background:black;
overflow:hidden;
color:white;
user-select:none;
}

.noselect{
user-select:none;
}

#galaxy{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

#intro{
position:fixed;
width:100%;
height:100%;
background:black;
z-index:50;
animation:introFade 1.5s forwards;
animation-delay:2s;
}

@keyframes introFade{
to{
opacity:0;
visibility:hidden;
}
}

.logo{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:90px;
color:red;
text-shadow:
0 0 20px red,
0 0 50px red,
0 0 100px red;
animation:logoMove 1.6s forwards;
animation-delay:2s;
}

@keyframes logoMove{
0%{
top:50%;
transform:translate(-50%,-50%) scale(1);
}
100%{
top:30px;
transform:translateX(-50%) scale(.9);
}
}

.glass{
background:rgba(20,20,20,.5);
backdrop-filter:blur(10px);
border:1px solid rgba(255,0,0,.6);
box-shadow:0 0 25px rgba(255,0,0,.4);
}

.center{
position:absolute;
top:60%;
left:50%;
transform:translate(-50%,-50%);
}

.connect{
font-size:30px;
padding:22px 65px;
background:transparent;
border:2px solid red;
border-radius:14px;
color:white;
box-shadow:0 0 20px red;
transition:.35s;
cursor:pointer;
}

.connect:hover{
transform:scale(1.1);
box-shadow:0 0 60px red;
}

.menu-btn{
background:transparent;
border:2px solid red;
padding:10px 20px;
border-radius:10px;
color:white;
box-shadow:0 0 10px red;
cursor:pointer;
transition:.3s;
}

.menu-btn:hover{
transform:scale(1.05);
box-shadow:0 0 30px red;
}

.top-right{position:absolute;top:20px;right:20px;}
.top-left{position:absolute;top:20px;left:20px;}
.bottom-left{position:absolute;bottom:20px;left:20px;}
.bottom-right{position:absolute;bottom:20px;right:20px;}

.menu{
position:absolute;
top:80px;
right:20px;
width:260px;
padding:20px;
border-radius:15px;
display:none;
animation:menuGlow 3s infinite alternate;
}

@keyframes menuGlow{
0%{box-shadow:0 0 15px rgba(255,0,0,0.3);}
50%{box-shadow:0 0 40px red;}
100%{box-shadow:0 0 15px rgba(255,0,0,0.3);}
}

.menu:hover{
transform:scale(1.03);
box-shadow:0 0 70px red;
}

.download{
width:100%;
margin-top:10px;
padding:10px;
background:black;
border:2px solid red;
color:white;
border-radius:8px;
cursor:pointer;
}

#passwordBox{
border:2px dashed red;
padding:10px;
text-align:center;
cursor:pointer;
}

#notify{
position:fixed;
top:-80px;
left:50%;
transform:translateX(-50%);
background:#111;
padding:15px 30px;
border:2px solid red;
border-radius:10px;
box-shadow:0 0 20px red;
transition:.5s;
z-index:200;
}

#notify.show{
top:20px;
}

.musicMenu{
position:absolute;
bottom:80px;
right:20px;
width:220px;
padding:15px;
border-radius:12px;
display:none;
}

.musicHeader{
display:flex;
justify-content:space-between;
margin-bottom:10px;
}

#closeMusic{
cursor:pointer;
color:#ff4444;
}

.musicControls{
display:flex;
justify-content:space-around;
}

.musicControls button{
background:red;
border:none;
padding:8px 14px;
color:white;
border-radius:6px;
cursor:pointer;
}

.supportBox{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
}

#supportBtn{
background:transparent;
border:2px solid red;
padding:12px 35px;
border-radius:10px;
color:white;
font-size:18px;
box-shadow:0 0 20px red;
cursor:pointer;
transition:.3s;
}

#supportBtn:hover{
transform:scale(1.1);
box-shadow:0 0 50px red;
}

#supportOverlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:black;
display:flex;
align-items:center;
justify-content:center;
z-index:500;
transform:translateY(100%);
transition:1s;
}

#supportOverlay.show{
transform:translateY(0);
}

#supportText{
font-size:38px;
text-align:center;
max-width:700px;
text-shadow:
0 0 20px red,
0 0 60px red;
}