// Colours

// Light theme colors $background_color : fff; $text_color : #222; $blue : #2a76dd; $blue_hover : #6ca0e8; $gray_text : rgb(116, 129, 141); $gray_element : rgb(230, 236, 241); $gray_light : rgb(245, 247, 249); $red : rgb(255, 70, 66);

@mixin color($property, $var, $fallback){

#{$property}: $fallback;  // This is a fallback for browsers that don't support the next line.
#{$property}: var($var, $fallback);

}

@mixin frosted-glass{

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    -webkit-backdrop-filter: saturate(180%) blur(20px) brightness(150%);
    backdrop-filter: saturate(180%) blur(20px) brightness(150%);
    // transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
}

}

// Dark theme colors .theme-dark{

--background-color   : #121212;
--text-color         : rgba(255, 255, 255, 0.87);
--gray-element       : rgba(255, 255, 255, 0.38);
--gray-text          : rgba(255, 255, 255, 0.6);
--float-color        : #222;
--dark-shadow1       : #000;
--dark-shadow2       : rgba(0,0,0,0.5);
--dark-shadow3       : rgba(0,0,0,0.1);
--dark-frosted-glass : #22222280;

#navbar{       
    @include frosted-glass;
}

}

.theme-transit {

transition: background-color 1s;

}

// Fonts

$font_normal : -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; $font_code : SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;

// Font Sizes

$Huge : 32pt; // main-header $huge : 27pt; // header $LARGE : 22pt; // h1 $Large : 18pt; // h2 $large : 16pt; // h3

$normalsize : 14pt;

$small : 13pt; $footnotesize : 12pt;

// $Huge : 2.7rem; // main-header // $huge : 2.2rem; // header // $LARGE : 2rem; // h1 // $Large : 1.7rem; // h2 // $large : 1.5rem; // h3

// $normalsize : 1.1rem;

// $small : 1rem; // $footnotesize : 0.9rem;

@mixin indented-box($side-color) {

padding-left: 10px;
margin: 10px;
border-left: 4px solid $side-color;

}

@mixin float-card {

z-index: 2;
border-radius: 10px;
border-width: 0px;
margin: 10px 0;
box-shadow: 9px 9px 16px rgba(0,0,0,0.1), -9px -9px 16px rgba(0,0,0,0.01);
box-shadow: 9px 9px 16px var(--dark-shadow2, rgba(0,0,0,0.1)), -9px -9px 16px var(--dark-shadow3, rgba(0,0,0,0.01));
@include color(background-color, --float-color, #fff);

}

@mixin gray-link {

a {
    @include color(color, --gray-text, $gray_text);
    @content;

    &:hover {
        color: $blue_hover;
    }
}

}

// Break Points $desktop-min-width: 1000px; $phone-max-width: 500px;

@mixin tablet {

@media only screen and (min-width: #{$phone-max-width}) and (max-width: #{$desktop-min-width}) {
    @content;
}

}

@mixin phone {

@media only screen and (max-width: #{$phone-max-width}) {
    @content;
}

}