:root {
	 --angle: 45deg;
	 --opacity: 0.5;
}
 *, *::before, *::after {
	 box-sizing: border-box;
}
 .rainbow {
	
	 border-radius: 20px;
	 padding: 126px 0;
	 margin: auto;
	 display: grid;
	 place-content: center;
	 text-align: center;
	 font-size: 1.5em;
	 --border-size: 0.3rem;
	 border: var(--border-size) dotted transparent;
	 background-image: linear-gradient(to right, #122516, #122516), conic-gradient(from var(--angle), #d53e33 0deg 90deg, #fbb300 90deg 180deg, #377af5 180deg 270deg, #399953 270deg 360deg);
	 background-origin: border-box;
	 background-clip: padding-box, border-box;
}

/* Animate when Houdini is available */
 @supports (background: paint(houdini)) {
	/* Hide the warning */
	 @property --opacity {
		 syntax: "<number>";
		 initial-value: 0.5;
		 inherits: false;
	}
	 @property --angle {
		 syntax: "<angle>";
		 initial-value: 0deg;
		 inherits: false;
	}
	 @keyframes opacityChange {
		 to {
			 --opacity: 1;
		}
	}
	 @keyframes rotate {
		 to {
			 --angle: 360deg;
		}
	}
	 .rainbow {
		 animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;
	}
	 .warning {
		 display: none;
	}
}
 html, body {
	 padding: 0;
	 margin: 0;

}
 body {
	 display: grid;
	 place-content: center;
	 gap: 0.5em;
	 text-align: center;
	 line-height: 1.42;
	 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}