body {
serif;
	font-size: calc(18vw + .5rem);
	height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 1) 0%,
		rgba(19, 19, 17, 1) 100%
	);
}



#metal {background-image: url("https://images.unsplash.com/photo-1612058237353-6213b412a1c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
	background-size: contain;
	background-clip: text;
	-webkit-background-clip: text;
  animation-name: metal;
  animation-duration: 10s;
  animation-iteration-count: infinite;}

#glass {background-image: url("https://plus.unsplash.com/premium_photo-1675526090845-a8b982cabae6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
	background-size: contain;
	background-clip: text;
	-webkit-background-clip: text;    animation-name: glass;
  animation-duration: 10s;
  animation-iteration-count: infinite;}

#plastic {background: url("https://images.unsplash.com/photo-1605707159327-f43132f89a5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80");
	background-size: contain;
	background-clip: text;
	-webkit-background-clip: text;
text-align: center;   animation-name: metal;
  animation-duration: 10s;
  animation-iteration-count: infinite;}


p {margin: 0px; color: transparent;
font-size: 100px; font-family: "Open Sans", sans-serif;   font-weight: bold;
	text-shadow: 0 4px 4px rgba(0, 0, 0, .25);text-transform: uppercase;
text-align: center;}

@keyframes metal {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 200px;
  }
    100% {
    background-position: 0 0;
  }
}

@keyframes glass {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -200px;
  }
    100% {
    background-position: 0 0;
  }
}

@keyframes plastic {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 200px;
  }
    100% {
    background-position: 0 0;
  }
}