@font-face{
font-family:Lalezar;
src:url('../fonts/Lalezar-Regular.woff2');
}
body{
margin:0;padding:20px;
background:#140c1f;color:#fff;
font-family:Lalezar,tahoma,sans-serif;
font-size:18px;
display:flex;align-items:center;justify-content:center;
min-height:100vh;transition:.3s;
}

.username,
.ltr{
    font-family:tahoma,sans-serif;
}
.card{
width:min(720px,100%);
position:relative;z-index:2;
padding:28px;border-radius:32px;
background:rgba(255, 255, 255, 0.147);
backdrop-filter:blur(28px);
border:1px solid rgba(255, 255, 255, 0.208);
}
.theme-toggle{
position:absolute;top:15px;left:15px;
width:48px;height:48px;border-radius:50%;
border:none;cursor:pointer;
}
h1{font-family:Lalezar;text-align:center;font-size:48px;margin:0}
.subtitle{text-align:center;opacity:.85}

.blob{
position:fixed;border-radius:50%;
filter:blur(500px);
}
.a{
width:400px;height:400px;background:#ff4db8;
animation:float1 10s ease-in-out infinite;
}
.b{
width:500px;height:500px;background:#6d4dff;
animation:float2 10s ease-in-out infinite;
}

.btn{
display:flex;align-items:center;gap:14px;
padding:16px;border-radius:20px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.15);
backdrop-filter:blur(14px);
color:#fff;text-decoration:none;
transition:.25s;
}
.btn:hover{transform:translateY(-4px)}
.phone{justify-content:center;margin:15px 0}

.socials{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.meta{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.meta small{
margin-top:5px;
opacity:.7;
font-size:13px;
}

.username,.ltr{
direction:ltr;
unicode-bidi:isolate;
display:inline-block;
}

.route{margin-top:18px;justify-content:center}

.map{
width:100%;height:320px;border:0;
border-radius:20px;margin-top:18px;
}

.address{
margin-top:15px;
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.08);
text-align:center;
}
.footer{
margin-top:15px;
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.08);
text-align:center;
}

.light-mode{
background:#eef1f7;
color:#222;
}
.light-mode .card{
background:rgba(255,255,255,.8);
color:#222;
}
.light-mode .btn{
color:#222;
background:rgba(255,255,255,.75);
border:1px solid #d7ccff;
box-shadow:0 10px 30px rgba(124,58,237,.18),
inset 0 1px 0 rgba(255,255,255,.95);
}
.light-mode .theme-toggle{
background:#fff;color:#222;
}

@keyframes float1{
0%{transform:translate(-400px,-400px) scale(1)}
50%{transform:translate(140px,80px) scale(1.25)}
100%{transform:translate(-400px,-400px) scale(1)}
}
@keyframes float2{
0%{transform:translate(600px,600px) scale(1)}
50%{transform:translate(-140px,-80px) scale(.85)}
100%{transform:translate(600px,600px) scale(1)}
}

@media(max-width:640px){
.socials{grid-template-columns:1fr}
h1{font-size:40px}
}