variables.scss

// colors
$red : #EE3B33;
$blue: #0196D6;
$purple: #68599D;
$green: #5EBE47;
$white: white;
$yellow: #FEB81D;


$size-x-large: 1280px;
$size-large: 1024px;
$size-medium: 768px;
$size-small: 568px;

//Transition
$transition_duration: .5s;
//Fonts
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Nunito:wght@300;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@100;300;500;700;900&family=Montserrat:wght@300;400;500;600;700&family=Nunito:wght@300;600;700;900&display=swap');
// $header-font: 'Helvetica', sans-serif;
// $body-font: 'Nunito', sans-serif;
// $body-font: 'Montserrat', sans-serif;
$body-font: 'Montserrat Alternates', sans-serif;

@mixin bp-x-large {
    @media only screen and (max-width: $size-x-large) {
      @content;
    }
  }
  
  @mixin bp-large {
    @media only screen and (max-width: $size-large) {
      @content;
    }
  }
  
  @mixin bp-medium {
    @media only screen and (max-width: $size-medium) {
      @content;
    }
  }
  
  @mixin bp-small {
    @media only screen and (max-width: $size-small) {
      @content;
    }
  }
  @mixin bp-custom($size-custom) {
    @media only screen and (max-width: $size-custom) {
      @content;
    }
  }

//Default Transition
@mixin transition($prop...) {
	-webkit-transition-property: $prop;
	-moz-transition-property: $prop;
	-o-transition-property: $prop;
	transition-property: $prop;
	-webkit-transition-duration: $transition_duration;
	-moz-transition-duration: $transition_duration;
	-o-transition-duration: $transition_duration;
	transition-duration: $transition_duration;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	transition-timing-function: ease;
}
//Transform
@mixin transform($prop...) {
	-webkit-transform: $prop;
	-moz-transform: $prop;
	transform: $prop;
}