* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background-image: linear-gradient(135deg, #52ec9f, #6193ff);
  overflow: hidden;
}
.clock {
  width: 40.34em;;
  height: 11em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-top:44px
}
.title{
  font-size:55px;
  text-align: center;
  color: white;
  padding-top: 140px;
  text-shadow:  1px 2px 2px #150c41;
    
}
.clock div {
  position: relative;
  background-color: #ffffff;
  height: 100%;
  width: 4.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
  color: #150c41;
  border-radius: 0.4em;
  box-shadow: 0 1em 2em rgba(0, 0, 0, 0.3);
  letter-spacing: 0.05em;
 
}
.clock span {
  font-weight: 800;
  font-size: 2.5em;
  color: #ffffff;
  
}
@media   (max-width:860px) {

  .clock{
     

    width: 28.34em;;
    height: 8em;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 60%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 300;
    margin-top:44px;
     


     
  }
.clock span{
  padding:18px

}
  
}