/* .bg-5{
    
       background: linear-gradient(135deg, rgb(227, 227, 227) 0%, rgb(93, 104, 116) 100%);
    
     }
    
     
    
    .animated-shadow {
    
      color: #ffffff;
    
      font: normal 5rem Varela Round, sans-serif;
    
      height: 55%;
    
      left: 0;
    
      letter-spacing: 2px;
    
      text-align: center;
    
      text-transform: uppercase;
    
      width: 100%;
    
      animation: move linear 2000ms infinite;
    
      z-index: 2
    
    }
    
    /*Animación para rotar las sombras*/
    /*
    @keyframes move {
    
      0% {
    
        text-shadow:
    
          4px -4px 0 #1d0a85,
    
          3px -3px 0 #200ebd,
    
          2px -2px 0 #190c8d,
    
          1px -1px 0 #02085e,
    
          -4px 4px 0 #e2e7e7,
    
          -3px 3px 0 #c0c5c5,
    
          -2px 2px 0 #cacfcf,
    
          -1px 1px 0 #bfc2c2
    
        ;
    
      }
    
      25% {
    
        text-shadow:
    
          -4px -4px 0 #13f1fc,
    
          -3px -3px 0 #13f1fc,
    
          -2px -2px 0 #13f1fc,
    
          -1px -1px 0 #13f1fc,
    
          4px 4px 0 #da0641,
    
          3px 3px 0 #da0641,
    
          2px 2px 0 #da0641,
    
          1px 1px 0 #da0641
    
        ;
    
      }
    
      50% {
    
        text-shadow:
    
          -4px 4px 0 #da0641,
    
          -3px 3px 0 #da0641,
    
          -2px 2px 0 #da0641,
    
          -1px 1px 0 #da0641,
    
          4px -4px 0 #13f1fc,
    
          3px -3px 0 #13f1fc,
    
          2px -2px 0 #13f1fc,
    
          1px -1px 0 #13f1fc
    
        ;
    
      }
    
      75% {
    
        text-shadow:
    
          4px 4px 0 #13f1fc,
    
          3px 3px 0 #13f1fc,
    
          2px 2px 0 #13f1fc,
    
          1px 1px 0 #13f1fc,
    
          -4px -4px 0 #da0641,
    
          -3px -3px 0 #da0641,

          -2px -2px 0 #da0641,
    
          -1px -1px 0 #da0641
    
        ;
    
      }
    
      100% {
    
        text-shadow:
         4px -4px 0 #da0641,
    
          3px -3px 0 #da0641,
    
          2px -2px 0 #da0641,
    
          1px -1px 0 #da0641,
    
          -4px 4px 0 #13f1fc,
    
          -3px 3px 0 #13f1fc,
    
          -2px 2px 0 #13f1fc,
    
          -1px 1px 0 #13f1fc
    
        ;
    
      }
    
    }
    

    @media  (max-width: 480px) {
        
    .bg-5 .animated-shadow {
    
        font: normal 1.5rem Varela Round, sans-serif; 
     width: 20%;
     height: 20%;
     left: 0;
     padding-left: 10rem;
       
     text-align: center;
   
       
          }
    }    */
 

    @import url('https://fonts.googleapis.com/css?family=Montserrat');
header {
	background-color: rgb(40, 41, 41);
}

.title5 {
	font-family: "Verdana";
	text-align: center;
	color: #FFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 70%;
	letter-spacing: 7px;
}

h1 {
	background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
	background-size: cover;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

 	text-transform: uppercase;
	font-size: 150px;
	line-height: .75;
	margin: 10px 0;
}




@media (max-width: 520px) {
  .title5 h1  {
    font-size:2.5rem;
    letter-spacing: 2px;
    

  }
}


 
/* styling my button */

.white-mode {
	text-decoration: none;
	padding: 7px 10px;
	background-color: #122;
	border-radius: 3px;
	color: #FFF;
	transition: .35s ease-in-out;
	position: absolute;
	left: 15px;
	bottom: 15px;
	font-family: "Montserrat";
}

.white-mode:hover {
	background-color: #FFF;
	color: #122;
}