:root { /* variables and color defaults */
	/* colors */
	--color-primary: #F7A9A8;
	--primary: var(--color-primary);
	--color-secondary: #EF798A;
	--secondary: var(--color-secondary);
	--color-tertiary: #8C82B8;
	--tertiary: var(--color-tertiary);
	--bg-bright: #E5C3D1;
	--bright: var(--bg-bright);
	--bg-dark: #CC9FCF;
	--dark: var(--bg-dark);
	
	/* media sizes */
	/* example ranges

		Small Mobile	< 480px	(default styles)
		Large Mobile	480px – 767px	480px or 576px
		Tablet	768px – 1024px	768px
		Small Desktop/Laptop	1025px – 1200px	992px or 1024px
		Large Desktop	1201px and up	1200px or 1366px
	*/
	--phone: 852px;
	--desktop: 853px;
}
.primary {
	color: var(--primary);
}
.primary-bg {
	background-color: var(--primary);
}
.secondary {
	color: var(--secondary);
}
.secondary-bg {
	background-color: var(--secondary);
}
.tertiary {
	color: var(--tertiary);
}
.tertiary-bg {
	background-color: var(--tertiary);
}
.bright {
	color: var(--bright);
}
.bright-bg {
	background-color: var(--bright);
}
.bright {
	color: var(--bright);
}
.dark-bg {
	background-color: var(--dark);
}

/* page defaults */
body {
	margin: 0;
	background-color: var(--dark);
}
a { align-content: center; }		/* move to status line css */
html {
	@media only screen and (max-width: 852px) {
		font-size: 2rem;
	}
	scroll-behavior: smooth;
	scroll-padding-top: 150px;
}

/* ui elements */
.button {
	border: none;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	padding: 1em;
	border: 1px solid black;
	border-radius: 4px;
	min-width: fit-content;
	min-height: fit-content;
	a:link, a:visited, a:hover, a:active {
		color: black;
	}
}
.button:hover {
	border-width: 2px;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid var(--tertiary); /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: loader-spin 2s linear infinite;
	justify-self: center;
}

@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}