@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Inconsolata:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');

:root {
	/* --blob-w : 70px;
	--blob1-w : 90px;
	--blob2-w : 100px;
	--blob3-w : 110px; */

	--blob-w : 90px;
	--blob1-w : 110px;
	--blob2-w : 120px;
	--blob3-w : 130px;
}

.ai-h1 {
	position: relative;
	font-size: 12px;
	font-family: 'Arvo', sans-serif;
	font-weight: 400;
	text-align: center;
	line-height: 7;
	overflow: hidden;
	background: linear-gradient(90deg, #ffffff50, #ffffff99, #ffffff50);
	background-repeat: no-repeat;
	background-size: 60%;
	animation: animate 3s linear infinite;
	background-clip: text;
	-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
   
   @keyframes animate {
	 0% {
	   background-position: -1000%;
	 }
	 100% {
	   background-position: 1000%;
	 }
   }
   
   .blob {
	   width: var(--blob-w);
	   height: var(--blob-w);
	   position: absolute;
	   top: 50%;
	   left: 50%;
	   transform: translate(-50%, -50%);
	   background: linear-gradient(45deg, #665fbeec 0%, #66de96f5 100%);
	   box-shadow: 0 0 200px 0 rgba(255, 0, 153, 0.7), 0 0 50px 0 rgba(48, 35, 174, 0.7);
	   /* background: linear-gradient(45deg, #3023ae 0%, #ff0099 100%);
	   box-shadow: 0 0 200px 0 rgba(255, 0, 153, 0.7), 0 0 50px 0 rgba(48, 35, 174, 0.7); */
	 background-size: 150% 150%;
	   animation: ai-blob 3s, gradient 12s;
	 animation-iteration-count: infinite;
	 animation-timing-function: linear;
	   z-index:4;
   }
   
   .blob1 {
	   width: var(--blob1-w);
	   height: var(--blob1-w);
	   position: absolute;
	   top: 50%;
	   left: 50%;
	   transform: translate(-50%, -50%);
	   background-color: #3E29C120;
	   animation: ai-blob 4s linear infinite;
	 animation-direction: reverse;
	   z-index:3;
   }
   
   .blob2 {
	   width: var(--blob2-w);
	   height: var(--blob2-w);
	   position: absolute;
	   top: 50%;
	   left: 50%;
	   transform: translate(-50%, -50%);
	   background-color: #E3117C20;
	   animation: ai-blob 5s linear infinite;
	   z-index:2;
   }
   
   .blob3 {
	   width: var(--blob3-w);
	   height: var(--blob3-w);
	   position: absolute;
	   top: 50%;
	   left: 50%;
	   transform: translate(-50%, -50%);
	   background-color: #7B20A820;
	   animation: ai-blob 3.5s linear infinite;
	   z-index:1;
   }
   
   @keyframes ai-blob {
	   0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
	   20% { border-radius: 60% 40% 40% 60% / 60% 25% 75% 40%; }
	   40% { border-radius: 70% 30% 65% 35% / 80% 45% 55% 20%; }
	   60% { border-radius: 30% 70% 70% 30% / 20% 30% 70% 80%; }
	   80% { border-radius: 40% 60% 40% 60% / 70% 55% 45% 30%; }
	   100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
   }
   
   @keyframes gradient {
	   0% {
		   background-position: 0% 50%;
	   }
	   50% {
		   background-position: 100% 50%;
	   }
	   100% {
		   background-position: 0% 50%;
	   }
   }

@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}

.rainbow {
	position: relative;
	z-index: 0;
	width: 400px;
	height: 300px;
	border-radius: 10px;
	overflow: hidden;
	padding: 2rem;
	
	&::before {
		content: '';
		position: absolute;
		z-index: -2;
		left: -50%;
		top: -50%;
		width: 200%;
		height: 200%;
		background-color: #399953;
		background-repeat: no-repeat;
		background-size: 50% 50%, 50% 50%;
		background-position: 0 0, 100% 0, 100% 100%, 0 100%;
		background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
		animation: rotate 4s linear infinite;
	}
	
	&::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 6px;
		top: 6px;
		width: calc(100% - 12px);
		height: calc(100% - 12px);
		background: white;
		border-radius: 5px;
		
	}
}