* {
	box-sizing: border-box;
}

body {
  margin: 20px;
  background: #003;
  font-family: Mukta, sans-serif;
  font-size: 24px;

}
@keyframes size {

  0% {
	background-position: top left;
	  background-size: 300% 300%;
  }


  
  30% {
		background-position: top right;
	  background-size: 300% 300%;
	  }
	
  60% {
	background-position: bottom right;
	  background-size: 300% 300%;
  }

  70% {
	  background-position: top right;
	background-size: 300% 300%;
	}


  80% {
		background-position: top left;
		background-size: 200% 200%;
	  }
  100% {
		  background-position: top left;
		  background-size: 300% 300%;
		}

}

p {
	text-align: center;
	color: rgb(64, 64, 160);
	margin: 0;
}

.wrap {
	width: 90%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}

.el {
  width: 100%;
  min-height: 300px;
  max-width: 1200px;
  padding: 1rem;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;

  background-image: url(gradient.jpg);
  background-size: 120% 120%;
  background-position: center;
  background-repeat: no-repeat;
  /* background: #fff; */
  
  /* background: linear-gradient(to right, red, blue); */
	background-position-x: 0;
	animation: size 10s infinite ease-in-out;  

  mask-image: url(bunker.svg);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;

  -webkit-mask-image: url(bunker.svg);
-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;


  outline: 1px solid red;
}