/* Define the keyframes for the animation named 'move' */
@keyframes move {
  0% { transform: translateX(0);} /* Start at the initial position */
  50% { transform: translateX(calc(100vw - 10px));} /* Move to the right edge of the viewport minus 20px */
  100% { transform: translateX(0);} /* Return to the initial position */
}
 

/* Style for the element with ID 'animated-circle' */
#animated-circle {
  position: absolute; /* Position the element absolutely within its containing element */
  top: 100px; /* Adjust the top position to align with the header */
  left: 0; /* Start from the left edge */
  width: 10px; /* Set the width of the circle */
  height: 10px; /* Set the height of the circle */
  /* background-color: white; */ /* Original background color, commented out */
  background-color: rgba(255, 255, 255, 0.5); /* Set a semi-transparent white background color */
  border-radius: 50%; /* Make the element a circle */
  animation: move 10s infinite; /* Apply the 'move' animation, lasting 10 seconds and repeating infinitely */
}

/*  Add in mkdocs.yml
extra_css:
  - stylesheets/svg.css  # 追加のカスタムCSSファイルを適
*/

/* add in any index.md 
<div id="animated-circle"></div>
*/