*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body,
html {
  height: 100%;
  display: grid;
  background-color: black;
  color: white;
}

.content {
  margin: auto;
}

.dot {
  visibility: hidden;
}

.content:hover .text {
  color: #00ff00;
}

.content:hover .dot {
  visibility: visible;
  animation: 2s blink infinite;
}

.content:hover .dot:nth-child(2) {
  visibility: visible;
  animation-delay: 500ms;
}

.content:hover .dot:nth-child(3) {
  visibility: visible;
  animation-delay: 1s;
}

@keyframes blink {
  50% {
    color: transparent
  }
}