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


body{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;


    background:
    radial-gradient(circle at top left,#1e40af,transparent 35%),
    radial-gradient(circle at bottom right,#0ea5e9,transparent 30%),
    linear-gradient(135deg,#020617,#0f172a);


    font-family:"Poppins",sans-serif;

}



/* Main Card */

.clock-card{

    width:650px;

    padding:35px;

    display:flex;

    align-items:center;

    gap:40px;


    background:rgba(15,23,42,.75);


    border:1px solid rgba(148,163,184,.2);


    border-radius:25px;


    box-shadow:

    0 25px 60px rgba(0,0,0,.55);

}



/* Day Box */

.day-box{

    padding: 10px 18px;

    border-radius:10px;

    border:1px solid rgba(56,189,248,.3);

    background:rgba(30,64,175,.25);

}


.day-box span{

    color:#94a3b8;

    font-size:13px;

    letter-spacing:4px;

}



.day-box h1{

    margin-top:15px;

    color:#38bdf8;

    font-size:32px;

    text-align:center;

}




/* Right Content */

.content{

    flex:1;

    text-align:center;

}




.date-section span{

    color:#64748b;

    font-size:13px;

    letter-spacing:4px;

}



.date-section h2{

    margin-top:10px;

    color:#e2e8f0;

    font-size:25px;

    font-weight:500;

}




.time-display{

    margin-top:35px;


    color:white;


    font-size:65px;


    font-weight:700;


    letter-spacing:5px;



    text-shadow:


    0 0 10px #38bdf8,

    0 0 30px #2563eb;


}



/* Hover */

.clock-card:hover{

    transform:translateY(-8px);

    transition:.4s;


    box-shadow:

    0 35px 80px rgba(14,165,233,.25);

}




@media(max-width:700px){

.clock-card{

    width:90%;

    flex-direction:column;

}


.day-box{

    width:100%;

}


.time-display{

    font-size:45px;

}

}