.container{
    margin: .1px;
    width: 95%;
    background-color: whitesmoke;
    height: 100%;
    overflow: hidden;
  }
  .ml6 {
    
    font-weight: 900;
    font-size: 3.667vw;
    width: 90vw;
    margin-left: -70vw;
  }
  
  .ml6 .text-wrapper {
    
    display: inline-block;
    padding-top: 0.2em;
    padding-right: 0.05em;
    padding-bottom: 0.1em;
    margin-right: 5em;
    overflow: hidden;
  }
  
  .ml6 .letter {
    display: inline-block;
    line-height: 1em;
    color: #bd5858;
    text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
    text-size-adjust: auto;
    
  }
 


  html, body {
    overflow: hidden;
    width:fit-content;
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
 
  }
  
  .row{
    display: flex;
    overflow: hidden;
  }
  
  .row:nth-child(even) .brick:first-child, .row:nth-child(even) .brick:last-child{
    width: 70px;
    
  }
  
  .brick{
    width: 150px;
    height: 50px;
    background-color: #bd5858;
    border-radius: 5px;
    margin: 2px;
    border: 2px solid black;
  }
  .wrapper {
    width: 92%;
    margin:auto;
    font-size: 1em;
    line-height: 1.3;
  }
  .wrecker {
    display: block;
    width: 300px;
    height:300px;
    float: left;
    background-color: black;
    border-radius: 50%;
    position:relative;
    animation: wreckit ease-in-out 7s;
    animation-fill-mode: forwards;
    color: white;
    z-index: 1;
  }
  .wrecker:before {
    content: " ";
    background-color: white;
    width: 50px;
    height: 35px;
    display: block;
    border-radius: 50%;
    transform: rotate(-30deg);
    opacity: 0.5;
    top: 50px;
    left: 75px;
    position: absolute;
    color: white;
  }
  .wrecker:after {
    content: " ";
    background-color: black;
    width: 5px;
    height: 700px;
    display: block;
    top: -700px;
    left: 50%;
    position: absolute;
    color: white;
    
  }

  .letters2, .letters3 {
    display: inline-block;
    line-height: 1em;
    color: black;
    text-shadow: 0 0 1px #bd5858, 0 0 1px #bd5858, 0 0 1px #bd5858, 0 0 1px #bd5858;
    
  }
  .explodingrows {
    margin-top: -23.5em;
    margin-left: 20em;

  }
  .explodingrows .row {
    
  }
 .brick1 {
    position: absolute;
    animation: move 18s;
    animation-delay: 200ms;

  }

  @keyframes move {
    0% {
      left: 10px;
      top: 10px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(0deg);
    }
    25% {
      left: 565px;
      top: -250px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(85deg);
    }
    50% {
      left: calc(100% - 50px);
      top: -650px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(230deg);
    }
    75% {
      left: 100px;
      top: -750px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(352deg);
    }
  }

  .brick2 {
    position: absolute;
    animation: move2 18s;
    animation-delay: 200ms;

  }

  @keyframes move2 {
    0% {
      left: 10px;
      top: 10px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(0deg);
    }
    25% {
      left: 565px;
      top: -150px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(83deg);
    }
    50% {
      left: calc(100% - 50px);
      top: -550px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(220deg);
    }
    75% {
      left: 100px;
      top: -950px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(323deg);
    }
  }

  .brick3 {
    position: absolute;
    animation: move3 18s;
    animation-delay: 200ms;

  }

  @keyframes move3 {
    0% {
      left: 10px;
      top: 10px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(0deg);
    }
    25% {
      left: 465px;
      top: -100px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(80deg);
    }
    50% {
      left: calc(100% - 40px);
      top: -450px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(210deg);
    }
    75% {
      left: 100px;
      top: -400px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(312deg);
    }
  }

  .brick4 {
    position: absolute;
    animation: move4 18s;
    animation-delay: 200ms;

  }

  @keyframes move4 {
    0% {
      left: 10px;
      top: 300px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(0deg);
    }
    25% {
      left: 465px;
      top: 100px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(77deg);
    }
    50% {
      left: calc(100% - 40px);
      top: -300px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(200deg);
    }
    75% {
      left: 100px;
      top: -200px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(292deg);
    }
  }
  .brick5 {
    position: absolute;
    animation: move5 18s;
    animation-delay: 200ms;

  }

  @keyframes move5 {
    0% {
      left: 10px;
      top: 10px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(0deg);
    }
    25% {
      left: 465px;
      top: 500px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(75deg);
    }
    50% {
      left: calc(100% - 40px);
      top: 600px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(190deg);
    }
    75% {
      left: 100px;
      top: 800px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(272deg);
    }
  }

  .brick6 {
    position: absolute;
    animation: move6 19s;
    animation-delay: 200ms;

  }

  @keyframes move6 {
    0% {
      left: 10px;
      top: 10px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(0deg);
    }
    25% {
      left: 465px;
      top: 400px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(72deg);
    }
    50% {
      left: calc(100% - 40px);
      top: 500px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(180deg);
    }
    75% {
      left: 100px;
      top: 700px;
      background-color: #bd5858;
      border: 2px solid black;
      transform:rotate(252deg);
    }
  }

  @keyframes wreckit {
    0% {
      margin-left: -100%;
      shape-outside: circle( 150px at -850px 150px);
    }
 
    100%{
        margin-left: 85%;
        shape-outside: circle( 150px at 1150px 150px);
      }

    
  }