@import url(https://fonts.googleapis.com/css?family=Lato:400);
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
@import url('https://fonts.googleapis.com/css?family=Catamaran');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:700i');


@font-face{
    font-family: 'Fira Code';
    src: url('eot/FiraCode-Light.eot');
    src: url('eot/FiraCode-Light.eot') format('embedded-opentype'),
         url('woff2/FiraCode-Light.woff2') format('woff2'),
         url('woff/FiraCode-Light.woff') format('woff'),
         url('ttf/FiraCode-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face{
    font-family: 'Fira Code';
    src: url('eot/FiraCode-Regular.eot');
    src: url('eot/FiraCode-Regular.eot') format('embedded-opentype'),
         url('woff2/FiraCode-Regular.woff2') format('woff2'),
         url('woff/FiraCode-Regular.woff') format('woff'),
         url('ttf/FiraCode-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face{
    font-family: 'Fira Code';
    src: url('eot/FiraCode-Medium.eot');
    src: url('eot/FiraCode-Medium.eot') format('embedded-opentype'),
         url('woff2/FiraCode-Medium.woff2') format('woff2'),
         url('woff/FiraCode-Medium.woff') format('woff'),
         url('ttf/FiraCode-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face{
    font-family: 'Fira Code';
    src: url('eot/FiraCode-Bold.eot');
    src: url('eot/FiraCode-Bold.eot') format('embedded-opentype'),
         url('woff2/FiraCode-Bold.woff2') format('woff2'),
         url('woff/FiraCode-Bold.woff') format('woff'),
         url('ttf/FiraCode-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

body { 
  font-family: 'Catamaran', sans-serif;
}

h1, h2, h3 {
  font-family: 'Lato', sans-serif;
}

.remark-code { 
  font-family: 'Fira Code', 'Inconsolata', 'Lucida Console', Monaco, monospace;
}

.remark-inline-code { 
  font-family: 'Fira Code', 'Inconsolata', 'Lucida Console', Monaco, monospace; 
}

/* this is not ideal, but a response to the resising issues
   discussed https://github.com/yihui/xaringan/issues/62 and
   https://github.com/yihui/xaringan/issues/143  */
   .mjx-chtml{ font-size: 100% !important; }

   .footnote {
    position: absolute;
    bottom: 0;
    padding-right: 8em; /* to avoid the page numbering */ 
  }
  /* footnote identifier use: .fn[1] */
  .fn {
    vertical-align: super;
    font-size: 60%;
  }
  .footnote {
    font-size: 0.7em;
  }
  .remark-slide-content .footnote  p, 
  .remark-slide-content .footnote li {
    font-size: 0.7em!important;
  }
  .footnote .remark-code, 
  .footnote .remark-inline-code{ font-size: 0.8em!important; }

.title-slide h2 {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
}

.title-slide h3 {
    font-family: 'Catamaran', sans-serif;
}

.hljs-github .hljs {
  overflow-y: auto;
}

/*      LaTeX style       */
.Large       , .Large .remark-code, .Large .remark-inline-code { font-size: 144%; }
.large       , .large .remark-code, .large .remark-inline-code { font-size: 120%; }
.small       , .small .remark-code, .small .remark-inline-code { font-size: 90%; }
.footnotesize, .footnotesize .remark-code, .footnotesize .remark-inline-code { font-size: 80%; }
.scriptsize  , .scriptsize .remark-code, .scriptsize .remark-inline-code { font-size: 70%; }
.tiny        , .tiny .remark-code, .tiny .remark-inline-code { font-size: 60%; }

/* or you can be more specific */
.font10 , .code10 .remark-code, .code10 .remark-inline-code{ font-size: 10%; }
.font20 , .code20 .remark-code, .code20 .remark-inline-code{ font-size: 20%; }
.font30 , .code30 .remark-code, .code30 .remark-inline-code{ font-size: 30%; }
.font40 , .code40 .remark-code, .code40 .remark-inline-code{ font-size: 40%; }
.font50 , .code50 .remark-code, .code50 .remark-inline-code{ font-size: 50%; }
.font60 , .code60 .remark-code, .code60 .remark-inline-code{ font-size: 60%; }
.font70 , .code70 .remark-code, .code70 .remark-inline-code{ font-size: 70%; }
.font75 , .code75 .remark-code, .code75 .remark-inline-code{ font-size: 75%; }
.font80 , .code80 .remark-code, .code80 .remark-inline-code{ font-size: 80%; }
.font90 , .code90 .remark-code, .code90 .remark-inline-code{ font-size: 90%; }
.font100, .code100 .remark-code, .code100 .remark-inline-code{ font-size: 100%; }
.font110, .code110 .remark-code, .code110 .remark-inline-code{ font-size: 110%; }
.font120, .code120 .remark-code, .code120 .remark-inline-code{ font-size: 120%; }
.font130, .code130 .remark-code, .code130 .remark-inline-code{ font-size: 130%; }
.font140, .code140 .remark-code, .code140 .remark-inline-code{ font-size: 140%; }
.font150, .code150 .remark-code, .code150 .remark-inline-code{ font-size: 150%; }
.font160, .code160 .remark-code, .code160 .remark-inline-code{ font-size: 160%; }
.font170, .code170 .remark-code, .code170 .remark-inline-code{ font-size: 170%; }
.font175, .code175 .remark-code, .code175 .remark-inline-code{ font-size: 175%; }
.font180, .code180 .remark-code, .code180 .remark-inline-code{ font-size: 180%; }
.font190, .code190 .remark-code, .code190 .remark-inline-code{ font-size: 190%; }
.font200, .code200 .remark-code, .code200 .remark-inline-code{ font-size: 200%; }

.brand-red { color: #e64626; }
.brand-blue { color: #0148A4; }
.brand-yellow { color: #FFB800; }
.brand-charcoal {color: #424242; }
.brand-gray {color: #F1F1F1;}
.brand-grey {color: #F1F1F1;}
.black { color: black; }
.white { color: white; }
.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.yellow { color: yellow; }
.orange { color: orange; }
.purple { color: purple; }
.gray { color: gray; }
.grey { color: gray; }

.bold { font-weight: bold; }
.bolder { font-weight: bolder; }