html, body {
    height:100%;
    margin:0;
    padding:0;
  }
  
  @keyframes background-slide {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -100em 0;
    }
  }
  @keyframes show-hide {
    0%, 50% { color: transparent; }
    51%, 100% { color: #FFFFFF; }
  }
  .blocks {
    font-size:4vw;
  }
  @media (min-aspect-ratio:1) {
    .blocks {
      font-size:4vh;
    }
  }
  .click {
    width: 100px;
    height: 20px;
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-10px;
    color:#000;
    position:absolute;
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    line-height:20px;
    color: #BBB;
  }
  .blocks {
    overflow:hidden;
    width: 25em;
    height: 25em;
    left:50%;
    top:50%;
    margin-left:-12.5em;
    margin-top:-12.5em;
    position:absolute;
  }
  .block {
    position:absolute;
    top:0;
    left:0;
    width: 25em;
    height: 25em;
    background-size:125em 25em;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwMHB4IiBoZWlnaHQ9IjQwMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCA0MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+QXJ0Ym9hcmQ8L3RpdGxlPgogICAgPGcgaWQ9IkFydGJvYXJkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjMDAwMDAwIiB4PSIxMjc3IiB5PSIxMjciIHdpZHRoPSIyNTAiIGhlaWdodD0iMTUwIiByeD0iMTciPjwvcmVjdD4KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRkZGRkZGIiB4PSIxMjczIiB5PSIxMjMiIHdpZHRoPSIyNTAiIGhlaWdodD0iMTUwIiByeD0iMTciPjwvcmVjdD4KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRTVFNUU1IiB4PSIxMjc1IiB5PSIxMjUiIHdpZHRoPSIyNTAiIGhlaWdodD0iMTUwIiByeD0iMTUiPjwvcmVjdD4KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjNDQ3QThGIiB4PSIxMjgwIiB5PSIxMzAiIHdpZHRoPSIyNDAiIGhlaWdodD0iMTQwIiByeD0iMTAiPjwvcmVjdD4KICAgICAgICA8cG9seWdvbiBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRDhEOEQ4IiBwb2ludHM9Ijk3OC44MDExOTggODQuMzA3NTM3IDEwNDguNzc0MjYgMzUuNjQ2NzQ1NyA5ODcuODUyNjIgMzY0LjY0Njc0NiA5NTEuNzc0MjYxIDIzMC4yNjMyNjIiPjwvcG9seWdvbj4KICAgICAgICA8cG9seWdvbiBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRDhEOEQ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDYuNzUwMDAwLCAxODIuNDY5MjQwKSByb3RhdGUoLTEwLjAwMDAwMCkgdHJhbnNsYXRlKC0yMDYuNzUwMDAwLCAtMTgyLjQ2OTI0MCkgIiBwb2ludHM9IjMzMS43NSAxMTQuNTk1NDU1IDgxLjc1IC0yLjAzMDc1OTk5IDgxLjc1IDM2Ni45NjkyNCAzMzEuNzUgMjc4LjI5NjU1NyI+PC9wb2x5Z29uPgogICAgICAgIDxwb2x5Z29uIGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNEOEQ4RDgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU4MC44NjYzNjksIDIwNy4wOTg0NDcpIHJvdGF0ZSgxMjMuMDAwMDAwKSB0cmFuc2xhdGUoLTU4MC44NjYzNjksIC0yMDcuMDk4NDQ3KSAiIHBvaW50cz0iNjczLjM2NjM2OSAxNTAuMDc3MTEgNDg4LjM2NjM2OSA1Mi4wOTg0NDcxIDQ4OC4zNjYzNjkgMzYyLjA5ODQ0NyA2NzMuMzY2MzY5IDI4Ny42MDM3ODEiPjwvcG9seWdvbj4KICAgICAgICA8cG9seWdvbiBpZD0iVHJpYW5nbGUiIGZpbGw9IiMwMDAwMDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyNTIuNTAwMDAwLCA4MS4wMDAwMDApIHJvdGF0ZSgtNTIuMDAwMDAwKSB0cmFuc2xhdGUoLTEyNTIuNTAwMDAwLCAtODEuMDAwMDAwKSAiIHBvaW50cz0iMTI1Mi41IDcwIDEyODIgOTIgMTIyMyA5MiI+PC9wb2x5Z29uPgogICAgICAgIDxwb2x5Z29uIGlkPSJUcmlhbmdsZSIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU0MS41NzIzMzEsIDMwMi4wNjc0MjEpIHJvdGF0ZSgxNDAuMDAwMDAwKSB0cmFuc2xhdGUoLTE1NDEuNTcyMzMxLCAtMzAyLjA2NzQyMSkgIiBwb2ludHM9IjE1NDEuNTcyMzMgMjkzLjA2NzQyMSAxNTY1LjU3MjMzIDMxMS4wNjc0MjEgMTUxNy41NzIzMyAzMTEuMDY3NDIxIj48L3BvbHlnb24+CiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iIzAwMDAwMCIgeD0iMTY3NyIgeT0iMTI3IiB3aWR0aD0iMjUwIiBoZWlnaHQ9IjE1MCIgcng9IjE3Ij48L3JlY3Q+CiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iI0ZGRkZGRiIgeD0iMTY3MyIgeT0iMTIzIiB3aWR0aD0iMjUwIiBoZWlnaHQ9IjE1MCIgcng9IjE3Ij48L3JlY3Q+CiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iI0U1RTVFNSIgeD0iMTY3NSIgeT0iMTI1IiB3aWR0aD0iMjUwIiBoZWlnaHQ9IjE1MCIgcng9IjE1Ij48L3JlY3Q+CiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iIzQ0N0E4RiIgeD0iMTY4MCIgeT0iMTMwIiB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE0MCIgcng9IjEwIj48L3JlY3Q+CiAgICA8L2c+Cjwvc3ZnPg==");
    animation: background-slide 200ms steps(4) forwards;
    
      display: grid;
      place-items: center;
  }
  .block-text {
    font-family: Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    text-align:center;
    user-select: none;
    animation: show-hide 200ms steps(4) forwards;
    width:14em;
    line-height:1.5em;
  }