/**
* Content:
* 1. Template variables 
* 2. Override default Bootstrap variables
* 3. Set color and background class names
*
* Learn more about CSS variables at https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
*/

/***************
1. Template variables
***************/
:root {

    /* Fonts */
    --font-eb-garmond-italic: 'EBGaramond-Italic';
    --font-eb-garmond-regular: 'EBGaramond-Regular';
    --font-eb-garmond-bold: 'EBGaramond-Bold';
    --font-jost-regular: 'Jost-Regular';
    --font-jost-medium: 'Jost-Medium';
    --font-jost-semibold: 'Jost-SemiBold';


    /* Colors */
    /* The *-rgb color names are simply the RGB converted value of the corresponding color for use in the rgba() function */
  
    /* Default text color */
    --color-default: #50523E;
    --color-default-rgb: 80, 82, 62;
  
    /* Default border color */
    --color-border: #9F5E02;
    --color-border-rgb: 159, 94, 2;

    /* Defult links color */
    --color-links: #50523E;
    --color-links-hover: #9F5E02;

    /* Defult buttons color */
    --color-button: #DED1D1;
    --color-button-hover: #C7C3B5;

    /* Primay colors */
    --color-primary: #F7E9E4;
    --color-primary-rgb: 247, 233, 228;

    /* Secondary colors */
    --color-secondary: #C7C3B5;
    --color-secondary-rgb: 199, 195, 181;

    /* Third colors */
    --color-third: #DED1D1;
    --color-third-rgb: 222, 209, 209;

    /* White */
    --color-white: #fff;
    --color-white-rgb: 255, 255, 255;

    /*Transitions*/
    --rbcode-transition: all 0.3s ease-in-out;
  }

  
  
  /***************
  2. Override default Bootstrap variables
  ***************/
  :root {
  
  }
  
  /***************
  3. Set fonts, color and background class names
  ***************/
  /* Fonts */
  .font-jost-regular { font-family: var(--font-jost-regular) !important; }
  .font-jost-medium { font-family: var(--font-jost-medium) !important; }
  .font-jost-semibold { font-family: var(--font-jost-semibold) !important; }
  .font-eb-garmond-italic { 
    font-family: var(--font-eb-garmond-italic) !important; 
    font-size:2.4vw;
    text-transform: uppercase;
  }
  .font-eb-garmond-bold { 
    font-family: var(--font-eb-garmond-bold) !important;
    font-size:2.4vw;
    text-transform: uppercase;
  }
  .font-eb-garmond-regular { 
    font-family: var(--font-eb-garmond-regular) !important; 
    font-size:2.4vw;
    text-transform: uppercase;
  }

  @media(max-width:992px) {
    h1.font-eb-garmond-regular, h1.font-eb-garmond-bold, h1.font-eb-garmond-italic,
    h2.font-eb-garmond-regular, h2.font-eb-garmond-bold, h2.font-eb-garmond-italic {
      font-size:5vw;
    }
    h3.font-eb-garmond-regular, h3.font-eb-garmond-bold, h3.font-eb-garmond-italic {
      font-size:5vw;   
    }

  }
  @media(max-width:576.98px) {
    h1.font-eb-garmond-regular, h1.font-eb-garmond-bold, h1.font-eb-garmond-italic,
    h2.font-eb-garmond-regular, h2.font-eb-garmond-bold, h2.font-eb-garmond-italic {
      font-size:7.3vw; 
    }
    h3.font-eb-garmond-regular, h3.font-eb-garmond-bold, h3.font-eb-garmond-italic {
      font-size:5vw; 
    }
  }



  
  /* Text Colors */
  .color-default { color: var(--color-default) !important; }
  .color-links { color: var(--color-links) !important; }
  .color-links:hover { color: var(--color-links-hover) !important; }
  .color-primary { color: var(--color-primary) !important; }

  /* Background Colors */
  .bg-default { background-color: var(--color-default) !important; }
  .bg-primary { background-color: var(--color-primary) !important; }
  .bg-secondary { background-color: var(--color-secondary) !important; }