@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize foundation;

@layer attributes {

	.attributes {
		position: absolute;
		top: 80%;
		left: 40%;
		z-index: 1;
	}
	.attribute {
		--font-size: 2rem;
		--hue: 10;
		--ox: 0;
		--oy: 0;
		--dx: 0;
		--dy: 0;
		--or: 0;
		--dr: 0;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-size: var(--font-size);
		border: 1px solid hsl(var(--hue) 100% 80%);
		padding: 8px 14px !important;
		border-radius: 14px;
		position: absolute;
		bottom: 0%;
		left: 0%;
		translate: 0% 0%;
		background: #000000;
		color: hsl(var(--hue) 100% 40% / 0.8);
		box-shadow: 1px -1px 0.5rem 0rem hsl(var(--hue) 100% 30%) inset;
		transform: translate(var(--ox), var(--oy)) rotate(var(--or))
	}

	.attribute:nth-of-type(1) {
		--hue: 10;
		--ox: 10%;
		--oy: 0%;
		--or: 7deg;
	}
	.attribute:nth-of-type(2) {
		--hue: 60;
		--ox: 10%;
		--oy: -5%;
		--or: 12deg;
	}
	.attribute:nth-of-type(3) {
		--hue: 180;
		--ox: -20%;
		--oy: -23%;
		--or: -10deg;
	}
	.attribute:nth-of-type(4) {
		--hue: 120;
		--ox: -13%;
		--oy: 6%;
		--or: 15deg;
	}
	.attribute:nth-of-type(5) {
		--hue: 210;
		--ox: -21%;
		--oy: 18%;
		--or: 10deg;
	}
	.attribute:nth-of-type(6) {
		--hue: 280;
		--ox: 15%;
		--oy: 5%;
		--or: -8deg;
	}

	.attribute svg {
		width: var(--font-size);
		stroke-width: 2;
	}
}

.gsap-text {
  position: relative;
  width: 100%;
  height: 30vh;
}
.gsap-text.meme {
	position: relative;
	width: 100%;
	height: 120px;
  }
.gsap-text .scroll {
  width: 100%;
  display: flex;
}
.gsap-text .scroll div {
  color: #000;
  font-size: 4em;
  font-weight: 900;
  white-space: nowrap;
  text-transform: uppercase;
  animation: animate 40s linear infinite;
  animation-delay: -40s;
}
.gsap-text .scroll div:nth-child(2) {
  animation: animate2 40s linear infinite;
  animation-delay: -20s;
}
.gsap-text .scroll div span {
  -webkit-text-stroke: 2px #000;
  color: transparent;
}
@keyframes animate {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate2 {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-200%);
  }
}
.gsap-text .scroll.text1 {
  transform: rotate(2deg) translateY(200px) translateX(-200px);
}
.gsap-text .scroll.text2 {
	transform: none;
	padding-top: 20px;
  }
.meme-chart { margin: -.5em auto; text-align:center; width: 90%; height: 390px }