theme.scss

// @import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/rfs/scss";

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
// @import "../node_modules/bootstrap/scss/reboot";
// @import "../node_modules/bootstrap/scss/type";
// @import "../node_modules/bootstrap/scss/images";
// @import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/containers";
@import"../node_modules/bootstrap/scss/bootstrap-utilities.scss";

////
/// @group breakpoints
////

/// small
$small: 320px !default;
/// large
  $large: 1024px !default;  
/// breakpoint map
$boostrap: (
  small : 480px,
  medium: 800px,
  large : 1024px
) !default;
///
$foundation: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
) !default;

$custom: (
  xs : 480px,
  sm: 640px,
  md: 800px,
  lg : 1024px,
  xl: 1200px,
  xxl: 1440px,
) !default;

// The mixin now takes a $min and $max attribute, which both default to a value of zero.
@mixin bp($class) {
  // We check the type of value of the first passed it attribute, which in this case in $min. This helps us identify if we’re passing in a Bootstrap class or a custom width.
  $type: type-of($class);
 
  // If $min is a string the mixin assumes you’re passing 
  // in xs, sm, md, or lg as the attribute and it would execute the previous mixin cod
  @if $type == string {
      @if $class == xs {
        @media (max-width: 480px) { @content; }
      }
      @else if $class == sm {
        @media (min-width: 640px) { @content; }
      }
      @else if $class == md {
        @media (min-width: 800px) { @content; }
      }
      @else if $class == lg {
        @media (min-width: 1024px) { @content; }
      }
      @else if $class == xlg {
        @media (min-width: 1200px) { @content; }
      }
      @else if $class == xxlg {
        @media (min-width: 1440px) { @content; }
      }
      @else {
        @warn "Breakpoint mixin supports: xs, sm, md, lg";
      }
  }
}

// The mixin now takes a $min and $max attribute, which both default to a value of zero.
@mixin mq($min: 0, $max: 0) {
  $type: type-of($min);
  //// Check id the type is a number
    @if $type == number {
      $query: "all" !default;
      @if $min != 0 and $max != 0 { 
        $query: "(min-width: #{$min}) and (max-width: #{$max})"; 
      }
      @else if $min != 0 and $max == 0 { 
        $query: "(min-width: #{$min})"; 
      }
      @else if $min == 0 and $max != 0 { 
        $query: "(max-width: #{$max})"; 
      }
      @media #{$query} { 
        @content;
      }
    }
}



.language-javascript > .line.focus{
    background: transparent !important;
    // font-size: xx-large;
    @include rfs(2rem, font-size);
    // @include rfs(4rem, font-size);
    color: #5cc4ea;
}
.reveal ul{ margin:0 !important;}





/* Fix Issue of hidden content still taking up space */
.fragment.fade-in-then-out:not(.current-fragment) {
    display:none;
}
// Current Slide
.present{
    .flex-slide{display:flex}
    .column {display: flex;
      flex-direction: column;
      flex-basis: 100%;
      flex: 4;
    }
    
    .double-column {
      display: flex;
      flex-direction: column;
      flex-basis: 100%;
      flex: 1;
    }    
    h1, h2, h3, h4, h5, h6, p {
        color:white;
    }
    
    img{
        @include bp(sm){
            max-height: 15rem;
        }
        @include bp(lg){
            max-height: 15rem;
        }
    }
    .flex-slide p.fragment{ 
        // @include font-size(1rem);
        @include rfs(2rem, font-size)
    }
}

// #logo{}
.reveal.slide{
  @extend .container-fluid;
  .slides{
    section.present{
      //
    }
  }
}