How fix div which includes span tag for responsive?

Question

I found a neon graphics format and I want to use it. It looks exactly what I want, but not responsive .When it goes into phone mode, the text goes out of the page.I tried a few methods I know, but I couldn't fix it. I tried reducing the size in @media but it didn't work. How can i fix it ?

.logo {
    text-align: center;
    width: 65%;
    height: 100px;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    user-select: none;
  }

  .logo b{
    font: 400 7vh "Vibur";
    color: #fee;
    text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #27296d, 0 0 0.5em #27296d, 0 0 0.1em #27296d, 0 10px 3px #000;
  }
  .logo b span{
    animation: blink linear infinite 2s;
  }
  .logo b span:nth-of-type(2){
    animation: blink linear infinite 3s;
  }
  @keyframes blink {
    78% {
      color: inherit;
      text-shadow: inherit;
    }
    79%{
       color: #333;
    }
    80% {

      text-shadow: none;
    }
    81% {
      color: inherit;
      text-shadow: inherit;
    }
    82% {
      color: #333;
      text-shadow: none;
    }
    83% {
      color: inherit;
      text-shadow: inherit;
    }
    92% {
      color: #333;
      text-shadow: none;
    }
    92.5% {
      color: inherit;
      text-shadow: inherit;
    }
  }

<div fxLayout="row" style="padding-top: 4em;padding-bottom: 7em;">
  <div fxLayout="column" fxFlex="80" fxFlexOffset="10" >
    <div >
      <div class="logo"><b><span>Bist&nbsp;</span>du&nbsp;<span>bereit&nbsp;</span><span>für&nbsp;</span><span>deine&nbsp;</span><span>nächste&nbsp;</span>Session?</b></div>
    </div>
    <div>
      <div class="logo"><b><span>7</span>/<span>24</span></b></div>
    </div>
  </div>
</div>

!How does it look?

Answer 1

  .logo b span{
    diplay:inline-block;
    animation: blink linear infinite 2s;
  }