body{

margin:0;
font-family:"Segoe UI",sans-serif;

background:
radial-gradient(circle at top,#0b3d46,#020202);

color:white;

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

height:100vh;
overflow:hidden;

}


/* container */

.container{

text-align:center;

padding:40px;

border-radius:35px;

background:rgba(0,0,0,0.45);

backdrop-filter: blur(12px);

box-shadow:
0 0 40px rgba(0,255,200,0.08);

max-width:420px;

}


/* title */

.title{

font-size:24px;

letter-spacing:2px;

margin-bottom:20px;

color:#e6c86b;

}


/* doa */

.dua{

margin-bottom:30px;

}


/* arabic text */

.arabic{

font-family:"Amiri",serif;

font-size:28px;

line-height:1.8;

color:#ffd76a;

margin-bottom:10px;

text-shadow:

0 0 10px rgba(255,215,120,0.5);

}


/* latin */

.latin{

font-size:14px;

opacity:0.8;

}


/* counter */

#counter{

font-size:110px;

font-weight:bold;

color:#ffd76a;

text-shadow:

0 0 20px rgba(255,215,120,0.6),
0 0 40px rgba(255,215,120,0.2);

margin-bottom:30px;

}


/* tap button */

#tapBtn{

font-size:24px;

padding:22px 70px;

border:none;

border-radius:60px;

background:linear-gradient(
45deg,
#cfa93c,
#f7d774
);

color:#1a1a1a;

font-weight:bold;

box-shadow:
0 10px 35px rgba(255,215,100,0.35);

transition:all 0.15s ease;

}

#tapBtn:active{

transform:scale(0.96);

}


/* reset */

.controls{

margin-top:25px;

}

#resetBtn{

background:none;

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

padding:10px 26px;

color:white;

border-radius:20px;

font-size:14px;

opacity:0.8;

}


/* glow decoration */

body::before{

content:"";

position:absolute;

top:-200px;

left:-200px;

width:600px;

height:600px;

background:radial-gradient(
circle,
rgba(0,255,200,0.08),
transparent
);

border-radius:50%;

}

body::after{

content:"";

position:absolute;

bottom:-200px;

right:-200px;

width:600px;

height:600px;

background:radial-gradient(
circle,
rgba(255,215,100,0.08),
transparent
);

border-radius:50%;

}