:root {
	 --color-background: #31037d;
	 --axis-x: 1px;
	 --axis-y: 1rem;
	 --delay: 10;
	 --color-black: #000;
	 --color-white: #fff;
	 --color-orange: #d49c3d;
	 --color-red: #d14b3d;
	 --color-violet: #cf52eb;
	 --color-blue: #44a3f7;
	 --color-green: #5acb3c;
	 --color-yellow: #debf40;
	 --color-foreground: var(--color-white);
	 --font-name: Righteous;
}
 html, body {
	 font-size: 24px;
}

 .c-rainbow {
	 counter-reset: rainbow;
	 position: absolute;
	 display: block;
	 list-style: none;
	 padding: 0;
  width: 10vw;
  height: 10vh;
	 margin-left:50%;
  margin-top:10%;
}
 .c-rainbow__layer {
	 --text-color: var(--color-foreground);
	 counter-increment: rainbow;
	 font-size: 3rem;
	 color: var(--text-color);
	 text-shadow: -1px -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px 1px 0 var(--color-black), 1px 1px 0 var(--color-black), 4px 4px 0 rgba(0, 0, 0, .2);
	 animation: rainbow 1.5s ease-in-out infinite;
}
 .c-rainbow__layer:nth-child(1) {
	 animation-delay: calc(1 / var(--delay) * 1s);
	 left: calc(var(--axis-x) * 1);
	 z-index: -10;
}
 .c-rainbow__layer:nth-child(2) {
	 animation-delay: calc(2 / var(--delay) * 1s);
	 left: calc(var(--axis-x) * 2);
	 z-index: -20;
}
 .c-rainbow__layer:nth-child(3) {
	 animation-delay: calc(3 / var(--delay) * 1s);
	 left: calc(var(--axis-x) * 3);
	 z-index: -30;
}
 .c-rainbow__layer:nth-child(4) {
	 animation-delay: calc(4 / var(--delay) * 1s);
	 left: calc(var(--axis-x) * 4);
	 z-index: -40;
}
 .c-rainbow__layer:nth-child(5) {
	 animation-delay: calc(5 / var(--delay) * 1s);
	 left: calc(var(--axis-x) * 5);
	 z-index: -50;
}
 .c-rainbow__layer:nth-child(6) {
	 animation-delay: calc(6 / var(--delay) * 1s);
	 left: calc(var(--axis-x) * 6);
	 z-index: -60;
}
 .c-rainbow__layer:nth-child(7) {
	 animation-delay: calc(7 / var(--delay) * 1s);
	 left: calc(var(--axis-x) * 7);
	 z-index: -70;
}
 .c-rainbow__layer:not(:first-child) {
	 position: absolute;
	 top: 0;
}
 .c-rainbow__layer--white {
	 --text-color: var(--color-white);
}
 .c-rainbow__layer--orange {
	 --text-color: var(--color-orange);
}
 .c-rainbow__layer--red {
	 --text-color: var(--color-red);
}
 .c-rainbow__layer--violet {
	 --text-color: var(--color-violet);
}
 .c-rainbow__layer--blue {
	 --text-color: var(--color-blue);
}
 .c-rainbow__layer--green {
	 --text-color: var(--color-green);
}
 .c-rainbow__layer--yellow {
	 --text-color: var(--color-yellow);
}
 @keyframes rainbow {
	 0%, 100% {
		 transform: translatey(var(--axis-y));
	}
	 50% {
		 transform: translatey(calc(var(--axis-y) * -1));
	}
}
 

.decor_bg
{
position: absolute;
width: 100vw;
	height: auto;
	opacity: 1;
	z-index:1;
	top:0;
}

@media (orientation: portrait) {
.decor_bg
{
	scale:3;
	}
	}



.particle {
	scale: 3;
	 width: 25px;
	 height: 25px;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	border-radius: 25px;
	 transform: translate(-50%, -50%);
	 pointer-events: none;
	 offset-distance: 0;
	 transition: offset-distance 2.6s cubic-bezier(0, 0.7, 0.3, 1);
	 z-index: -1;
}

#hp_half2:hover > .particle {
	 offset-distance: 50%;
}
 .particle:nth-of-type(0) {
	 offset-path: path("M 0, 0 q 176, -176, -27, 110 ");
	 background: #f34a4b;
}
 .particle:nth-of-type(1) {
	 offset-path: path("M 0, 0 q -185, 210, -245, 255 ");
	 background: #1f8932;
}
 .particle:nth-of-type(2) {
	 offset-path: path("M 0, 0 q -228, -179, 136, -197 ");
	 background: #611b23;
}
 .particle:nth-of-type(3) {
	 offset-path: path("M 0, 0 q -184, -219, -112, 229 ");
	 background: #c75550;
}
 .particle:nth-of-type(4) {
	 offset-path: path("M 0, 0 q -236, 249, -124, 138 ");
	 background: #bd9f30;
}
 .particle:nth-of-type(5) {
	 offset-path: path("M 0, 0 q 242, 218, 124, -131 ");
	 background: #946f50;
}
 .particle:nth-of-type(6) {
	 offset-path: path("M 0, 0 q 76, 157, -118, -55 ");
	 background: #e88126;
}
 .particle:nth-of-type(7) {
	 offset-path: path("M 0, 0 q 138, 134, 6, 0 ");
	 background: #cc9f2f;
}
 .particle:nth-of-type(8) {
	 offset-path: path("M 0, 0 q 212, 130, 122, -55 ");
	 background: #0c4edc;
}
 .particle:nth-of-type(9) {
	 offset-path: path("M 0, 0 q -147, 250, -178, -259 ");
	 background: #26230f;
}
 .particle:nth-of-type(10) {
	 offset-path: path("M 0, 0 q -11, -200, 229, 101 ");
	 background: #32f763;
}