:root {
    --primary-color: #4A4E69;
    --secondary-color: #9A8C98;
    --accent-color: #C9ADA7;
    --background-color: #F2E9E4;
    --text-color: #22223B;
}
  
@font-face {
    font-family: 'FontMasjid';
    src: url('fonts/Noteworthy-Bold.ttf') format('truetype'); /* Even older browsers */
    font-weight: bold;
    font-style: normal;
}

body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    color: white;
    background: black;
    overflow: hidden;
}

.top-section {
    /* align-items: center; */
    /* background-color: #172f64; */
    padding: 0px 0px;
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    opacity: 1;
    display: flex; 
    align-items: flex-start;
    z-index: 3;
}

.date-info {
    flex-grow: 1;
    display: flex; 
    align-items: center;
    /* background-color: rgb(66, 65, 65); */
    padding: 10px 20px;
    font-size: 1.51vw;
    z-index: 2;
}
.space {
    flex-grow: 1;
}
.date-and-clock {
    display: flex; 
    align-items: center;
    /* align-items: flex-end; */
    text-align: center;
    margin-right: 20px;
    color: white  !important;
    font-weight: bolder;
    padding: 0px 0px;
    border-radius: 25px;
    /* Fallback for non-WebKit browsers */
    /* text-shadow: 
        -0.1px -0.1px 0px white,
        0.1px -0.1px 0px white,
        -0.1px 0.1px 0px white,
        0.1px 0.1px 0px white; */
    
    /* For WebKit browsers */
    /* -webkit-text-stroke: 0.1px white; */
    /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); */
}
.date {
    height: max-content;
    margin: 0px 0px;
    padding: 0.65em 0.5em;
    background-color: #2C3E50;
    border-top-left-radius: 0.6em;
    border-bottom-left-radius: 0.6em;
}
.date p {
    margin: 0px 0px;
}
.clock {
    height: max-content;
    font-size: 2.2vw;
    line-height: 1.4em;
    font-weight: bold;
    align-items: center;
    text-align: right;
    background-color: #ffffff;
    padding: 0.5em 0.5em;
    z-index: 2;
    /* border-radius: 25px; */
    border-top-right-radius: 0.6em;
    border-bottom-right-radius: 0.6em;
    color: #000000; /*rgb(250,250,250) !important;*/
}
.masjid-logo {
    width: 1em;
    height: 1em;
    /* background: url('logo.png') no-repeat center; */
    /* background-color: red; */
    /* -webkit-mask-image: url('logo.png'); */
    /* mask-image: url('logo.png'); */
}
.masjid-info {
    display: flex; 
    margin-right: 0px;
    text-align: left;
    width: 29%;
    background-color: #F7782C;
    padding: 0.5em 2em 0.8em 2em;
    border-bottom-right-radius: 7em;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.masjid-info h1 {
    margin: 0px 0px 0.1em 0px;
    padding: 0;
    font-size: 2.5vw;
    line-height: 1.15em;
    font-family: 'FontMasjid', arial;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.02em;
    /* Fallback for non-WebKit browsers */
    /* text-shadow: 
        -0.5px -0.5px 0px white,
        0.5px -0.5px 0px white,
        -0.5px 0.5px 0px white,
        0.5px 0.5px 0px white; */
    
    /* For WebKit browsers */
    /* -webkit-text-stroke: 0.5px white; */
    /* text-shadow: 2px 2px 5px rgba(255, 255, 255, 1); */
}

.masjid-info p {
    margin: 0px 0px;
    font-size: 1.2vw;
    line-height: 1.35em;
    color: #ffffff !important;
}

#background {
    width: 100vw;
    height: 100vh;
    position: relative;
    margin: auto;
    background-color: black;
    overflow: hidden;
}

/* Blurred background */
.blurred-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(20px); /* Apply blur effect */
    object-fit: cover;
    z-index: 0; /* Behind the main image */
}

/* Main image that is centered */
.main-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 1; /* In front of the blurred background */
    width: 100%;
    height: 100%;
}

#background img, #background video {
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease-in-out; /* Smooth fade transition */
}

.active {
    opacity: 1 !important; /* Fully visible */
}

#countdown {
    position: absolute;
    top: 35%;
    left: 30%;
    font-size: 10vw;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 0.6em;
    z-index: 4;
    padding: 0.4em;
    text-align: center;
    font-weight: bold;
    display: none;
}

.prayer-times {
    background-color: rgba(200, 225, 255, 0.5);
    padding: 2em 2em;
    position: absolute;
    z-index: 2;
    transition: all 0.5s ease; /* Smooth transition */
}

.prayer-times div {
    text-align: center;
    flex: 1;
    margin: 2vh 0;
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.prayer-times .shubuh {
    /* background-color: #2D9CDB; */
    background-color: #ffffff;
}

.prayer-times .syuruq {
    /* background-color: #56CCF2; */
    background-color: #ffffff;
}

.prayer-times .dzuhur {
    /* background-color: #6FCF97; */
    background-color: #ffffff;
}

.prayer-times .ashar {
    background-color: #ffffff;
}

.prayer-times .maghrib {
    /* background-color: #F2994A; */
    background-color: #ffffff;
}

.prayer-times .isya {
    /* background-color: #9B51E0; */
    background-color: #ffffff;
}

.prayer-times h2 {
    margin: 0;
    padding: 0.5em;
    font-size: 1.35vw;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
}
.prayer-times .default h2 {
    background-color: #808080;
}
.prayer-times .active h2 {
    background-color: #F7952C;
}

.prayer-times p {
    margin: 0;
    padding: 0.3em;
    font-size: 1.7vw;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.2); /* Slightly transparent white background for the time box */
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
    height: 100%;
    
}
.prayer-times .default p {
    color: #333333 !important;
}
.prayer-times .active p {
    color: #F7952C !important;
}

.footer-text {
    position: absolute;
    bottom: 1.15em;
    width: 100%;
    /* background-color: #333333; */
    background-color: #2C3E50;
    padding: 10px;
    font-size: 1.75vw;
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    height: 1.3em;
    line-height: 2vw;
    z-index: 3;
}

.footer-text span {
    display: inline-block;
    white-space: nowrap;
    /* padding-left: -100%; */
    animation: scroll-text 15s linear infinite;
}

#sedekah {
    position: absolute;
    right: 7vw;
    bottom: 14vh;
    z-index: 5;
    width: 300px;
    text-align: justify;
    font-size: 1.2em;
    line-height: 1.2em;
}

#qris {
    margin-top: 10px;
    width: 300px; /* Set the desired width */
    height: 350px; /* Set the desired height */
    background-image: url('qris.png'); /* Add the PNG file here */
    background-size: contain; /* This ensures the image scales properly */
    background-repeat: no-repeat; /* Prevents the background from repeating */
    background-position: center; /* Centers the image in the div */
    z-index: 5;
}

@media (max-aspect-ratio: 1/1) {
    .prayer-times {
        width: 94vw;
        bottom: 5vw; /* Positioned above the footer */
        display: flex;
        justify-content: space-around;
    }
    .prayer-times div {
        margin: 0 20px !important;
    }
}

/* If height < width (landscape orientation) */
@media (min-aspect-ratio: 1/1) {
    .prayer-times {
        top: 7vw;
        bottom: 3vw; /* Move closer to the footer */
    }
}

@keyframes scroll-text {
    0% { transform: translateX(0%); }  /* Start from off-screen to the right */
    100% { transform: translateX(-100%); }  /* End off-screen to the left */
}