style.css

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {
  box-sizing: border-box;
}

body {
  background: #718093 url('./img/bg.jpg') no-repeat center center/cover;
  color: #2f3542;
  font-family: 'Montserrat', sans-serif;
  min-height: 100vh;
  min-width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    height: 300px;
    width: 300px;
    position: relative;
    transform: scale(1);
    
  }

  .circle {
    background-color: #ffa801;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .gradient-circle {
    background: conic-gradient(
      #ff5f5796 0%,
      #ff5f5796 40%,
      #f7f1e3a1 40%,
      #f7f1e3a1 60%,
      #021a15a4 60%,
      #021a15a4 100%
    );
    height: 320px;
    width: 320px;
    z-index: -2;
    border-radius: 50%;
    position: absolute;
    top: -10px;
    left: -10px;
    box-shadow: 10px 0px 30px rgba(0, 0, 0, 0.137),
    -10px 0px 30px rgba(0, 0, 0, 0.144);
  }

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

  .pointer-container {
    position: absolute;
    top: -35px;
    left: 140px;
    width: 20px;
    height: 190px;
    animation: rotate 7.5s linear forwards infinite;
    transform-origin: bottom center;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  }
  
  .container.grow {
    animation: grow 3s linear forwards;
  }

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

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

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

  /* Screen Sizes 500px and down */
  @media (max-width: 500px) {
    .container.grow {
      animation: grow 3s linear forwards;
    }
  
    @keyframes grow {
      from {
        transform: scale(0.7);
      }
    
      to {
        transform: scale(1);
      }
    }
    
    .container.shrink {
      animation: shrink 3s linear forwards;
    }
  
    @keyframes shrink {
      from {
        transform: scale(1);
      }
    
      to {
        transform: scale(0.7);
      }
    }
  }