body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
.main{
  height: 400px;
  width: 400px;
  border-radius: 10px;
  background-color: #4C4C4C;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle1{
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background-color: #3A3A3A;
  display: flex;
  justify-content: center;
  align-items: center;

}
.circle2{
  height: 230px;
  width: 230px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #242424;
}
.circle3{
  height: 200px;
  width: 200px;
  border-radius: 50%;
  display: grid;
  grid-template-rows: 50px repeat(3,35px) 50px;
  grid-template-columns: 1fr;
  justify-items: center;
  /* align-items: center; */
  border: 4px dotted white;
  
}
.date{
  font-family :'Open Sans', Helvetica, sans-serif;;
  color: white;
  grid-row: 2/3;
  font-weight: 100;
}
.time{
  position: relative;
  bottom: 60%;
  font-family :'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: white;
  grid-row: 3/4;

}
.data{
  font-family :'Open Sans', Helvetica, sans-serif;;
  color: white;
  grid-row: 4/5;
  font-weight: 100;
  font-size: 12px;
  position: relative;
  bottom: 45%;
}

.animate{
  animation: pulsating 1s  infinite ;
 

}
@keyframes pulsating {
  from{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
    to{
      opacity: 1;
    }
  
}



.animated-red-circle {
  transform: rotate(-90deg);
  width: 240px;   
  height: 240px; 
  position: absolute;
}

.animated-red-circle circle {
  fill: none;
  stroke: rgb(197, 34, 34);
  stroke-width: 1;
  stroke-dasharray: 282.6; 
  stroke-dashoffset: 0;
  animation: red-circle 2s linear infinite reverse; 
}
@keyframes red-circle {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 282.6; 
  }
}