.exp-header {
	font-family: "Header";
	cursor: pointer;

	text-align: right;
	padding: 0 0.5em 0 0;

	border-bottom: 2px solid;

	transition: 0.6s background-color;
}

.exp-block {
	overflow: hidden;
	text-align: right;

	max-height: 0;
	padding: 0 0.5em 0 0.5em;

	border-bottom: 0px solid;

	transition: 2s max-height, 2s padding, 2s border-bottom;
}

.exp-border-wrapper {
	border-left: 2px solid;
	border-right: 2px solid;
}

.exp-block.exp {
	max-height: 20em; 
	padding: 0.25em 0.5em 0.5em 0.5em;
	border-bottom: 2px solid;
}

.exp-options-block {
	display: flex;
	text-align: center;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;

	font-family: "Bold";
}

.exp-option {
	margin-right: 1em;

	cursor: pointer;
	opacity: 0.6;

	transition: 0.3s opacity;
}

.exp-option.active {
	opacity: 1;
}

/* Color-specific */

/* -- Blue -- */

@keyframes bheaderflash {
	from { background-color: #869BDA; color: var(--blue-background); }
	to { background-color: rgba(14, 21, 44, 0.6); color: var(--blue-text-dark); }
}

[data-color="blue"] .exp-container {
	color: var(--blue-text-dark);
}

[data-color="blue"] .exp-header {
	background-color: rgba(14, 21, 44, 0.6);
}

[data-color="blue"] .exp-block {
	background: linear-gradient(145deg, #090E1D 0%, rgba(14, 21, 44, 0.6) 60%, #090E1D 100%);
}

[data-color="blue"] .exp-border-wrapper {
	border-right-color: rgba(89, 116, 204, 0.8);
	border-left-color: rgba(164, 180, 227, 0.8);
}

[data-color="blue"] .exp-header,
[data-color="blue"] .exp-block {
	border-image: linear-gradient(to right, rgba(164, 180, 227, 0.8) 0%, rgba(89, 116, 204, 0.8) 100%) 1;
}

[data-color="blue"] .exp-header:hover {
	background-color: rgba(14, 21, 44, 1);
}

[data-color="blue"] .exp-header.anim {
	animation: 1s bheaderflash;
}

/* -- Orange -- */

@keyframes oheaderflash {
	from { background-color: #FFAA22; color: #0E0900; }
	to { background-color: rgba(0, 0, 0, 0.4); color: #FFAA22; }
}

[data-color="orange"] .exp-border-wrapper {
	border-color: rgba(255, 170, 34, 0.8);
}

[data-color="orange"] .exp-header {
	background-color: rgba(0, 0, 0, 0.6);
}

[data-color="orange"] .exp-block {
	background-color: rgba(0, 0, 0, 0.4);
}

[data-color="orange"] .exp-header:hover {
	background-color: rgba(255, 170, 34, 0.1);
}

[data-color="orange"] .exp-header.anim {
	animation: 1s oheaderflash;
}