style.css

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@550;700&display=swap');

*{
    box-sizing: border-box;
}


body{
    background: url(https://www.gannett-cdn.com/presto/2018/12/15/USAT/2e7b9863-85ac-4faa-aad3-096fc1826c20-GettyImages-841647034.jpg) no-repeat center center/cover;
    color: rgb(243, 250, 235);
    font-family: 'Dancing Script',sans-serif;
    font-size: large;
    font-weight: 500;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    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(
    #5567b7 0%,
    #954ca4 40%,
    #fff 40%,
    #fff 60%,
    #53afb3 60%,
    #53a0ad 100%
  );
    height: 320px;
    width: 320px;
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: -2;
    border-radius: 50%;
}
.circle{
    background-color: rgb(2, 16, 43);
    height: 100%;
    width: 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 center;
}

.pointer {
    background-color: lavender;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    display: block;
  }

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

.container.shrink{
    animation: shrink 3s linear forwards;
}
  @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);

    }
}