@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;
	}
}