.counter1 {
    font-size: 20px;
    font-weight: bold;
    color: #008CBA;
    margin-bottom: 20px;
    padding: 5px;
   /* border: 2px solid #008CBA;*/
   /* border-radius: 5px;*/
    min-width: 80px;
	font-family: Arial, sans-serif;
}
.counter1 {
  border-radius: 10px;
  margin: auto;
  /*display: grid;*/
  place-content: center;
  text-align: center;
  font-size: 1.2em;
  --border-size: 0.3rem;
  border: var(--border-size) solid transparent;

  /* Paint an image in the border */
  border-image: conic-gradient(from var(--angle), #ff007a 0deg 90deg, #0bc575 90deg 180deg, #ff007a 180deg 270deg, #0bc560 270deg 360deg) 1 stretch;
    )
    1 stretch;
 /*background: rgba(0, 0, 0, 0.5);*/
}

@property --opacity {
  syntax: "<number>";
  initial-value: 0.5;
  inherits: false;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes opacityChange {
  to {
    --opacity: 1;
  }
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

.counter1 {
  animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;
}

    /*<p>You are Visitor No <a id="visitor-count" class="counter1" target="_blank">Loading...</a></p>*/