@import 'color/index',
'~matise-stack/_stack.scss',
'~matise-grid/grid.scss',
'settings/settings',
'mixins/mixins',
'typography/index',
'layout/index',
'components/index',
'icons/icons';


.link{
	&--external{
		text-decoration: underline;
	}
}

.hide {
	display: none;
}

.center {
	margin: 0 auto;
}

@media #{$mobile} {
	.mobile-hide{
		display: none;
	}
}

// Create color background and text classes
@each $name,$value in $colors{
	$name-lowercase: to-lower-case($name);
	.bg-#{$name}, .bg-#{$name-lowercase}{
		background-color: $value; color: contra($value);
		hr{
			background-color: contra($value); color: contra($value);
		}
	}
	.text-#{$name}, .text-#{$name-lowercase}, .content .text-#{$name-lowercase}{
		color: $value !important;
	}
	$opacity: (0.9,0.8,0.75,0.7,0.6,0.5,0.4,0.3,0.25,0.2,0.1);
	@each $opacity-value in $opacity{
		$opacity-name: "0#{$opacity-value * 100}";
		.bg-#{$name}-#{$opacity-name}, .bg-#{$name-lowercase}-#{$opacity-name}{
			background-color: color($name,$opacity-value); color: $value;
		}
	}
}

.container {
	margin-left: rem(360);
	padding: grid(1); padding-top: grid(2);
	min-height: 90vh;
	a{ color: blue;}
	img{ width: 100%;}
	p, ul{ max-width: 40rem;}
}