body {
    background: linear-gradient(132deg, #ec5218, #1665c1);
    background-size: 400% 400%;
    animation: BackgroundGradient 3s ease infinite;
  }
  
  
  h1 {
    position: absolute;
    font-family: Montserrat, sans-serif;
    color: #fff;
    text-transform: uppercase;
    text-align: center;

  }



  h1:first-child {
        left: 50%;
        top: 40%;
        transform: translateX(-50%) translateY(-40%);
        font-weight: 800;
        font-size: 4em;
        letter-spacing: 26px;   
        animation: roll 1s linear ; 
  }

  h1:nth-child(2) {
    left: 50%;
    top: 60%;
    transform: translateX(-50%) translateY(-60%);
    font-weight: 500;
    letter-spacing: 6px;
  }

  a {
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translateX(-50%) translateY(-80%);
    font-weight: 600;
    letter-spacing: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 2em;
    font-family: Montserrat, sans-serif;

  }
  
  @keyframes BackgroundGradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
  }

  @keyframes roll {
    0% {
      font-size:0px;
      opacity:0;
      transform: rotate(-45deg)  translateX(-50%) translateY(-60%);
    }
    5% {
      font-size:inherit;
      opacity:1;
    }
    100% {
      font-size:4em;
      opacity:1;
    }
  
  }