@font-face {
	font-family: 'ShantellSans';
	font-weight: 1 1000;
	font-style: normal italic;
	src: url('fonts/ShantellSans[BNCE,INFM,SPAC,ital,wght].woff2') format('woff2');
	font-display: block;
}
/* @font-face {
	font-family: 'ShantellSans';
	font-weight: 400;
	font-style: italic;
	src: url('fonts/Shantell_Sans-Normal-Regular_Italic.woff2') format('woff2');
} */

*,
*:before,
*:after {
	box-sizing: border-box;
}

:root {
	--background: white;
	--text: black;
	--altBg: black;
	--altText: white;
	--offWhite: hsl(0, 0%, 80%);
	--offText: hsl(0, 0%, 25%);
	--gray: rgb(87, 87, 87);
	--modalBg: hsl(240, 0%, 90%);
	--trackBg: hsl(230, 0%, 90%);
	--accent: black;
	--animationState: running;
	/* --uiAccent: rgb(44, 44, 255); */
	--uiAccent: hsl(228, 100%, 50%);
	--uiAccentBright: hsla(189, 80%, 80%,0.5);

	--text-column: 800px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: black;
		--text: white;
		--offText: hsl(0, 0%, 75%);
		--gray: hsl(240, 0%, 70%);
		--modalBg: hsl(240, 0%, 10%);
		--altBg: hsl(230, 0%, 7.5%);
		--altText: white;
		--trackBg: hsl(230, 0%, 15%);
		--accent: white;
		/* --uiAccent: hsl(26, 100%, 65%); */
		--uiAccent: hsl(4, 100%, 70%);
		--uiAccentBright: hsl(0, 35%, 50%);
	}
}

html,
body {
	position: relative;
	width: 100%;
	height: 100%;
	font-family: 'ShantellSans', serif;
	background-color: var(--background);
}

body {
	color: var(--text);
	margin: 0;
	box-sizing: border-box;
}

button {
	font-family: 'ShantellSans', serif;
	text-transform: uppercase;
	/* letter-spacing: 0.05em; */
}

.button,
header button,
header .button,
header h1,
#cta,
.cta {
	background: var(--trackBg);
	color: var(--text);
	padding: 0.25rem 0.75rem;
	height: 2rem;
	border-radius: 999px;
	letter-spacing: 0.03em;
	display: flex;
	align-items: center;
	margin: 0;
	border: transparent solid 2px;
	font-variation-settings: 'BNCE' 25, 'INFM' 75;
	font-weight: 550;
	border: 2px solid transparent;
	cursor: pointer;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	pointer-events: auto;
	transition: 0.25s border, 0.25s color;
	line-height: 1;
}

@media (max-width: 600px) {
	.button,
	header button,
	header .button,
	header h1,
	#cta,
	.cta {
		font-size: 0.825rem;
		font-weight: 650;
	}
}

.button:hover,
header .button:hover,
header button:hover,
#cta:hover {
	border: var(--uiAccent) solid 2px;
	color: var(--uiAccent);
}

a:hover,
.button:hover,
header button:hover,
header .button:hover,
#cta:hover {
	animation: shinyText 0.75s linear infinite;
	animation-play-state: var(--animationState);
}

@media (prefers-color-scheme: dark) {
	.button,
	header button,
	header .button,
	header h1,
	#cta,
	.cta {
		background: var(--text);
		color: var(--background);
	}

	.button:hover,
	header .button:hover,
	header button:hover,
	#cta:hover {
		border: var(--uiAccent) solid 2px;
		color: var(--background);
	}
}

.phrase {
	font-size: 5vmax;
	letter-spacing: 0.05em;
	font-feature-settings: 'calt' 1;
	font-weight: 700;
	font-variation-settings: 'wght' 800, 'BNCE' -50, 'INFM' 0;
	text-transform: uppercase;
	animation: fadeIn 0.375s ease forwards 1,
		wobble 2s 0.375s ease-in-out alternate 4 var(--animationState),
		fadeOut 5s 2s forwards var(--animationState);
	/* prevent click on word from disrupting placement */
	pointer-events: none;
	/* animation-play-state: inherit; */
}

@media (prefers-reduced-motion) {
	.phrase {
		animation: fadeIn 0.375s ease forwards 1;
	}
}

*::selection {
	background: var(--uiAccentBright);
}

.tnum {
	font-feature-settings: 'tnum';
}

a {
	transition: 0.25s color;
	color: var(--text);
}

a:hover {
	color: var(--uiAccent);
}

header a:hover {
	color: currentColor;
}

.phrase::selection {
	background: hsla(240, 0%, 10%, 0);
}

h2 {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* animating headlines in article */
.markdown-body h1 {
	font-size: 11.5vw;
	font-weight: 800;
	line-height: 1;
}

@media (min-width: 800px) {
	.markdown-body h1 {
		font-size: 6rem;
	}
}

.markdown-body h1 {
	margin-top: 0.5em;
	margin-bottom: 0em;
	letter-spacing: 0.02em;
	animation: wobbleBounce 0.75s ease-in-out alternate 6;
	animation-play-state: var(--animationState);
	font-variation-settings: 'BNCE' -60, 'INFM' 50;
}

.markdown-body h2 {
	margin-top: 2em;
	letter-spacing: 0.02em;
	/* animation: wobbleBounce .875s ease-in-out alternate-reverse infinite ;
	animation-play-state: var(--animationState); */
	font-variation-settings: 'BNCE' 50, 'INFM' 100;
	font-size: calc(1.125rem + 1vw);
	line-height: 1;
	padding: 0.25em 0;
	margin-bottom: -0.75rem;
}

.markdown-body h3 {
	margin-top: 2em;
}

/* bylines for  author names */
.markdown-body h4 {
	color: var(--gray);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.markdown-body p,
.markdown-body li {
	letter-spacing: 0.02em;
	line-height: 1.625;
	font-size: 1.3125rem;
}

@media (max-width: 1100px) {
	.markdown-body p,
	.markdown-body li {
		letter-spacing: 0.02em;
		line-height: 1.5;
		font-size: 1.25rem;
	}
}

@media (max-width: 600px) {
	.markdown-body p,
	.markdown-body li {
		letter-spacing: 0.02em;
		line-height: 1.5;
		font-size: 1rem;
	}
}

.markdown-body em {
	font-style: normal;
	font-variation-settings: 'wght' 400, 'ital' 1, 'BNCE' 25, 'IRGL' 25;
}
.markdown-body em strong {
	font-style: normal;
	font-variation-settings: 'wght' 700, 'ital' 1, 'BNCE' 25, 'IRGL' 25;
}

.markdown-body img,
.markdown-body video {
	/* width: 100vw; */
	/* margin-left: -1rem; */
	width: calc(100% + 1rem);
	margin: 0;
	margin-left: -0.5rem;
	border-radius: 0.5rem;
}

/* @media (min-width: 800px) {
	.markdown-body img,
	.markdown-body video {
		width: 100%;
		max-width: var(--text-column);
		border-radius: 0.5rem;
		margin-left: 0rem;
	}
} */

@media (min-width: 800px) {
	.markdown-body figure {
		margin-top: 2.5rem;
	}

	.markdown-body figcaption {
		margin-bottom: 2.5rem;
	}
}

video {
	width: 100%;
}

blockquote {
	font-variation-settings: 'ital' 1;
	border-left: 1px solid currentcolor;
	margin-left: 0;
	padding-left: 1.5rem;
}

figure {
	margin: 0;
}

figcaption,
figcaption a {
	font-style: normal;
	font-variation-settings: 'wght' 400, 'ital' 1;
	color: var(--gray);
	font-size: 0.825rem;
	letter-spacing: 0.03em;
}

figcaption strong {
	font-variation-settings: 'wght' 700, 'ital' 1;
}

@keyframes fadeIn {
	0% {
		font-variation-settings: 'wght' 300, 'BNCE' 0, 'INFM' 0;
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		font-variation-settings: 'wght' 800, 'BNCE' -100, 'INFM' 0;
	}
}

@keyframes wobble {
	0% {
		font-variation-settings: 'wght' 800, 'BNCE' -100, 'INFM' 0;
	}
	100% {
		font-variation-settings: 'wght' 650, 'BNCE' 100, 'INFM' 50;
	}
}

@keyframes wobbleBounce {
	0% {
		font-variation-settings: 'BNCE' -60, 'INFM' 50;
	}
	100% {
		font-variation-settings: 'BNCE' 60, 'INFM' 50;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
		/* transform: translateY(0); */
	}
	100% {
		opacity: 0;
		/* transform: translateY(-100vw); */ /* this won’t work without changes to the javascript, as that is already adding transform */
	}
}

@keyframes slowShinyText {
	from {
		font-variation-settings: 'BNCE' -50;
	}
	to {
		font-variation-settings: 'BNCE' 50;
	}
}

.show-sm {
	display: none;
}

@media (max-width: 600px) {
	.hide-sm {
		display: none;
	}
	.show-sm {
		display: inherit;
	}
}