abdullahtarawneh.com/content/support/style.scss

main.support {
	line-height: 1.728;
	.container {
		max-width: 80ch;
		@media (min-width: 60rem) {
			padding-inline: 0
		}
	}
	
	.donation-links {
		padding-inline-start: 0;
		list-style: none;
		display: flex;
		flex-flow: row wrap;
		margin-block: 3rem;
		justify-content: space-around;
		gap: 1rem;
		li {
			display: contents;
		}
		a {
			flex-basis: 13rem;
			display: grid;
			text-decoration: none;
			place-items: center;
			text-align: center;
			gap: 1rem;
			svg {
				width: 100%;
				height: 4rem;
			}
			span {
				font-weight: bold;
			}
			background: var(--color-accent);
			padding: 2rem;
			color: white;
			border-radius: 1rem;
			box-shadow: 0px 4px 4px hsl(150, 80%, 30%);
			&:hover {
				background-color: var(--color-highlight-weak);
				box-shadow: 0px 2px 2px hsl(210, 80%, 50%)
			}
		}
	}

	.quote {
		margin: 0;
		margin-inline-start: 1rem;
		margin-block: 1rem;
		padding: 1rem;
		padding-inline-start: 2.5rem;
		position: relative;
		border-radius: 2rem;
		border-start-start-radius: 0;
		background: var(--color-highlight);
		color: var(--color-button-text);
		&:before {
			content: '';
			position: absolute;
			border-style: solid;
			border-width: 0rem 1rem 1rem 0;
			border-color: transparent var(--color-highlight) transparent transparent;
			left: -1rem;
			top: 0;
		}
		blockquote {
			margin: 0;
			margin-block-start: 0.5rem;
			p {
				margin: 0;
			}
			&:before {
				content: '“';
				position: absolute;
				top: -0.75rem;
				left: 0.5rem;
				font-size: 3rem;
				font-family: serif;
			}
		}
		figcaption {
			cite {
				&:before {
					content: '— ';
				}
			}
		}
	}
}