/* 1.1.general-setting-pages *************************/
/****************************************************/
:root {
    --pr-color: #fff;
    --second-color: #0a0a0a;
    --cubicbz: cubic-bezier(.9, 0, .1, 1);
    --index: 35px;
    --fz-big: 90px;
}
.color{
	color: #8aff00;
}
* {
    box-sizing: border-box;
	margin: 0;
    padding: 0;
	
}

body {
    background: var(--second-color);
    height: 100%; /* Ensure body takes full height of the viewport */
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
}
body > #app {
    font-family: 'Arial', sans-serif !important;
}
/* Remove overflow hidden on .header and let the content scroll */
.header {
    position: relative;
    width: 100%;
    min-height: 100vh;  /* Allows header to extend if content exceeds viewport */
    padding: var(--index);
  

}

.wrapp {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Make sure the container fills at least the full viewport height */
    justify-content: flex-start; /* Push the footer to the bottom */
}


/* Amazing three.js gradient background */
.header__bl {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--index);
    width: 100%;
    height: 100%;
    z-index: 2;
}

.header__txt {
	margin: 4em;
    width: 90%;
    height: auto;
    border-radius: 20px;
    border: 1px solid #8aff00;
	font-family: 'Syne', sans-serif;
    font-weight: 800;
   
    font-feature-settings: 'pnum' on, 'lnum' on;
}

.title {
    position: relative;
    width: 100%;
    margin: 20px var(--index);
    font-size: 70px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--pr-color);
    z-index: 3;
}

#background {
    width: 100%;
    min-height: 100%;
    flex: 1 1 100%;
    overflow: hidden;
    border-radius: 20px;
}



.header__footer {
    width: 100%;
    padding: 20px;
    color: white;
    text-align: center;
}

.header__footer-wrapp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.header__footer-txt {
    position: relative;
    padding: 15px 35px;
    padding-left: 70px;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    background: #9999991f;
    border: 1px solid #a3a2a21f;
    border-radius: 20px;
    backdrop-filter: blur(15px);
	font-family: 'Syne', sans-serif;
    font-weight: 800;
   
    font-feature-settings: 'pnum' on, 'lnum' on;
	
}

.header__footer-txt:nth-child(2) {
    margin-left: auto;
    text-align: right;
    line-height: .7;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 45px;
}

.header__footer-img {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.header__footer-img img {
    display: block;
    width: 100%;
    height: 100%;
    animation: rotate 9s infinite linear;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-360deg);
    }
}

/* Ensuring #app stays centered and scrollable */
#app {
    width: 400px;
    margin: 20px auto;
    padding: 1em;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2; /* Ensure the content stays on top of background */
    overflow: hidden;
    text-align: center;
    max-height: calc(100vh - 40px); /* Prevent #app from exceeding the screen height */
    box-sizing: border-box; /* Include padding and margins in the width/height calculations */
}

/* Additional styles (same as before) */
#app h3 {
    font-size: 1.3em;
    padding: 0.6em;
    margin-bottom: 0.7em;
    background: linear-gradient(to right, #00b09b, #96c93d);
    color: white;
    border-radius: 5px;
}


::-webkit-scrollbar {
    width: 10px; /* Width of the vertical scrollbar */
    height: 10px; /* Height of the horizontal scrollbar */
}

/* Style for the thumb (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
    border: 2px solid transparent; /* Optional: adds a little space around the thumb */
    background-clip: content-box; /* Creates a border effect */
}

/* Hover state for the thumb */
::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker color when hovering over the thumb */
}

/* Style for the track (the part the thumb slides within) */
::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Color of the track */
    border-radius: 10px; /* Rounded corners for the track */
}

/* Style for the track on hover */
::-webkit-scrollbar-track:hover {
    background-color: #ddd; /* Slightly darker when hovered */
}

/* Optional: Hide the scrollbar if it's not needed (for mobile or certain conditions) */
::-webkit-scrollbar:empty {
    display: none; /* Hides scrollbar if it's empty */
}

@media (max-width: 768px) {
    #app{
        width: 10em;
    height: auto;
    }
    .current-prayer, .current-time {
        font-size: 1em;
        padding: 0.4em;
    }
    .title {
        font-size: 30px; /* Reduce font size for smaller screens */
        margin: 10px var(--index);
    }

    .header__txt {
        font-size: 15px;
        margin: 2em;
        border-radius: 15px;
    }

    .header__footer-wrapp {
		align-items: center; /* Center the footer elements */

    }

    .header__footer-txt {
        font-size: 10px; /* Smaller font size */
        padding: 5px 10px;
        color: #fff;
        position: relative;
        padding-left: 50px; /* Space for the image */
        background: rgba(0, 0, 0, 0.5);
        border-radius: 15px;
        margin: 5px 0;
    }

    .header__footer-txt:nth-child(2) {
        font-size: 35px; /* Smaller font size */
        text-align: center;
        margin: 10px 0;
    }

    .header__footer-img {
        width: 40px;
        height: 40px;
    }

    
}

@media (max-width: 480px) {
    .title {
        font-size: 22px; /* Even smaller font size */
        margin: 5px var(--index);
    }

    .header__txt {
        font-size: 16px;
        margin: 1.5em;
        border-radius: 10px;
    }

    .header__footer-wrapp {

        align-items: center; /* Center the footer elements */
    }

    .header__footer-txt {
		font-size: 10px; /* Smaller font size */
        padding: 5px 10px;
        color: #fff;
        position: relative;
        padding-left: 50px; /* Space for the image */
        background: rgba(0, 0, 0, 0.5);
        border-radius: 15px;
        margin: 5px 0;
}

/* Position the image absolutely but ensure it doesn't overlap the text */
.header__footer-img {
    position: absolute;
    top: 50%;
    left: 15px; /* Space from the left side */
    transform: translateY(-50%);
    width: 50px; /* Width of the image */
    height: 50px; /* Height of the image */
}

.header__footer-img img {
    display: block;
    width: 100%;
    height: 100%;
    animation: rotate 9s infinite linear;
}

/* Adjust the footer's content to make sure it's aligned */
.header__footer-wrapp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Optional: Some spacing to separate the footer text from other content */
.header__footer-txt + .header__footer-txt {
    margin-top: 10px; /* Space between multiple text elements */
}

    .header__footer-txt:nth-child(2) {
        font-size: 30px;
        margin-top: 10px;
    }

    .header__footer-img {
        width: 30px;
        height: 30px;
    }

    
}

@media (max-width: 400px) {
    .title {
        font-size: 18px; /* Even smaller font size for very small screens */
        margin: 3px var(--index);
    }

    .header__txt {
        font-size: 14px; /* Smaller font size for header text */
        margin: 1em;
        border-radius: 8px;
    }

    .header__footer-wrapp {
        flex-direction: column; /* Stack footer elements vertically */
        align-items: center; /* Align footer elements to the left */
    }

    .header__footer-txt {
        font-size: 10px; /* Smaller font size */
        padding: 5px 10px;
        color: #fff;
        position: relative;
        padding-left: 50px; /* Space for the image */
        background: rgba(0, 0, 0, 0.5);
        border-radius: 15px;
        margin: 5px 0;
    }

    .header__footer-img {
        position: absolute;
        top: 50%;
        left: 10px; /* Adjust position for very small screens */
        transform: translateY(-50%);
        width: 25px;
        height: 25px;
    }

    .header__footer-img img {
        display: block;
        width: 100%;
        height: 100%;
        animation: rotate 9s infinite linear;
    }

    /* Footer text alignment and spacing */
    .header__footer-txt:nth-child(2) {
        font-size: 24px;
        text-align: left;
        margin-top: 5px;
    }

    #app {
        width: 100%;
        padding: 0.5em; /* Reduced padding for smaller screens */
    }
}