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

body{
font-family:sans-serif;
background:#0f172a;
color:white;
}

.container{
padding:16px;
display:flex;
flex-direction:column;
gap:16px;
}

.header{
display:flex;
align-items:center;
gap:12px;
}

.header img{
width:70px;
height:70px;
object-fit:contain;
}

.clock-card,
.prayer-card,
.announcement-card{

background:#1e293b;
padding:16px;
border-radius:16px;

}

#clock{
font-size:3rem;
font-weight:700;
text-align:center;
}

#date,
#hijri{
text-align:center;
margin-top:6px;
}

.prayer-item{
display:flex;
justify-content:space-between;
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.1);
}

.marquee{
overflow:hidden;
white-space:nowrap;
}

.marquee span{
display:inline-block;
padding-left:100%;
animation:marquee 20s linear infinite;
}

@keyframes marquee{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-100%);
}
}

.next-prayer-card{
background:#1e293b;
padding:16px;
border-radius:16px;
text-align:center;
}

#nextPrayerName{
font-size:2rem;
font-weight:bold;
}

#nextPrayerTime{
font-size:1.5rem;
margin-top:8px;
}

#countdown{
font-size:2rem;
color:#22c55e;
margin-top:10px;
}

@media (min-width: 1024px){

.container{
    height:100vh;
    display:grid;

    grid-template-columns:
    35% 65%;

    grid-template-rows:
    auto 1fr auto;

    gap:20px;
}

.header{
    grid-column:1 / 2;
}

.clock-card{
    grid-column:1 / 2;
}

.prayer-card{
    grid-column:1 / 2;
}

.wallpaper-card{
    grid-column:2 / 3;
    grid-row:1 / span 3;
}

}


.wallpaper-card{
overflow:hidden;
border-radius:20px;
}

.wallpaper-img{
width:100%;
height:100%;
object-fit:cover;
}

.active-prayer{

background:#22c55e;

color:black;

font-weight:bold;

padding:8px;

border-radius:8px;

}

#locationName{

font-size:14px;

opacity:.8;

margin-top:5px;

}