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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #e0e5ec;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
}

#clock-container {
    background: #e0e5ec;
    border-radius: 50px;
    padding: 40px 60px;
    box-shadow: 
        20px 20px 60px #bec3c9,
        -20px -20px 60px #ffffff,
        inset 5px 5px 10px rgba(255, 255, 255, 0.5),
        inset -5px -5px 10px rgba(190, 195, 201, 0.5);
    position: relative;
}

#clock {
    font-size: 5rem;
    font-weight: 600;
    color: #7a8a9e;
    letter-spacing: 0.15em;
    font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
    background: #e0e5ec;
    padding: 30px 40px;
    border-radius: 25px;
    box-shadow: 
        inset 8px 8px 16px #bec3c9,
        inset -8px -8px 16px #ffffff;
    text-shadow: 
        1px 1px 2px rgba(255, 255, 255, 0.8),
        -1px -1px 2px rgba(190, 195, 201, 0.5);
}

@media (max-width: 768px) {
    #clock {
        font-size: 2.5rem;
        padding: 20px 25px;
    }
    
    #clock-container {
        padding: 25px 35px;
    }
}