:root {
    --bg-gradient-start: #0f172a;
    --bg-gradient-end: #1e293b;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --accent: #38bdf8;
    --glow: rgba(56, 189, 248, 0.5);
    --clock-font-size: 25vw;
    --date-font-size: 5vw
}

/* * {
    margin: auto;
    padding: 0;
    box-sizing: border-box;
} */

html {
    height: 100%;
}


body {
    font-family: 'Outfit', sans-serif;
    background: black;
    /*min-height: 100vh;*/
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
    overflow: hidden;
    /* padding: 10px; */
    margin: 30px;
    height: calc(100% - 60px)
}

.clock-container {
    /* background: var(--glass-bg); */
    /* padding: 4rem 6rem; */
    /*border-radius: 2rem;*/
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* border: 1px solid var(--glass-border); */
    /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); */
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex
}

.clock-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;

    /* background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); */
}


.clock {
    font-size: var(--clock-font-size);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: 0 0 20px var(--glow);
    display: flex;
    align-items: baseline;
    justify-content: center;
    line-height: 1;
}

.colon {
    color: var(--text-secondary);
    margin: 0 0.5rem;
    animation: blink 2s infinite;
    position: relative;
    top: -0.1em;
}


.ampm {
    font-size: 2rem;
    margin-left: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.date {
    margin-top: 1rem;
    font-size: var(--date-font-size);
    color: var(--text-secondary);
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Responsiveness */
/*@media (max-width: 768px) {*/
/*    .clock-container {*/
/*        padding: 3rem 2rem;*/
/*        width: 90%;*/
/*    }*/

/*    .clock {*/
/*        font-size: 3.5rem;*/
/*    }*/

/*    .ampm {*/
/*        font-size: 1.25rem;*/
/*    }*/

/*    .date {*/
/*        font-size: 1rem;*/
/*    }*/
/*}*/

.sync-error {
    color: #ef4444;
    /* Red color for error */
    font-size: 1.5rem;
    margin-top: 0.5rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}