/* Styling untuk waktu yang lebih besar dan lebih terang */
#utc-time {
    text-align: center;
    margin-bottom: 20px;
    font-size: 3.4rem; /* Ukuran font responsif menggunakan vw */
    font-weight: bold; /* Menebalkan angka */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Menambahkan bayangan agar teks lebih terlihat */
    position: relative; /* Agar elemen dapat digeser */
    top: -150px; /* Geser elemen ke atas, tanpa memengaruhi elemen lain */
}

.time-number {
    background: linear-gradient(to bottom right, #1980fd 50%, #ffffff); /* Gradien warna */
    -webkit-background-clip: text; /* Memotong background hanya pada teks (untuk Safari) */
    background-clip: text; /* Properti standar untuk kompatibilitas */
    color: transparent; /* Membuat teks transparan agar gradien terlihat */
    font-weight: bold;
}

.day-name {
    background: linear-gradient(to bottom right, #ffffff 50%, #584d4d); /* Gradien warna */
    -webkit-background-clip: text; /* Memotong background hanya pada teks (untuk Safari) */
    background-clip: text; /* Properti standar untuk kompatibilitas */
    color: transparent; /* Membuat teks transparan agar gradien terlihat */
    font-weight: bold;
}

/* Media queries untuk responsif lebih lanjut */
@media (max-width: 1200px) {
    #utc-time {
        font-size: 5vw; /* Ukuran font sedikit lebih kecil pada layar besar dan tablet */
    }
}

@media (max-width: 768px) {
    #utc-time {
        font-size: 8vw; /* Ukuran font lebih besar pada layar kecil dan tablet */
    }
}

@media (max-width: 480px) {
    #utc-time {
        font-size: 10vw; /* Ukuran font lebih besar lagi pada layar smartphone */
        top: -100px; /* Sedikit mengurangi posisi agar lebih seimbang pada layar kecil */
    }
}