*{

    text-align: center;

}

body {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    background: #060a1f;

}



#clock h2 {

    display: inline-flex;

    color: #fff;

    text-align: center;

    margin: 10px 0;

    font-weight: 700;

    margin: auto;

    text-transform: uppercase;

    letter-spacing: 0.4em;

    font-size: 0.8em;



}

#sm,#sm2{

    display: inline-flex;

    flex-direction: column;

    justify-content: center;

    padding: 3px;

}

#sm span{

    color:white;

    font-size: 30pt;

    text-align: center;

    background-color: rgb(0, 162, 255);

    padding: 0.5em 1em;

}

#sm2 span{

    color:rgba(255, 255, 255, 0.253);

    font-size: 30pt;

    text-align: center;

    background: rgb(6,10,31);

    background: linear-gradient(180deg, rgba(6,10,31,0.9738270308123249) 0%, rgba(6,10,31,0.9009978991596639) 10%, rgba(0,162,255,0.38) 100%);

    padding: 0.5em 1em;

}





#clock,#clock2{

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    box-sizing: border-box;

    padding-bottom: 0 !important;

}

#sm #text{

    font-size: 10pt;

    background-color: rgb(0, 132, 255);

    padding-bottom: 0 !important;

}



#sm #seconds{

    background-color: rgb(255, 0, 170) ;

}



#sm2 #seconds{

    background: rgb(6,10,31);

    background: linear-gradient(180deg, rgba(6,10,31,0.9738270308123249) 0%, rgba(6,10,31,0.9009978991596639) 10%, rgba(255,0,170,0.3) 100%) !important;

}

#sm2 #text{

    font-size: 10pt;

    background-color: rgb(0, 132, 255) !important;

    padding-top: 0 !important;

}



#sm #text1{

    font-size: 10pt;

    background-color: rgb(224, 0, 105);

    padding-bottom: 0 !important;

}

#sm2 #text1{

    font-size: 10pt;
    
    flex-direction: reverse-row;

    background-color: rgba(255, 0, 119, 0.301) !important;

    padding-top: 0 !important;

}

#big:hover {



    cursor: pointer;



    animation: shake 0.5s;

  

    animation-iteration-count: infinite;

  }



  

  @keyframes shake {

    0% { transform: translate(1px, 1px) rotate(0deg); }

    10% { transform: translate(-1px, -2px) rotate(-1deg); }

    20% { transform: translate(-3px, 0px) rotate(1deg); }

    30% { transform: translate(3px, 2px) rotate(0deg); }

    40% { transform: translate(1px, -1px) rotate(1deg); }

    50% { transform: translate(-1px, 2px) rotate(-1deg); }

    60% { transform: translate(-3px, 1px) rotate(0deg); }

    70% { transform: translate(3px, 1px) rotate(-1deg); }

    80% { transform: translate(-1px, -1px) rotate(1deg); }

    90% { transform: translate(1px, 2px) rotate(0deg); }

    100% { transform: translate(1px, -2px) rotate(-1deg); }

  }

#clock2{

    display: flex;

    padding-bottom:0 ;

    bottom: -210px;

}

  #sm2{

    display: inline-flex;

    

  }

  #big{

    display: flex;

    flex-direction: column;

}

#sm2{

    transform: rotate(180deg);



}