@font-face {font-family: "Bangers"; font-style: normal; font-weight: 400;
  src: url("fonts/Bangers/Bangers-Regular.ttf") format("truetype");}

/* Styling for Skep's Complaint Corner */
	.complaint-corner {
		position: relative;
        width: fit-content;
		margin: calc(40px + 2rem) auto;
		padding: 0 120px; /* Adjust based on image width */
		display: flex;
		align-items: center;
		text-align: center;
		font-family: "Bangers", Gabarito, sans-serif;
		font-size: 2.5em;
		font-weight: bold;
		background: linear-gradient(60deg, 
			#ff0000, #ff8000, #ffff00, #80ff00, 
			#00ff00, #00ff80, #00ffff, #0080ff, 
			#0000ff, #8000ff, #ff00ff, #ff0080
		);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 400% 100%;
		animation: rainbow-loop 10s linear infinite;
	}

	@keyframes rainbow-loop {
		0% { background-position: 0% 50%; }
		100% { background-position: 400% 50%; }
	}

	.complaint-corner::before,
	.complaint-corner::after {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		height: 150px;
		width: 100px;
		background-image: var(--complaint-image);
		background-size: contain;
		background-repeat: no-repeat;
	}

	.complaint-corner::before {
		left: 0;
	}

	.complaint-corner::after {
		right: 0;
		transform: translateY(-50%) scaleX(-1);
	}

@media (max-width: 900px) {
    .complaint-corner {
        font-size: 1.75em;
    }
}

@media (max-width: 500px) {
    .complaint-corner {
        padding-right: 0;
    }

    .complaint-corner::after {
        height: 0;
        width: 0;
        background-image: none;
    }
}

@media (max-width: 350px) {
    .complaint-corner {
        font-size: 1.5em;
        padding-left: 66px;
    }
    .complaint-corner::before {
		top: 50%;
		transform: translateY(-50%);
		height: 100px;
		width: 66px;
	}
}

@media (max-width: 250px) {
    .complaint-corner {
        font-size: 1.2em;
        padding-left: 0;
    }
    .complaint-corner::before {
		height: 0;
        width: 0;
        background-image: none;
	}
}