@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
*
{
    box-sizing: border-box;
}
body
{
    background: #1a10db41  no-repeat center center ;
  color: #fff;
  font-family: 'Montserrat',sans-serif;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.container
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    width: 300px;
    margin: auto;
    position: relative;
    transform: scale(1);
}
.gradient-circle
{
    background: conic-gradient
    (
        #55b7a4 0%,
        #4ca493 40%,
        #fff 40%,
           #fff 60%, 
           #336d62 60%,
           #2a5b52 100%
    );
    height: 302px;
    width: 320px;
    top: -10px;
    left: -10px;
    z-index: -2;
    position: absolute;
    border-radius: 50%;
}
.circle
{
    background-color: #010f1c;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 50%;
}
.pointer-container
{
    position: absolute;
    top: -40px;
    left: 140px;
    width: 20px;
    height: 190px;
    animation: rotate 7.5s  linear forwards infinite;
    transform-origin: bottom;
}
.pointer
{
    background-color: #fff;
    border-radius: 50px;
   width: 20px;
    height: 20px;
   display: block;
}
@keyframes rotate
{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }

}
@keyframes grow
{
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }

}
@keyframes shrink
{
    from {
        transform: scale(1.2)
    }
    to {
        transform: scale(1)
    }

}
.container.grow
{
    animation: grow 3s linear forwards;
   
}
.container.shrink
{
    animation: shrink 3s linear forwards;

}