<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<div class="main">
	<div class = "border">
		<div class = "inner-cutout"> 
			<h1 class="knockout">Some Beach <br> Somewhere</h1>
		</div>
	</div>
</div>

html{
	background-color:#ff6f69;
	background: radial-gradient(#ff6f69, #ff8b87);

/*	background-image:url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Fcdn-image.travelandleisure.com%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1600x1000%2Fpublic%2F1479854258%2Fkahaluu-bay-kona-big-island-hawaii-WRLDSNST1122.jpg%3Fitok%3DSFMX3uUf&w=800&q=85');
	background-repeat: no-repeat;
    background-size: 100%;
	background-position:50% 50%;*/
}

.border{
	padding: 5px;
		background: linear-gradient(110deg, #ffeead 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #C5E7D7 34%, #88d8b0 34%);
	background-size: 400% 400%;
	height: 400px;
	background-position: 25% 50%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 5s ease infinite;
}
.inner-cutout{
	padding: 40px 0;
	display: block;
	background-color:#ff6f69;/*#ff6f69*/
		
	margin: 2%;
	padding-bottom: 40px;
	height: 300px;
	background: radial-gradient(#ff6f69, #ff8b87);
	 background-size: 300%;
	background-position:50% 50%;

}
.knockout {
	
	vertical-align: middle;
	text-align: center;
	font-family: 'Pacifico', cursive;
	font-size:50pt;
	color: blue;
	color: #fff;
	background: linear-gradient(110deg, #ffeead 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #C5E7D7 34%, #88d8b0 34%);
	background-size: 400%;
	 -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.knockout{
		animation: Gradient 5s ease infinite;
		-webkit-animation: Gradient 15s ease infinite;
		-moz-animation: Gradient 5s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 30% 50%
	}
	50% {
		background-position: 25% 50%
	}
	100% {
		background-position: 30% 50%
	}
	
}



.main{
	width: 500px;
	height: 800px;
	margin-left: 40%;
	margin-right:40%;
	margin-top: 10%;
}