* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* latin-ext */
@font-face {
  font-family: 'Clicker Script';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/clickerscript/v13/raxkHiKPvt8CMH6ZWP8PdlEq71rR0TukKQ.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Clicker Script';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/clickerscript/v13/raxkHiKPvt8CMH6ZWP8PdlEq71rf0Ts.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  

  
  .message {
    font-weight: bold;
    font-size: 3rem;
    color: white;
    white-space: break-word;
    text-align: center;
    color: transparent;
    background: #333;
    font-family: "Clicker Script", cursive;
    display: flex;
    align-items: center;
    justify-content: left;    
    padding: 0.5rem;
    
  }
  
  .breathe:nth-of-type(1) {
    -webkit-animation-delay: 0.125s;
            animation-delay: 0.125s;
    text-shadow: -21px 0 20px;    
  }
  
  .breathe:nth-of-type(2) {
    -webkit-animation-delay: 0.25s;
            animation-delay: 0.25s;
    text-shadow: -18px 0 20px;
  }
  
  .breathe:nth-of-type(3) {
    -webkit-animation-delay: 0.375s;
            animation-delay: 0.375s;
    text-shadow: -15px 0 20px;
  }
  
  .breathe:nth-of-type(4) {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
    text-shadow: -12px 0 20px;
  }
  
  .breathe:nth-of-type(5) {
    -webkit-animation-delay: 0.625s;
            animation-delay: 0.625s;
    text-shadow: -9px 0 20px;
  }
  
  .breathe:nth-of-type(6) {
    -webkit-animation-delay: 0.75s;
            animation-delay: 0.75s;
    text-shadow: -6px 0 20px;
  }
  
  .breathe:nth-of-type(7) {
    -webkit-animation-delay: 0.875s;
            animation-delay: 0.875s;
    text-shadow: -3px 0 20px;
  }
  
  .breathe:nth-of-type(8) {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    text-shadow: 0px 0 20px;
  }
  
  .breathe:nth-of-type(9) {
    -webkit-animation-delay: 1.125s;
            animation-delay: 1.125s;
    text-shadow: 3px 0 20px;
  }
  
  .breathe:nth-of-type(10) {
    -webkit-animation-delay: 1.25s;
            animation-delay: 1.25s;
    text-shadow: 6px 0 20px;
  }
  
  .breathe:nth-of-type(11) {
    -webkit-animation-delay: 1.375s;
            animation-delay: 1.375s;
    text-shadow: 9px 0 20px;
  }
  
  .breathe:nth-of-type(12) {
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
    text-shadow: 12px 0 20px;
  }
  
  .breathe:nth-of-type(13) {
    -webkit-animation-delay: 1.625s;
            animation-delay: 1.625s;
    text-shadow: 15px 0 20px;
  }
  
  .breathe:nth-of-type(14) {
    -webkit-animation-delay: 1.75s;
            animation-delay: 1.75s;
    text-shadow: 18px 0 20px;
  }
  
  .breathe:nth-of-type(15) {
    -webkit-animation-delay: 1.875s;
            animation-delay: 1.875s;
    text-shadow: 21px 0 20px;
  }
  
  .breathe:nth-of-type(16) {
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    text-shadow: 24px 0 20px;
  }
  .breathe:nth-of-type(17) {
    -webkit-animation-delay: 2.125s;
            animation-delay: 2.125s;
    text-shadow: 27px 0 20px;
  }
  .breathe:nth-of-type(18) {
    -webkit-animation-delay: 2.25s;
            animation-delay: 2.25s;
    text-shadow: 30px 0 20px;
  }
  .breathe:nth-of-type(19) {
    -webkit-animation-delay: 2.375s;
            animation-delay: 2.375s;
    text-shadow: 33px 0 20px;
  }
  .breathe:nth-of-type(20) {
    -webkit-animation-delay: 2.5s;
            animation-delay: 2.5s;
    text-shadow: 37px 0 20px;
  }
  .breathe:nth-of-type(21) {
    -webkit-animation-delay: 2.625s;
            animation-delay: 2.625s;
    text-shadow: 40px 0 20px;
  }
  .breathe:nth-of-type(22) {
    -webkit-animation-delay: 2.75s;
            animation-delay: 2.75s;
    text-shadow: 43px 0 20px;
  }
  .breathe:nth-of-type(23) {
    -webkit-animation-delay: 2.875s;
            animation-delay: 2.875s;
    text-shadow: 47px 0 20px;
  }
  .breathe:nth-of-type(24) {    
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
    text-shadow: 50px 0 20px;    
  }
  .breathe:nth-of-type(25) {    
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
    text-shadow: 50px 0 20px;    
  }
  
  @-webkit-keyframes breathe {
    12.5% {
      color: whitesmoke;
    }
  }
  
  @keyframes breathe {
    12.5% {
      color: whitesmoke;
    }
  }
  .breathe {
    -webkit-animation: breathe 8s ease infinite;
            animation: breathe 8s ease infinite;
  }
  
  .sandeep {
    background: linear-gradient(to top left, red, yellow);
    -webkit-background-clip: text;
    font-size: 3rem;
    text-indent: 1rem;
  }

  
  
  @media screen and (max-width: 768px) {
    .breathe {
      font-size: 5rem;
    }
  }