Template:Memo/styles.css

.memorandum {
	position: relative;
	background-color: #fafac8;
	/* File:OOjs UI icon lightbulb-yellow.svg: https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_lightbulb-yellow.svg */
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a8/OOjs_UI_icon_lightbulb-yellow.svg);
	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 30px 30px;
	border-left: 5px solid #fae164;
	border-radius: 5px;
	margin: 5px auto;
	padding: 10px;
	box-sizing: border-box;
}

.memorandum.inline {
	display: inline-block;
}

.memorandum > .memo {
	position: relative;
	vertical-align: middle;
	margin-left: 50px;
	box-sizing: border-box;
}

.memorandum > .memo small {
	font-size: small;
}

.memorandum > .memo big {
	font-size: large;
}

@media (pointer: coarse) and (max-width: 600px) {
	.memorandum {
		background-position: center;
	}

	.memorandum::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: inherit;
		opacity: 0.5;
	}


	.memorandum > .memo {
		margin: 0;
	}
}