::selection {
	background-color: $color-primary-800;
	color: $color-primary-100;
}

::-moz-selection {
	background-color: $color-primary-800;
	color: $color-primary-100;
}

::placeholder {
	color: rgba($color-grey-400, 0.48); 
}

:-ms-input-placeholder {
	color: rgba($color-grey-400, 0.48);
}

:-moz-placeholder {
	color: rgba($color-grey-400, 0.48);
}

::-webkit-input-placeholder {
	color: rgba($color-grey-400, 0.48);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	word-break: break-word;
	word-wrap: break-word;
}

html,
body {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: $color-grey-100;
	color: $color-black;
	font-family: $font-stack;
	font-size: $font-size;
	font-style: $font-style;
	font-weight: $font-weight;
	line-height: $font-line-height;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;

	&.body-white-text {
		*,
		*::before,
		*::after { 
			color: $color-white;
		}
	}

	&.body-fixed {
		position: fixed;
	}
}

a {
	color: $color-primary-800;
	transition: all ease-in-out 300ms;
	
	&:hover,
	&:focus,
	&:active {
		color: $color-primary-400;
		opacity: 1;
	}
}

a strong {
	color: inherit;
}

img,
.img-fluid {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}

figure {
	margin-left: 0;
	margin-right: 0;

	figcaption {
		background-color: $color-grey-200;
		font-size: 0.875rem;
		padding: 0.5rem;
		text-align: center;
	}
}

iframe,
embed {
	max-width: 100%;
}

table {
	border: 1px solid $color-grey-500;
	border-collapse: collapse;
	font-size: 85%;
	margin-bottom: 1rem;
	width: 100%;
}

td, th {
	border: 1px solid $color-grey-500;
	padding: 0.25rem 0.5rem;
}

th {
	text-align: left;
}

tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
	background-color: $color-grey-100;
}

legend {
	font-size: 1.25rem;
	padding: 0.5rem;
}

fieldset {
	border: 1px solid rgba($color-black, 0.24);
}

input,
textarea,
select {
	border: 1px solid rgba($color-black, 0.24);
	border-radius: 0.125rem;
	font-family: $font-stack;
	font-size: $font-size;
	line-height: 1.4;
	padding: 0.725rem;
	transition: all ease-in-out 300ms;

	&:hover,
	&:focus,
	&:active {
		border: 1px solid $color-primary-400;
		border-color: none;
		border-radius: 0;
		box-shadow: 0 0 0 0.25rem $color-primary-100;
		color: $color-black;
		outline: none;
	}
}

button,
input[type="button"],
input[type="submit"] {
	border-radius: 0.25rem;
}


html {
	font-size: $font-size-mobile;

	@media (min-width: $breakpoint-tablet) {
		font-size: $font-size;
	}
}