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

body{
background:
linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
url("https://images.unsplash.com/photo-1570030534989-31a8e6812fc9?q=80&w=1170&auto=format&fit=crop");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:scroll;

color:white;
min-height:100vh;
text-align:center;
overflow-x:hidden;
}

/* ================= LOADING SCREEN ================= */

#loader{
position:fixed;
inset:0;
background:#000;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
}

.loaderBox{
padding:40px 60px;
border-radius:25px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(20px);
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
animation:pulse 2s infinite;
}

.spinner{
width:70px;
height:70px;
border-radius:50%;
border:5px solid rgba(255,255,255,0.2);
border-top:5px solid #6a11cb;
animation:spin 1s linear infinite;
}

.loadingText{
font-size:16px;
opacity:0.8;
}

@keyframes spin{
100%{transform:rotate(360deg);}
}

@keyframes pulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.05);}
}

/* ================= LAYOUT ================= */

.container{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
}

/* ================= LOGO ================= */

.logo{
width:110px;
height:110px;
border-radius:50%;
margin-bottom:25px;
background:linear-gradient(45deg,#6a11cb,#2575fc);
display:flex;
justify-content:center;
align-items:center;
font-size:42px;
font-weight:bold;
box-shadow:0 0 25px rgba(40,120,255,0.4);
animation:float 3s infinite;
}

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

/* ================= NAME ================= */

.title-name{
font-size:48px;
font-weight:800;
padding:12px 28px;
border-radius:18px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,0.2);
box-shadow:0 0 30px rgba(120,170,255,0.25);
}

.persian-name{
font-size:22px;
margin-top:12px;
padding:8px 20px;
border-radius:14px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.15);
opacity:0.9;
}

/* ================= CARD ================= */

.card{
margin-top:25px;
padding:20px;
border-radius:25px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(15px);
width:100%;
max-width:500px;
}

.btn{
padding:14px 22px;
margin:8px;
border:none;
border-radius:15px;
cursor:pointer;
font-weight:bold;
color:white;
background:linear-gradient(45deg,#6a11cb,#2575fc);
transition:.3s;

display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
}

.btn:hover{transform:scale(1.05);}

.instagram{
background:linear-gradient(45deg,#feda75,#d62976,#962fbf);
}

.github{
background:linear-gradient(45deg,#24292e,#57606a);
}

.github img{
width:18px;
height:18px;
}

.Weblog{
background:linear-gradient(45deg,#0d2dcc,#e706ef);
}
/* ================= LOGIN / MUSIC ================= */

.musicBox{
display:none;
margin-top:15px;
}

input{
padding:12px;
width:90%;
max-width:250px;
border:none;
border-radius:12px;
outline:none;
}

/* ================= MUSIC ================= */

.musicPlayer{
margin-top:20px;
padding:20px;
border-radius:20px;
background:rgba(255,255,255,0.07);
backdrop-filter:blur(10px);
}

.songTitle{
margin-bottom:10px;
font-size:16px;
opacity:0.9;
}

.musicButtons{
display:flex;
justify-content:center;
gap:10px;
margin-top:15px;
}

.musicBtn{
width:50px;
height:50px;
border:none;
border-radius:50%;
cursor:pointer;
color:white;
background:linear-gradient(45deg,#6a11cb,#2575fc);
}

/* ================= MOBILE ================= */

@media (max-width:768px){
.title-name{font-size:32px;}
.persian-name{font-size:16px;}
.btn{width:100%;}
.card{width:95%;}
}

.coolTitle{

margin-top:15px;

display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:12px;

}

.coolTitle span{

padding:10px 18px;

border-radius:30px;

background:rgba(255,255,255,0.08);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,0.15);

box-shadow:
0 0 20px rgba(106,17,203,.3);

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

transition:.35s;

cursor:default;

}

.coolTitle span:hover{

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

box-shadow:
0 0 30px rgba(37,117,252,.6);

background:
linear-gradient(
45deg,
rgba(106,17,203,.35),
rgba(37,117,252,.35)
);

}

html{
scroll-behavior:smooth;
}

img{
max-width:100%;
height:auto;
}

*{
-webkit-tap-highlight-color:transparent;
}

button,
a{
touch-action:manipulation;
}

.container{
width:100%;
max-width:1200px;
margin:auto;
padding:20px;
}

.card{
width:min(500px,95%);
}

@media (max-width:768px){

.logo{
width:110px;
height:110px;
margin-bottom:25px;
border-radius:50%;
overflow:hidden;

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

background:linear-gradient(45deg,#6a11cb,#2575fc);

box-shadow:
0 0 25px rgba(40,120,255,.45);

animation:float 3s infinite;
border:3px solid rgba(255,255,255,.18);

flex-shrink:0;
}

.logo img{

width:100%;
height:100%;

object-fit:cover;

display:block;

transition:.35s;

}

.logo:hover img{

transform:scale(1.08);

}

.title-name{
font-size:32px;
}

.persian-name{
font-size:17px;
}

.card{
padding:18px;
}

.btn{
width:100%;
margin:8px 0;
}

.musicButtons{
flex-wrap:wrap;
}

}

body{
display:flex;
flex-direction:column;
min-height:100vh;
}

#mainPage{
flex:1;
display:flex;
flex-direction:column;
}

.container{
flex:1;
}

footer{

margin-top:auto;

width:100%;

padding:20px;

text-align:center;

font-size:15px;

color:rgba(255,255,255,.75);

background:rgba(255,255,255,.05);

backdrop-filter:blur(15px);

border-top:1px solid rgba(255,255,255,.12);

box-shadow:0 -10px 30px rgba(0,0,0,.25);

}

footer span{

font-weight:bold;

background:linear-gradient(45deg,#6a11cb,#2575fc);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

background-clip:text;

}

@media(max-width:768px){

footer{
font-size:13px;
padding:16px;
}

}

/* ================= FOOTER ================= */

body{
display:flex;
flex-direction:column;
min-height:100vh;
}

#mainPage{
flex:1;
display:flex;
flex-direction:column;
}

.container{
flex:1;
}

footer{

margin-top:auto;

width:100%;

padding:20px;

text-align:center;

font-size:15px;

color:rgba(255,255,255,.75);

background:rgba(255,255,255,.05);

backdrop-filter:blur(15px);

border-top:1px solid rgba(255,255,255,.12);

box-shadow:0 -10px 30px rgba(0,0,0,.25);

letter-spacing:.5px;

}

footer span{

font-weight:bold;

background:linear-gradient(45deg,#6a11cb,#2575fc);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

}

@media (max-width:768px){

footer{

padding:16px;

font-size:13px;

}

}