div.callout-caution.callout {
  border-left-color:  #d35836 !important;
}

div.callout-caution.callout-style-default>.callout-header {
  background-color: #F0EDD1 !important;
}

div.callout-caution.icon .callout-icon {
  display: unset !important;
}

div.callout-caution.callout-captioned .callout-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-dots" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>');
}

/* from styles.css */

.distill-site-nav {
  font-family: 'Quicksand';
  color: #d35836; 
  background-color: #F0EDD1;
  font-size: 20px;
  font-weight: 900;
}

.distill-site-nav a:hover {
    color: black;
  }
  
.nav-dropdown .nav-dropbtn {
    border: none;
    outline: none;
    color: #d35836;
    padding: 16px 10px;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    margin-top: 1px;
    z-index: 2;
  }
  
.nav-dropdown:hover .nav-dropbtn {
    color: black;
  }
  
.nav-dropdown-content a, .nav-dropdown-content .nav-dropdown-header {
    color: black;
    padding: 6px 24px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
.nav-dropdown-content a, .nav-dropdown-content .nav-dropdown-header {
    color: #d35836;
    padding: 6px 24px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

.nav-dropdown-content a:hover {
    background-color: #F0EDD1;
    color: black;
  }  
  
.nav-dropdown-content .nav-dropdown-header {
    display: block;
    padding: 5px 24px;
    padding-bottom: 0;
    text-transform: uppercase;
    font-size: 14px;
    color: #F0EDD1;
    white-space: nowrap;
  }  


/* base variables */

/* Edit the CSS properties in this file to create a custom
   Distill theme. Only edit values in the right column
   for each row; values shown are the CSS defaults.
   To return any property to the default,
   you may set its value to: unset
   All rows must end with a semi-colon.                      */

/* Optional: embed custom fonts here with `@import`          */
/* This must remain at the top of this file.                 */

@import url('https://fonts.googleapis.com/css2?family=Bitter');
@import url('https://fonts.googleapis.com/css2?family=Quicksand');

html {
  /*-- Main font sizes --*/
  --title-size:      50px;
  --body-size:       1.06rem;
  --code-size:       14px;
  --aside-size:      12px;
  --fig-cap-size:    13px;
  /*-- Main font colors --*/
  --title-color:     #000000;
  --header-color:    rgba(0, 0, 0, 0.8);
  --body-color:      rgba(0, 0, 0, 0.8);
  --aside-color:     rgba(0, 0, 0, 0.6);
  --fig-cap-color:   rgba(0, 0, 0, 0.6);
  /*-- Specify custom fonts ~~~ must be imported above   --*/
  --heading-font:     'Quicksand';
  --mono-font:        'Quicksand';
  --body-font:        'Quicksand';
  --navbar-font:      'Quicksand';  /* websites + blogs only */
}

/*-- ARTICLE METADATA --*/
d-byline {
  --heading-size:    0.6rem;
  --heading-color:   rgba(0, 0, 0, 0.5);
  --body-size:       0.8rem;
  --body-color:      rgba(0, 0, 0, 0.8);
}

/*-- ARTICLE TABLE OF CONTENTS --*/
.d-contents {
  --heading-size:    18px;
  --contents-size:   13px;
}

/*-- ARTICLE APPENDIX --*/
d-appendix {
  --heading-size:    15px;
  --heading-color:   rgba(0, 0, 0, 0.65);
  --text-size:       0.8em;
  --text-color:      rgba(0, 0, 0, 0.5);
}

/*-- WEBSITE HEADER + FOOTER --*/
/* These properties only apply to Distill sites and blogs  */

.distill-site-header {
  --title-size:       18px;
  --text-color:       rgba(255, 255, 255, 0.8);
  --text-size:        15px;
  --hover-color:      black;
  --bkgd-color:       #4d4819;
}

.distill-site-footer {
  --text-color:       rgba(255, 255, 255, 0.8);
  --text-size:        15px;
  --hover-color:      black;
  --bkgd-color:       #4d4819;
}

.distill-site-nav {
  font-family: 'Quicksand';
  color: #d35836; 
  background-color: #F0EDD1;
  font-size: 20px;
  font-weight: 900;
}

.distill-site-nav a:hover {
    color: black;
  }
  
/*-- Dropdown Menu --*/

.nav-dropdown .nav-dropbtn {
    border: none;
    outline: none;
    color: #d35836;
    padding: 16px 10px;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    margin-top: 1px;
    z-index: 2;
  }
  
.nav-dropdown:hover .nav-dropbtn {
    color: black;
  }
  
.nav-dropdown-content a, .nav-dropdown-content .nav-dropdown-header {
    color: black;
    padding: 6px 24px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
.nav-dropdown-content a, .nav-dropdown-content .nav-dropdown-header {
    color: #d35836;
    padding: 6px 24px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

.nav-dropdown-content a:hover {
    background-color: #F0EDD1;
    color: black;
  }  
  
.nav-dropdown-content .nav-dropdown-header {
    display: block;
    padding: 5px 24px;
    padding-bottom: 0;
    text-transform: uppercase;
    font-size: 14px;
    color: #F0EDD1;
    white-space: nowrap;
  }  

/*-- Additional custom styles --*/
/* Add any additional CSS rules below                      */

  
/*IMPORT CUSTOM FONTS FROM GOOGLE*/
/* Import fonts from Google's API */
@import url('https://fonts.googleapis.com/css2?family=Bitter');
@import url('https://fonts.googleapis.com/css2?family=Quicksand');

/*USE THOSE FONTS THROUGHOUT*/
/* Use specific font in the body of the text */
html, body, p {
  
  font-family: 'Quicksand';
  font-weight: 200;
  line-height: 1.3; 
  font-size: 1.0em;
  color: #333333;
  font-style: normal;
  
}  

/* Change appearance of headers */
h1, h2, h3, h4, h5 {
  font-family: 'Quicksand';
  color: color: #676565;
}


/* unilur colors ???? */

div.callout-caution.callout {
  border-left-color: #d35836 !important;
}

div.callout-caution.callout-style-default>.callout-header {
  background-color: #F0EDD1 !important;
}

div.callout-caution.icon .callout-icon {
  display: unset !important;
}