.name.svelte-okleam {
		font-weight: bold;
		font-size: 0.8rem;
	}

	.affirmation.svelte-okleam {
		--accent: var(--on-surface);
		--bg-opacity: 0.5;
		--bg-color: var(--surface-color-primary);
		--delay: 0ms;
		border-radius: 5px;

		gap: var(--gap-medium-related-blocks);

		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
		position: relative;
		padding: 1rem 2rem;
		width: auto;
		height: auto;
		/* max-width: 30%; */
		/* flex: 1; */

		/* width: 100%; */

		transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.31, 1.26);
	}

	/* (empty) .affirmation.odd {
		/* flex: 0; *\/
		/* max-width: 20%; *\/
	}*/

	.affirmation.svelte-okleam :where(.svelte-okleam) {
		color: var(--accent);
	}

	.affirmation.svelte-okleam:before,
	.affirmation.svelte-okleam:after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		z-index: -1;
	}

	.affirmation.svelte-okleam:before {
		background: var(--bg-color);
		opacity: var(--bg-opacity);
	}

	.affirmation.svelte-okleam:after {
		left: -1px;
		top: -1px;
		width: calc(100% + 2px);
		height: calc(100% + 2px);
		z-index: -2;
	}

	.affirmation.svelte-okleam:hover {
		transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.31, 1.26);
		transform: scale(1.025);
	}

	.affirmation.link.svelte-okleam {
		cursor: pointer;
	}

	.info.svelte-okleam {
		z-index: 1;

		display: flex;
		flex-direction: column;
		gap: var(--gap-medium-related-blocks);
	}

	/* (unused) .bg-img {
		/* width: 100%; *\/
		height: auto;
		/* max-width: min(20dvw, 180px); *\/
		border-radius: 5px;

		object-fit: cover;

		position: absolute;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

		opacity: 0.1;

		object-fit: cover;
		mask-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
	}*/

	/* (unused) :hover .bg-img {
		opacity: 0.2;
		/* filter: brightness(0.5); *\/
	}*/

	.body.svelte-okleam {
		position: relative;
		line-height: 1.5;
	}

	.author.svelte-okleam {
		display: flex;
		align-items: center;
		gap: var(--gap-medium-related-blocks);
	}
	.profile-picture.svelte-okleam {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: var(--surface-color-primary);
		font-size: 0.7rem;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.profile-picture.svelte-okleam img:where(.svelte-okleam) {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: inherit;
	}

	/* push important ones forward */
	.affirmation[data-importance="max"].svelte-okleam,
	.affirmation[data-importance="above-average"].svelte-okleam {
		--accent: red;

		/* box-shadow: 10px 10px 50px 5px rgba(0, 0, 0, 0.5); */
		z-index: 1;
	}

	/* max importance */
	.affirmation[data-importance="max"].svelte-okleam {
		--accent: white;
		--bg-opacity: 0.9;
	}
	.affirmation.scalable[data-importance="max"].svelte-okleam {
		scale: 1;
	}

	.affirmation[data-importance="max"].svelte-okleam:hover {
		--bg-opacity: 1;
	}

	/* above average importance */

	.affirmation[data-importance="above-average"].svelte-okleam {
		--accent: var(--on-bg-active);
		--bg-opacity: 0.6;
		/* scale: 0.98; */
	}

	.affirmation[data-importance="above-average"].svelte-okleam:hover {
		--bg-opacity: 0.7;
	}

	/* regulars */
	/* (empty) .affirmation:not([data-importance]) {
		/* scale: 0.95; *\/
	}*/

	.affirmation.scalable.svelte-okleam:not([data-importance]) > .info:where(.svelte-okleam) {
		scale: 0.9;
	}

	.affirmation.svelte-okleam:not([data-importance]):hover .author:where(.svelte-okleam) {
		--accent: white;
	}

	/* control the size of the info box  */
	.info.svelte-okleam {
		max-width: 500px;
	}

	.affirmation.odd.svelte-okleam:not(.isShort) .info:where(.svelte-okleam) {
		max-width: 250px;
	}
	.affirmation.svelte-okleam:not(.odd) .info:where(.svelte-okleam) {
		max-width: 350px;
	}

	.svelte-okleam:not(.shy) .name:where(.svelte-okleam),
	.svelte-okleam:not(.shy) .body:where(.svelte-okleam),
	.svelte-okleam:not(.shy) .profile-picture:where(.svelte-okleam) :where(.svelte-okleam) {
		animation: svelte-okleam-enter 0.75s ease-out both var(--delay);
	}

	.shy.svelte-okleam .name:where(.svelte-okleam),
	.shy.svelte-okleam .body:where(.svelte-okleam),
	.shy.svelte-okleam .profile-picture:where(.svelte-okleam) :where(.svelte-okleam) {
		opacity: 0;
		animation: none;
	}

	@keyframes svelte-okleam-enter {
		from {
			opacity: 0;
		}
		to {
			opacity: initial;
		}
	}