flair.css

:root {
	--color__base_100: 17, 17, 17;
	--color__base_200: 33, 33, 33;
	--color__base_300: 51, 51, 51;
	--color__base_400: 108, 108, 108;
	--color__base_500: 150, 150, 150;
	--color__base_600: 215, 215, 215;
	--color__base_700: 227, 227, 227;
	--color__base_800: 248, 243, 239;
	--color__base_900: 239, 239, 239;
	--type__size: 1.1rem;
}

/* 
@media (prefers-color-scheme: dark) {
	:root {
		--color__base_900: 17, 17, 17;
		--color__base_800: 33, 33, 33;
		--color__base_700: 51, 51, 51;
		--color__base_600: 108, 108, 108;
		--color__base_500: 150, 150, 150;
		--color__base_400: 215, 215, 215;
		--color__base_300: 227, 227, 227;
		--color__base_200: 248, 243, 239;
		--color__base_100: 239, 239, 239;
	}
}
 */


/* fades elements in as they enter the view port; fades out as they leave */
/* 
header, img {
	opacity: var(--intersection-ratio);
}
 */

/* creates a wobbly effect; needs work */
/* 
a:hover {
	display: inline-block;
	position: relative;
	transform: rotateZ(calc(3deg * (var(--mouse-x-pct) - .5) )) rotateX(calc(40deg * (var(--mouse-y-pct) - .5))) perspective(100px);
	transform-style: preserve-3d;
	transition: none;
}
 */


/* creates a spot light effect */
/* 
a:hover {
 	background: radial-gradient(circle at calc(100% * var(--mouse-x-pct)) calc(100% * var(--mouse-y-pct)), var(--color__highlight) 0%,  var(--color__brand) 80%);
 	background-position: calc(100% * var(--mouse-x-pct)) calc(100% * var(--mouse-y-pct));
}
*/

.slant {
	transform: rotateZ(-5deg);
}


.flair-toggle-x {
	background-color: transparent !important;
	border: 0 !important;
	font-size: 0 !important;
	padding: 0 !important;
	position: relative;
	width: 1.5rem;
	width: 100%;
}
button.flair-toggle-x:hover {
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none;
	transform: none;
}
.flair-toggle-x::before,
.flair-toggle-x::after {
	background-color: rgba( var( --color__base_100, 1 ) );
	content: '';
	height: 2px;
	position: absolute;
	right: 1.5rem;
	top: 1.375rem;
	transition: .2s all ease;
	width: 1rem;
}

.flair-toggle-x::before {
	transform: rotate(0deg);
}
.flair-toggle-x::after {
	transform: rotate(90deg);
}

.open .flair-toggle-x::before {
	transform: rotate(315deg);
}
.open .flair-toggle-x::after {
	transform: rotate(225deg);
}