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

body{
    width:100%;
    height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:1s ease;
    font-family:'Segoe UI',sans-serif;
    position:relative;
}

/* DIA */

body.day{
    background:linear-gradient(to top,#87ceeb,#e0f6ff);
}

/* ATARDECER */

body.sunset{
    background:linear-gradient(to top,#ff9966,#ff5e62,#ffc371);
}

/* NOCHE */

body.night{
    background:linear-gradient(to top,#0f2027,#203a43,#2c5364);
}

/* RELOJ */

.reloj{
    text-align:center;
    color:white;
    z-index:10;
    text-shadow:0 0 20px rgba(0,0,0,.4);
}

.tiempo{
    font-size:90px;
    font-weight:bold;
    letter-spacing:4px;
}

.fecha{
    font-size:24px;
    margin-top:10px;
    letter-spacing:3px;
}

/* SOL */

.sun{
    width:140px;
    height:140px;
    border-radius:50%;
    background:#ffd93d;
    position:absolute;
    top:80px;
    right:120px;
    box-shadow:
    0 0 40px #ffd93d,
    0 0 80px #ffd93d;
}

/* LUNA */

.moon{
    width:120px;
    height:120px;
    border-radius:50%;
    background:#f1f1f1;
    position:absolute;
    top:80px;
    right:120px;
    box-shadow:
    0 0 30px white,
    0 0 60px rgba(255,255,255,.6);
}

/* ESTRELLAS */

.star{
    width:4px;
    height:4px;
    background:white;
    border-radius:50%;
    position:absolute;
    animation:blink 2s infinite;
}

@keyframes blink{
    0%{opacity:.2;}
    50%{opacity:1;}
    100%{opacity:.2;}
}