Template:Reagent card/styles.css

.reagent-card {
	--border-size: 2px;
	min-width: 20rem;
	border: var(--border-size) solid var(--border-color-light-x2);
}

.reagent-card-header {
	text-align: center;
    font-weight: bold;
    font-size: large;
    /* negate border */
    --margin: calc(var(--border-size) * -1); 
    margin: var(--margin);
    margin-bottom: 0;
}

.reagent-card-spoiler-section-label {
	user-select: none;
	font-size: medium;
}

.reagent-card-spoiler-section-label,
.reagent-card-spoiler-section {
	margin: 0;
}

.reagent-card-spoiler-section + .reagent-card-text-section {
	margin-top: 0.4em;
}

.reagent-card-text-section,
.reagent-card-spoiler-section {
	color: lightgray;
	margin: 0 0.5em;
}

.reagent-card-spoiler-section-label::before {
    --wh-ratio: 1.5;
    --w: 0.9em;
    --h: calc(var(--w) / var(--wh-ratio));
    content: "";
    background-image: url("/w/images/1/12/Inverted_triangle.svg");
    display: inline-block;
    background-size: cover;
    width: var(--w);
    height: var(--h);
    margin: 0 0.1em;
    transition: transform 60ms ease;
}

.cursive {
	font-style: italic;
}