style.css

@font-face {
    font-family: "IBM Plex Sans";
    src:
      url('font/ibmplexsans-light.woff2') format('woff2'),
      url('font/ibmplexsans-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src:
      url('font/ibmplexsans-bold.woff2') format('woff2'),
      url('font/ibmplexsans-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html {
    max-width: 65ch;
    margin: 3rem auto;
}

body {
    font-family: "IBM Plex Sans", serif;
}

.heading-bg {
    background: red;
    color: yellow;
    padding: 2px 10px;
}

.blink {
    animation: blink-animation 1s steps(2, start) infinite;
    -webkit-animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
@-webkit-keyframes blink-animation {
  to {
  visibility: hidden;
  }
}

@media (prefers-reduced-motion) {
  .blink {
    animation: none;
    visibility: visible
  }
}