:root{
		/*-- color --*/
		--cl-blue: 64, 106, 255;
		--cl-yellow: 255, 246, 0;
		--cl-green: 137, 255, 64;
		--cl-purple: 200, 0, 255;
		--cl-white: 239, 239, 239;
		--cl-black: 25, 25, 25;
}

body {
    background-color: rgba(var(--cl-white),1);
  
    font-family: 'Space Mono', monospace;
    height: 90vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
div{
    display: flex;
    justify-content: center;
    align-items: center;
}
p{
    height: 20px;
    font-size: 14px;
    width: fit-content;
    text-align: center;
    vertical-align: middle;
    color: rgba(var(--cl-white),1);
    background-color: rgba(var(--cl-black),1);
    padding-left: 16px;
    padding-right: 16px;
    
}

/*-------------------
BACKGROUND
-------------------*/
#background {
	width: 100vw;
	height: 100vh;
	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;

	z-index: -99;

}

#gradients-container {
	height: 100%;
	width: 100%;
	transform-origin: bottom right;

}

#g1,
#g2,
#g3,
#g4,
#interactive {
	position: absolute;
	/*-mix-blend-mode:overlay;-*/

	/*-	will-change: transform, opacity; -*/
}

#g1 {
	top: 20%;
	background: radial-gradient(rgb(var(--cl-purple), 1) 0, rgb(var(--cl-white), 0) 30%) no-repeat;

	transform-origin: top left;
	animation: moveR 35s infinite;

}

#g2 {
	background: radial-gradient(rgb(var(--cl-blue), 1) 0, rgb(var(--cl-white), 0) 30%) no-repeat;
	left: 10%;
	top: 5%;
	transform-origin: bottom left;
	animation: moveR 25s infinite;

}

#g3 {
	background: radial-gradient(rgb(var(--cl-green), 1) 0, rgb(var(--cl-white), 0) 30%) no-repeat;
	left: 10%;
	top: -10%;
	transform-origin: bottom left;

	animation: moveR 30s infinite;
}


#g4 {
	background: radial-gradient(rgb(var(--cl-yellow), 1) 0, rgb(var(--cl-white), 0) 30%) no-repeat;
	left: 25%;
	transform-origin: top left;

	animation: moveR 50s infinite;

}


/*-------------------
ANIMATIONS
-------------------*/

@keyframes moveR {


	0%,
	100% {

		width: 130%;
		height: 130%;
		opacity: 0.5;
		transform: rotate(0deg);
	}

	50% {
		width: 138%;
		height: 180%;
		opacity: 0.5;

		transform: rotate(10deg);
	}
}