// Semantic color scheme
$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: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$headings-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;

$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%);
  }
}

/*Added by Sonecke*/
@font-face {
    font-family: 'intro_script_rh2_base';
    src: url('introscriptr-h2base-webfont.eot');
    src: url('introscriptr-h2base-webfont.eot?#iefix') format('embedded-opentype'), url('introscriptr-h2base-webfont.woff2') format('woff2'), url('introscriptr-h2base-webfont.woff') format('woff'), url('introscriptr-h2base-webfont.ttf') format('truetype'), url('introscriptr-h2base-webfont.svg#intro_script_rh2_base') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'intro_rust_gbase_2_line';
    src: url('introrustg-base2line-webfont.eot');
    src: url('introrustg-base2line-webfont.eot?#iefix') format('embedded-opentype'),
         url('introrustg-base2line-webfont.woff2') format('woff2'),
         url('introrustg-base2line-webfont.woff') format('woff'),
         url('introrustg-base2line-webfont.ttf') format('truetype'),
         url('introrustg-base2line-webfont.svg#intro_rust_gbase_2_line') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'corbertregular';
    src: url('Corbert-Regular-webfont.eot');
    src: url('Corbert-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Corbert-Regular-webfont.woff2') format('woff2'),
         url('Corbert-Regular-webfont.woff') format('woff'),
         url('Corbert-Regular-webfont.ttf') format('truetype'),
         url('Corbert-Regular-webfont.svg#corbertregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {

    font-family: 'intro_head_rbase';
    src: url('introheadr-base-webfont.eot');
    src: url('introheadr-base-webfont.eot?#iefix') format('embedded-opentype'),
         url('introheadr-base-webfont.woff2') format('woff2'),
         url('introheadr-base-webfont.woff') format('woff'),
         url('introheadr-base-webfont.ttf') format('truetype'),
         url('introheadr-base-webfont.svg#intro_head_rbase') format('svg');
    font-weight: normal;
    font-style: normal;
}

.lightbar{
    background-color:#ECE5B6; /*rgba(255,255,255,0.8);*/
background-blend-mode: lighten;
  width: 100vw;
   margin-left: -50vw;
 left: 50%;
     position: relative;
    color:#493d26;
}

.lightbackpanel{
    background-color: rgba(255,255,255,0.8);
    background-blend-mode: lighten;
    color:black;
 position: relative;
 border-radius: 20px;
  padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 1px;
  padding-top: 4px;
    
}

.darkbackpanel{
    background-color: rgba(0,0,0,0.8);
    background-blend-mode: darken;
    color:blanchedalmond;
    width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

.otto {
  /*color: #eec01b;*/
  /*color: blanchedalmond;*/  color:#493d26;
    /*text-shadow: -6px -8px 2px #ECE5B6,                 -4px -6px 2px #ECE5B6,
                 -2px -4px 2px #ECE5B6,
                  0px -2px 2px #ECE5B6,
                  2px 0px 2px #ECE5B6,
                  4px 2px 2px #ECE5B6,
                  6px 4px 2px #ECE5B6,
                  8px 6px 2px #ECE5B6;*/

        text-shadow: 
                 -2px -4px 2px #ECE5B6,
                  0px -2px 2px #ECE5B6,
                  2px 0px 2px #ECE5B6,
                  4px 2px 2px #ECE5B6,
                  6px 4px 2px #ECE5B6;

    /*text-shadow: -6px -8px 2px black,
                 -4px -6px 2px black,
                 -2px -4px 2px black,
                  0px -2px 2px black,
                  2px 0px 2px black,
                  4px 2px 2px black,
                  6px 4px 2px black,
                  8px 6px 2px black;*/
}