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

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0f172a; /* dark blue */
    font-family: 'Segoe UI', sans-serif;
}

/* Circle container */
.digitalclock {
    height: 300px;
    width: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, #1e293b, #020617);
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    box-shadow: 
        0 0 20px #00f0ff,
        0 0 40px rgba(0, 240, 255, 0.5),
        inset 0 0 20px rgba(0,0,0,0.8);
    
    position: relative;
}

/* Time text */
.digitalclock p {
    color: #00f0ff;
    font-size: 40px;
    font-weight: bold;
    text-shadow: 0 0 10px #00f0ff;
}

/* Layout spacing */
#hrs, #min, #sec {
    margin: 0 2px;
}

/* AM/PM styling */
#arm {
    position: absolute;
    bottom: 40px;
    font-size: 18px;
    color: #38bdf8;
    letter-spacing: 2px;
}

/* Glow animation */
@keyframes glow {
    0% { box-shadow: 0 0 10px #00f0ff; }
    50% { box-shadow: 0 0 30px #00f0ff; }
    100% { box-shadow: 0 0 10px #00f0ff; }
}

.digitalclock {
    animation: glow 2s infinite;
}