style.css

body {
    background-color: transparent;
    font-family: 'Arial';
  }
  /* Create the pulsating circle */
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */
  }
  .circle {
    width: 9px;
    height: 9px;
    background-color: #00ff08; /* Green color */
    border-radius: 50%;
    position: fixed;
    top: 14px;
    left: 50px;
    /* bottom: 50%; */
    transform: translate(-50%, -50%);
    animation: pulse 2s infinite;
  }  /* Create the container to center the elements */

  /* Create the pulse animation */
  @keyframes pulse {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(0, 255, 8, 0.6);
    }
  
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 7px rgba(76, 175, 80, 0);
    }
  
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
  }
  /* Create the "live" text */
.live-text {
    position: fixed;
    left: 5px; /* half of the width of the circle */
    /* top: 50%; half of the height of the circle   */
    /* bottom: 50%; */
    top: 13px;
    font-size: 10px;
    color: rgb(120, 120, 120);
    font-weight: bolder;
    text-align: left;
    text-transform: uppercase; /* make all letters uppercase */
    letter-spacing: 1px; /* add some extra letter spacing */
  }