body {
  --mpsk-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;
  
  background-color: var(--mpsk-color-body-background);
  font-size: var(--mpsk-typography-general-body-font-size);
  line-height: var( --mpsk-typography-general-body-line-height);
}

/* COLOURS */

.btn-primary {
  background-color: var(--mpsk-color-primary) !important;
  border-color: var(--mpsk-color-primary) !important;
}

.btn-secondary {
  background-color: var(--mpsk-color-secondary) !important;
  border-color: var(--mpsk-color-secondary) !important;
}

.btn-success {
  background-color: var(--mpsk-color-success) !important;
  border-color: var(--mpsk-color-success) !important;
}

.btn-info {
  background-color: var(--mpsk-color-info) !important;
  border-color: var(--mpsk-color-info) !important;
}

.btn-warning {
  background-color: var(--mpsk-color-warning) !important;
  border-color: var(--mpsk-color-warning) !important;
}

.btn-danger {
  background-color: var(--mpsk-color-danger) !important;
  border-color: var(--mpsk-color-danger) !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover {
  filter: brightness(85%) !important;
}

/* LAYOUT */

.container-fluid {
  padding: 0;
}

@media (max-width: 1200px) {
  .container, .container-fluid, .row {
    --bs-gutter-x: var(--mpsk-layout-mobile-horizontal-gutter);
    --bs-gutter-y: var(--mpsk-layout-mobile-vertical-gutter);
    
    row-gap: var(--mpsk-layout-mobile-vertical-gutter);
  }
}

@media (min-width: 1200px) {
  .container, .container-fluid, .row {
    --bs-gutter-x: var(--mpsk-layout-grid-horizontal-gutter);
    --bs-gutter-y: var(--mpsk-layout-grid-vertical-gutter);
    
    row-gap: var(--mpsk-layout-grid-vertical-gutter);
  }
}

@media (min-width: 1400px) {
	.container, 
  .container-lg, 
  .container-md, 
  .container-sm, 
  .container-xl, 
  .container-xxl {
		max-width: var(--mpsk-layout-grid-content-maxwidth);
	}
}

@media (max-width: 1200px) {
  h1 {
    font-size: var(--mpsk-typography-heading-mobile-h1-font-size);
  }

  h2 {
    font-size: var(--mpsk-typography-heading-mobile-h2-font-size);
  }

  h3 {
    font-size: var(--mpsk-typography-heading-mobile-h3-font-size);
  }
  
  h4 {
    font-size: var(--mpsk-typography-heading-mobile-h4-font-size);
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: var(--mpsk-typography-heading-h1-font-size);
  }

  h2 {
    font-size: var(--mpsk-typography-heading-h2-font-size);
  }

  h3 {
    font-size: var(--mpsk-typography-heading-h3-font-size);
  }
  
  h4 {
    font-size: var(--mpsk-typography-heading-h4-font-size);
  }
}