body{
    margin:0;
    background:#1e272e;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    /* background-image: url(./); */

}

.main-box{
    background:#2f3640;
    padding:40px;
    border-radius:20px;
    width:90%;
    max-width:1000px;
    box-shadow:0 0 30px rgba(0,0,0,0.4);
        /* background-image: url(./image-2.jpg); */
        background-position: center center;
        background-size: contain;

}

.row{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;
    margin-bottom:40px;

}

.row-1{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
 .row-2{
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 }

.circle{
    width:150px;
    height:150px;
    border-radius:50%;
    border:8px solid white;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    color:white;
    font-weight:bold;
    transition:0.3s;
}

.circle h2{
    margin:0;
    font-size:28px;
}

.circle p{
    margin:0;
    font-size:12px;
    letter-spacing:2px;
    opacity:0.7;
}


.small-circle{

    width:60px;
    height:60px;
    border-radius:50%;
    border:6px solid #ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-weight:bold;
    font-size:18px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
    
}
.days-circle{

    width:60px;
    height:60px;
    border-radius:50%;
    border:6px solid #ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-weight:bold;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size:12px;
    border-color:burlywood;
}
.months-h2{
    font-size: 28px;
    margin: 0;
    
}

.hours{ border-color:#ff4757; }
.minutes{ border-color:#ffa502; }
.seconds{ border-color:#2ed573; }

.days{ border-color:#1e90ff; }
.months{ border-color:#e84393; }
.years{ border-color:#a55eea; }

.ampm{ border-color:#00d2d3; }


.circle:hover,
.small-circle:hover,
.days-circle:hover{
    transform:scale(1.08);
}



@media(max-width:768px){
    .circle{
        width:120px;
        height:120px;
    }
    .small-circle{
        width:50px;
        height:50px;
    }
}

@media(max-width:547px){
    .circle{
        width:100px;
        height:100px;
    }
    .small-circle {
        width:40px;
        height:40px;
        font-size:14px;
        /* margin-left: 30px; */
    }
   
    .row{
        flex-direction: column;
        align-items: center;
    }
    .months-h2{
        font-size: 22px;
    }
}