*{
    margin:0;
    padding:0;
    font-family: 'Poppions',sans-serif;
    box-sizing: border-box;

}
.hero{
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(45deg,#08001f,#30197d);
    color:#fff;
    position: relative;
}

.container {
    
    width: 800px;
    height: 180px;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    
    }
    .clock{
        
        width: 100%;
        height:100%;
        background: rgba(235,0,255,0.11);
        border-radius: 10px;
       display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(20px);
    }
    .container::before{
        content: '';
       
        width: 180px;
        height: 180px;
        background: #f41b75;
        border-radius: 5px;
        position:absolute;
        left:-50px;
        top:-50px;
        z-index: -1;

        }
    .container::after{
        content: '';
        width:180px;
        height:180px;
        background: #419aff;
        border-radius: 50%;
        position: absolute;
        right:-10px;
        bottom: -50px;
        z-index: -1;

    }
    .clock span{
        font-size:80px;
        width:110px;
        display:inline-block;
        text-align: center;
        position: relative;



    }
    .clock span::after{
        
        font-size: 16px;
        position:absolute;
        bottom:-5px;
        left:50%;
        transform: translate(-50%);

    }
    #hrs::after{
        content:"HOURS";
    }
    #min::after{
        content:"MINUTES";
    }
    #sec::after{
        content:"SECONDS";}