* {
    box-sizing: border-box;
} 

body {
    background-color: black;
}

img {
    max-width: 100%
}

.rectangle {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items:center;
}

.square1 {
    background: linear-gradient(-45deg, magenta, magenta, black, black, black, magenta, magenta);
    background-size: 500% 500%;
	background-repeat:repeat-x;
	animation: gradient 30s linear infinite;
	width: 130vh;
    height: 10vh;
    border-radius: 20pt;
	animation-fill-mode: forwards;
}

/* .square2 {
    background: linear-gradient(-45deg, #e73c7e, #e73c7e, black, black, black, #e73c7e, #e73c7e);
    background-size: 500% 500%;
	animation: gradient 30s ease-in-out infinite;
	width: 300px;
    height: 200px;
} */

@keyframes gradient {
	0% {
		background-position: 0%;
		opacity: 0;
	}

	20% {
		background-position: 50%;
	}
	40% {
		background-position: 150%;
	}

	50% {
		background-position: 200%;
		opacity: 1
	}

    60% {
		background-position: 250%;
	}

    80% {
		background-position: 325%;
	}

    100% {
		background-position: 400%;
		opacity: 0
	}
}