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

/* Background Video */

#background-video{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-1;
filter:brightness(50%);
}

/* Container */

.container{
text-align:center;
color:white;
padding:40px 20px;
max-width:600px;
margin:auto;
}

/* Heading */

h1{
font-size:36px;
margin-bottom:20px;
background:linear-gradient(45deg,#2196F3,#4CAF50);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-align: center;
}

/* Dropdown */

.options{
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;
}

select{
padding:10px;
border-radius:20px;
border:none;
font-size:15px;
width:180px;
background:rgba(255,255,255,0.8);
}

/* Date Time */

#datetime{
margin-top:15px;
padding:10px;
background:rgba(0,0,0,0.6);
border-radius:10px;
display:inline-block;
}

/* Prayer Box */

#prayer-times{
margin-top:20px;
background:rgba(0,0,0,0.6);
padding:20px;
border-radius:15px;
}

/* List */

#prayer-times ul{
list-style:none;
}

#prayer-times li{
margin:10px 0;
padding:10px;
background:rgba(255,255,255,0.2);
border-radius:10px;
transition:0.3s;
}

#prayer-times li:hover{
background:rgba(255,255,255,0.4);
}

/* Button */

button{
margin-top:15px;
padding:10px 20px;
border:none;
border-radius:20px;
background:linear-gradient(45deg,#2196F3,#4CAF50);
color:white;
cursor:pointer;
}

button:hover{
transform:scale(1.05);
}

/* Responsive */

@media(max-width:768px){

.options{
flex-direction:column;
align-items:center;
}

select{
width:90%;
}

h1{
font-size:28px;
}

#prayer-times li{
font-size:14px;
}

}