/* General styling for the page */
html, body {
    margin: 0;
    padding: 0;
    background-color: transparent;
    color: white;
}

/* Base #dates styling */
#dates {
    font-family: 'LCD Solid', sans-serif;
    position: fixed;
    top: 24vh;
    width: 100%;
    text-align: center;
    color: orangered;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* Date text styling */
#gregorianDate,
#hijriDate {
    font-size: 2vw;
    font-weight: bold;
    margin: 0;
}

/* Responsive Adjustments */

/* Medium-large screens (≤ 1920px) */
@media (max-width: 1920px) {
    #dates {
        top: 20vh;
        color: #ff5722;
    }
}

/* Tablets / smaller laptops (≤ 1280px) */
@media (max-width: 1280px) {
    #dates {
        top: 16vh;
    }
}

/* Tablets / small screens (≤ 1024px) */
@media (max-width: 1024px) {
    #dates {
        top: 14vh;
    }
}