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

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;

	@media all and (max-width: 640px) {
		overflow-x: hidden;
	}
}

#main:focus {
	outline: none;
}

a {
	text-decoration: none;
	color: var(--color--primary);
	font-weight: bold;

	&:hover {
		text-decoration: underline;
		color: var(--color--primary--dark);
	}

	&:active {
		color: var(--color--primary--darker);
	}

	&:visited {
		color: #755ebb;
	}

	&:focus,
	&.focus-visible {
		outline: var(--focus-outline);
		outline-offset: 3px;
	}

	&:focus:not(:focus-visible) {
		outline: none;
	}

	.js-focus-visible &:focus:not(.focus-visible) {
		outline: none;
	}

	&:-moz-focusring {
		outline: none;
		background: none;
	}
}

img {
	max-width: 100%; // repsonsify the image to override the width attr set on it
	height: auto; // to prevent imge squishing with width and height attrs set
}

button {
	background: none;
	font: inherit;
	font-size: 1rem;
	cursor: pointer;
	border: none;

	&:-moz-focusring {
		outline: none;
	}

	&:focus:not(:focus-visible) {
		outline: none;
	}

	.js-focus-visible &:focus:not(.focus-visible) {
		outline: none;
	}
}

@import '_settings.scss';
@import '_utilities.scss';
@import '_typography.scss';
@import '_tabs.scss';
@import '_slice.scss';
@import '_button.scss';
@import '_alternate.scss';