//////////////////////////////////////////
// NORMALIZE
///////////////////////////////////////////////////////////////////////////
// -------------
//////////////////////////////////////////
// BOX SIZING
//////////////////////////////////////////

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

//////////////////////////////////////////
// HTML -- BODY
//////////////////////////////////////////

:root {
	// accent-color: rgba(250, 15, 117);
}

html { 
	font-size: 100%; 
	overflow-x: hidden;
	overflow-y: scroll; 
	image-rendering: auto; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale; 
	-webkit-font-smoothing: antialiased; 
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body { 
	margin: 0; 
	font-size: 100%; 
	line-height: $line-height; 
	font-family: sans-serif;
	background-color: $white;
	color: $text-grey;

	///////////////////////////////////
	// If the user's preference is set to 'dark', this renders white text on a black background.
	///////////////////////////////////
	
	// @media (prefers-color-scheme: dark) {
	// 	background-color: $black;
	// 	color: $white;
	// }

	&::before{
		display: none;
		position: fixed;
		bottom: 1rem;
		left: 1rem;
		color: $white;
		color: red;
		z-index: 10000;
		text-transform: uppercase;
		font-size: rem(14);
		content: 'desktop';

		@if $debug{
			display: block;
		}

		@include break(tl){
			content: 'tablet_landscape';
		}

		@include break(tp){
			content: 'tablet_portrait';
		}

		@include break(ml){
			content: 'mobile_landscape';
		}

		@include break(mp){
			content: 'mobile';
		}

		@include break(lf){
			content: 'large_format';
		}
	} 
}

//////////////////////////////////////////
// SELECTION
//////////////////////////////////////////

::-moz-selection,
::selection { 
	background: $selection-background;
	color: $selection-color; 
	text-shadow: none; 
}

//////////////////////////////////////////
// LINKS
//////////////////////////////////////////

a { color: $link-color;
	@include transition(color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease);
	// &:visited { color: #551a8b; }
	// VISITED COMMENTED OUT [DON'T BELIEVE IN IT] -- PUT BACK IN IF YOU WANT
	&:hover { color: $link-hover-color; outline: 0; }
	&:active { outline: 0; }
	&:focus { outline: 0; }
 }

//////////////////////////////////////////
// BASE TEXT
//////////////////////////////////////////

p { 
	margin: $line-height*1rem 0; 
}

ul, 
ol { 
	margin: $line-height*1rem 0; 
	padding: 0 0 0 2.5rem; 

	& ::marker{
		color: $text-grey;
	}

	nav &{
		list-style: none; 
		list-style-image: none; 
		margin: 0; 
		padding: 0;
	}
 }

dl { 
	margin: $line-height*1rem 0;

	dt { 
		font-weight: 700; 
		margin-top: 0.75rem; 
	}

	dd { 
		margin: 0; 
	} 
}

//////////////////////////////////////////
// BASE TEXT MODIFIERS
//////////////////////////////////////////

abbr[title] { 
	border-bottom: 1px dotted; 
	cursor: help; 
}

b, 
strong { 
	font-weight: 700; 
}

blockquote { 
	margin: 1rem rem(40); 
}

dfn { 
	font-style: italic; 
}

q { 
	quotes: none;

	q::before, 
	q::after { 
		content: ''; 
	}
 }

sub, 
sup { 
	font-size: percentage(3/5); 
	line-height: 0; 
	vertical-align: baseline; 
	position: relative;
}

sup { 
	top: -0.5rem;
}

sub { 
	bottom: -0.25em; 
}

//////////////////////////////////////////
// CODE + PRE
//////////////////////////////////////////

pre, 
code, 
kbd, 
samp { 
	font-family: monospace, monospace; 
	font-size: 1rem; 
}

pre { 
	white-space: pre;
	white-space: pre-wrap; 
	word-wrap: break-word; 
}

img { 
	border: 0; 
	-ms-interpolation-mode: bicubic; 
	vertical-align: middle; 
}

figure { 
	margin: 0; 
}

//////////////////////////////////////////
// FORMS
//////////////////////////////////////////

form,
fieldset { 
	border: 0; 
	margin: 0; 
	padding: 0; 
}

legend { 
	border: 0; 
	padding: 0; 
}

button, 
input, 
select, 
textarea { 
	font-size: 100%; 
	margin: 0; 
	vertical-align: baseline;
	font-family: inherit;
}

button, input { 
	line-height: normal;
 }

button, 
input[type="button"], 
input[type="reset"], 
input[type="submit"] { 
	cursor: pointer; -webkit-appearance: button; 
}

input[type="search"] { 
	-webkit-appearance: textfield; 
	box-sizing: content-box; 

	&::-webkit-search-decoration { 
		-webkit-appearance: none; 
	}
}

button::-moz-focus-inner, 
input::-moz-focus-inner { 
	border: 0; 
	padding: 0; 
}

textarea { 
	overflow: auto; 
	vertical-align: top; 
	resize: vertical; 
}

input:valid, textarea:valid {

}

input:invalid, textarea:invalid { 
	background-color: #f0dddd; 
}

table {
	border-collapse: collapse; 
	border-spacing: 0; 
}

//////////////////////////////////////////
// MEDIA
//////////////////////////////////////////

audio, 
canvas, 
video { 
	display: inline-block; 
}

audio:not([controls]) { 
	display: none; 
}

//////////////////////////////////////////
// MISC
//////////////////////////////////////////

ins { 
	background: #ff9; 
	color: #2a2a2a; 
	text-decoration: none; 
}

hr { 
	display: block; 
	height: 1px; 
	border: 0; 
	border-top: 1px solid #ccc; 
	margin: 1rem 0; 
	padding: 0; 
}

mark { background: #ff0; 
	color: #2a2a2a; 
	font-style: italic; 
	font-weight: 700;
}

[hidden] {
	display: none; 
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		animation-delay: 0.1ms !important;
		scroll-behavior: auto !important;
	}
}
