

// Semantic color scheme
; 
@import url('https://fonts.googleapis.com/css?family=Playfair Display'); 
@import url('https://fonts.googleapis.com/css?family=Montserrat'); 
$theme-colors: (
  primary: #007bff,
  secondary: #004EA3,
  success: #28a745,
  info: #00fbff,
  warning: #ffc107,
  danger: #dc3545,
  light: #f8f9fa,
  dark: #343a40
);

// Options
//
// Quickly modify global styling by enabling or disabling optional features.
 
$enable-rounded:            true !default;
$enable-shadows:            false;
$enable-gradients:          false;
$enable-transitions:        true !default;
$enable-hover-media-query:  false !default;
$enable-grid-classes:       true !default;
$enable-print-styles:       true !default;

// Variables
//
// Theme settings.

$body-bg: white;
$body-color: #292b2c;
$body-color-inverse: invert($body-color) !default;
$link-color: #007bff;


$font-family-base: Montserrat;

$headings-font-family: Playfair Display;


$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-h1: 2.5 * $font-size-base;
$font-size-h2: 2 * $font-size-base;
$font-size-h3: 1.75 * $font-size-base;
$font-size-h4: 1.5 * $font-size-base;
$font-size-h5: 1.25 * $font-size-base;
$font-size-h6: $font-size-base;

$display1-size: 6 * $font-size-base;
$display2-size: 5.5 * $font-size-base;
$display3-size: 4.5 * $font-size-base;
$display4-size: 3.5 * $font-size-base;

$border-radius: .25rem;


@import 'bootstrap-4.0.0-beta.1';


body > * {
  background-size: cover;
}

.opaque-overlay {
  overflow: hidden;
  position: relative; 
  > *:first-child:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px; 
    pointer-events:none;
    background: rgba(map-get($theme-colors, 'dark'), 0.25);
  }
}


.gradient-overlay {
  overflow: hidden;
  position: relative; 
  > *:first-child:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px; 
    pointer-events:none;
    background: linear-gradient(to bottom right, map-get($theme-colors, 'primary') 20%, transparent 80%);
  }
}

