.background{
	background-color: black;
	width: 1500px;
	height: 800px;
	position: relative;
	animation-name: background1;
	animation-duration: 5s;
	animation-iteration-count: infinite;

}
.text{
	color: transparent;
	font-family: futura;
	font-style: italic;
	font-size: 35px;
	text-align: center;
	animation-name: text1;
	animation-duration: 5s;
	animation-iteration-count: infinite;

	-webkit-text-stroke: 1px #80000;


}
.shape{
	width:10px;
	height: 50px;
	background-color: white;
	animation-name: shape1;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

@keyframes background1{
	0% {background-color: red;}
	25%{background-color: orange;}
	50%{background-color: yellow;}
	75%{background-color: lightgreen;}
	85%{background-color: powderblue;}
	90%{background-color: purple;}
	100%{background-color: red;}
}

@keyframes text1{
	0%{color: transparent;}
	25%{color: yellow;}
	50%{color: lightgreen;}
	75%{color: red;}
	85%{color: orange;}
	100%{color: powderblue;}
}
::-webkit-scrollbar { 
       display: none; 
    }

@keyframes shape1{
	0%{top: 200px;}
	25%{top: 300px;}
	50%{top: 400px;}
	75%{top: 500px;}
	100%{top: 600px;}
}


p {
  width: 600px;
  margin: 30px auto;
}
.element {   
  
  color: white;
  width: 1500px; 
  height: 1000px;
  margin: 30px auto;
  text-align: justify;
  shape-inside: polygon(400px 0, 400px 0, 400px 400px, 0px 400px);
  shape-padding: 20px;
  transition: all 2s ease; 
  -webkit-clip-path: polygon(400px 0, 400px 0, 400px 400px, 0px 400px);
  opacity: .6;
} 
.element:hover {
  shape-inside: polygon(0 0,  1500px 0, 1080px 900px, 480px 900px);
  -webkit-clip-path:  polygon(0 0,  1500px 0, 1080px 900px, 480px 900px);
 /* shape-inside: circle(50%, 50%, 50%);
  -webkit-clip-path: circle(50%, 50%, 50%); */
}