@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'libs/html-grid';

@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,700,800,900&display=swap');

// Breakpoints.

	@include breakpoints((
		xlarge:   ( 1281px,  1680px ),
		large:    ( 981px,   1280px ),
		medium:   ( 737px,   980px  ),
		small:    ( 481px,   736px  ),
		xsmall:   ( 361px,   480px  ),
		xxsmall:  ( null,    360px  )
	));

// Mixins.

	@mixin color($p) {
		@include color-typography($p);
		@include color-box($p);
		@include color-button($p);
		@include color-form($p);
		@include color-icon($p);
		@include color-list($p);
		@include color-section($p);
		@include color-table($p);
		@include color-spotlight($p);
	}

// Base.

  	@import 'base/reset';
  	@import 'base/page';
  	@import 'base/typography';


  // layout.

    @import 'layout/header';
    @import 'layout/nav';
    @import 'layout/footer';
body {
  background: #f2f2f2;
  height: 200vh;
}