/* @keyframes cube {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }
    to {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #eeeeee;
    overflow: hidden;
    z-index: -1;
}

.background li {
    position: absolute;
    top: 80vh;
    left: 45vw;
    width: 10px;
    height: 10px;
    border: solid 1px #d6d6d6;
    color: transparent;
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: cube 13s ease-in forwards infinite;
}

.background li:nth-child(0) {
    animation-delay: 0s;
    left: 57vw;
    top: 92vh;
}

.background li:nth-child(1) {
    animation-delay: 2s;
    left: 69vw;
    top: 17vh;
}

.background li:nth-child(2) {
    animation-delay: 4s;
    left: 75vw;
    top: 73vh;
    border-color: #ffffff;
}

.background li:nth-child(3) {
    animation-delay: 6s;
    left: 0vw;
    top: 65vh;
}

.background li:nth-child(4) {
    animation-delay: 8s;
    left: 88vw;
    top: 84vh;
}

.background li:nth-child(5) {
    animation-delay: 10s;
    left: 42vw;
    top: 7vh;
}

.background li:nth-child(6) {
    animation-delay: 12s;
    left: 94vw;
    top: 32vh;
    border-color: #ffffff;
}

.background li:nth-child(7) {
    animation-delay: 14s;
    left: 24vw;
    top: 48vh;
    border-color: #ffffff;
}

.background li:nth-child(8) {
    animation-delay: 16s;
    left: 37vw;
    top: 22vh;
}

.background li:nth-child(9) {
    animation-delay: 18s;
    left: 19vw;
    top: 56vh;
} */

body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

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