/* ——————————————————- !! This file was generated by xaringanthemer !! Changes made to this file directly will be overwritten * if you used xaringanthemer in your xaringan slides Rmd Issues or likes? * - https://github.com/gadenbuie/xaringanthemer * - https://www.garrickadenbuie.com Need help? Try: * - vignette(package = “xaringanthemer”) * - ?xaringanthemer::style_xaringan * - xaringan wiki: https://github.com/yihui/xaringan/wiki * - remarkjs wiki: https://github.com/gnab/remark/wiki Version: 0.2.0.9100 ——————————————————- */ @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap); @import url(https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap); @import url(https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css);

:root { /* Fonts */ –text-font-family: ‘Noto Sans’; –text-font-is-google: 1; –text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial; –text-font-base: sans-serif; –header-font-family: Cabin; –header-font-is-google: 1; –code-font-family: ‘Fira Code’; –code-font-is-google: 0; –base-font-size: 20px; –text-font-size: 1rem; –code-font-size: 0.9rem; –code-inline-font-size: 1em; –header-h1-font-size: 2.75rem; –header-h2-font-size: 2.25rem; –header-h3-font-size: 1.75rem; –column-slide-font-size: 0.9rem; –column-header-font-size: 1.25rem;

/* Colors / –text-color: #40514e; / –header-color: #11999e; */ –header-color: #4f86a7; –background-color: #f3f6f6; –link-color: #0000ff; –text-bold-color: #23395b; –code-highlight-color: rgba(255, 255, 0, 0.5); –inverse-text-color: #f3f6f6; –inverse-background-color: #4f86a7; –inverse-header-color: #E9EBEE; –title-slide-background-color: #f3f6f6; –title-slide-text-color: #FFD100; –title-slide-text-color-main: #003B5C; –title-slide-text-color-sub: #FFD100; –title-slide-text-color-date: #003B5C; –header-background-color: #f3f6f6; –header-background-text-color: #40514e; –base: #23395b; –white: #E9EBEE; –black: #18273F; }

/Add some logos to the title/ .ucla-seal-left { content: "“; position: absolute; bottom: 15px; left: 80px; height: 120px; width: 120px; background-repeat: no-repeat; background-size: contain; background-image: url(”UCLA_seal.png"); }

.fsph-logo-right { content: ""; position: absolute; bottom: 15px; right: 20px; height: 80px; width: 240px; background-repeat: no-repeat; background-size: contain; background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/da/UCLA_Fielding_School_of_Public_Health_logo.png); }

.wic-logo-right { content: "“; position: absolute; top: 20px; right: 40px; height: 100px; width: 200px; background-repeat: no-repeat; background-size: contain; background-image: url(”wic_logo.jpeg"); }

.cran-logo-right { content: "“; position: absolute; top: 20px; right: 40px; height: 80px; width: 80px; background-repeat: no-repeat; background-size: contain; background-image: url(”Rlogo.svg"); }

html { font-size: var(–base-font-size); }

body { font-family: var(–text-font-family), var(–text-font-family-fallback), var(–text-font-base); font-weight: normal; color: var(–text-color); }

h1, h2, h3 { font-family: var(–header-font-family); font-weight: 600; color: var(–header-color); }

.remark-slide-content { background-color: var(–background-color); font-size: 1rem; padding: 16px 64px 16px 64px; width: 100%; height: 100%; }

.remark-slide-content h1 { font-size: var(–header-h1-font-size); }

.remark-slide-content h2 { font-size: var(–header-h2-font-size); }

.remark-slide-content h3 { font-size: var(–header-h3-font-size); }

.remark-code, .remark-inline-code { font-family: var(–code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; }

.remark-code { font-size: var(–code-font-size); }

.remark-inline-code { font-size: var(–code-inline-font-size); color: #23395b; }

.remark-slide-number { color: #23395b; opacity: 0; font-size: 0.6em; }

strong { color: var(–text-bold-color); }

a, a>code { color: var(–link-color); text-decoration: none; }

.footnote { position: absolute; bottom: 30px; padding-right: 4em; font-size: 0.6em; }

.remark-code-line-highlighted { background-color: var(–code-highlight-color); }

.inverse { background-color: var(–inverse-background-color); color: var(–inverse-text-color);

}

.inverse h1, .inverse h2, .inverse h3 { color: var(–inverse-header-color); }

.title-slide { color: var(–title-slide-text-color); }

.title-slide h1 { color: var(–title-slide-text-color-main); font-size: 2.5rem; }

.title-slide h2 { color: var(–title-slide-text-color-sub); }

.title-slide h3 { color: var(–title-slide-text-color-date); }

.title-slide { background-color: var(–title-slide-background-color); }

.title-slide .remark-slide-number { display: none; }

/* Two-column layout */ .left-column { width: 30%; height: 92%; float: left; font-size: var(–column-slide-font-size); }

.left-column h2, .left-column h3 { color: #23395b99; font-size: var(–column-header-font-size); }

.left-column h2:last-of-type, .left-column h3:last-child { color: #23395b; }

.right-column { width: 70%; float: right; padding-top: 1em; }

.pull-left { float: left; width: 47%; }

.pull-right { float: right; width: 47%; }

.pull-right~* { clear: both; }

img, video, iframe { max-width: 100%; }

blockquote { border-left: solid 5px #23395b80; padding-left: 1em; }

.remark-slide table { margin: auto; border-top: 1px solid #666; border-bottom: 1px solid #666; }

.remark-slide table thead th { border-bottom: 1px solid #ddd; }

th, td { padding: 5px; }

.remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { background: #D3D7DE; }

table.dataTable tbody { background-color: var(–background-color); color: var(–text-color); }

table.dataTable.display tbody tr.odd { background-color: var(–background-color); }

table.dataTable.display tbody tr.even { background-color: #D3D7DE; }

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background-color: rgba(255, 255, 255, 0.5); }

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: var(–text-color); }

.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(–text-color) !important; }

/* Slide Header Background for h1 elements */ .remark-slide-content.header_background>h1 { display: block; position: absolute; top: 0; left: 0; width: 100%; background: var(–header-background-color); color: var(–header-background-text-color); padding: 2rem 64px 1.5rem 64px; margin-top: 0; box-sizing: border-box; }

.remark-slide-content.header_background { padding-top: 7rem; }

@page { margin: 0; }

@media print { .remark-slide-scaler { width: 100% !important; height: 100% !important; transform: scale(1) !important; top: 0 !important; left: 0 !important; } }

.base { color: var(–base); }

.bg-base { background-color: var(–base); }

.white { color: var(–white); }

.bg-white { background-color: var(–white); }

.black { color: var(–black); }

.bg-black { background-color: var(–black); }

.blockquote p { margin-top: 0px; margin-bottom: 5px; }

.blockquote>h1:first-of-type { margin-top: 0px; margin-bottom: 5px; }

.blockquote>h2:first-of-type { margin-top: 0px; margin-bottom: 5px; }

.blockquote>h3:first-of-type { margin-top: 0px; margin-bottom: 5px; }

.blockquote>h4:first-of-type { margin-top: 0px; margin-bottom: 5px; }

/************************ * Font size and colours ************************/

/* 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%; }

.indian-red { color: rgb(139, 58, 58); }

.dodger-blue { color: rgb(16, 78, 139); }

.pull-down { position: absolute; bottom: 50px; }