.remark-slide-content {
  background-image: url("https://www.dropbox.com/s/ff7nr4n2dcm59de/useR_logo.png?dl=1"), linear-gradient(to bottom, white 85%, rgba(227, 227, 227) 95%) ;
  background-position: 20px 590px , center;
  background-size: 85px , 100% 100%, cover ;
}

.remark-slide-content h1, .remark-slide-content h2, .remark-slide-content h3 {
  color: #454647;
  font-weight: bold;
}

.title-slide {
  background-image: url("https://www.dropbox.com/s/ff7nr4n2dcm59de/useR_logo.png?dl=1"), linear-gradient(to bottom, white 85%, rgba(227, 227, 227) 95%)  ;
  background-position: 5% 15%, center ;
  background-size: 160px, 100% 100%, cover ;
}

.title-slide h1 {
  position: absolute;
  bottom: 15%;
  text-align: left;
  color: #454647;
  font-weight: bold;
}

.title-slide h2 {
  font-size: 0pt;
}

.title-slide h3 {
  margin-top: -40px;
  text-align: left;
  position: relative ;
  top: 300px;
  color: #454647;
  font-weight: normal;
}

.chapter-slide {
  background-color: #1464b4;
  background-image: url();
}

.chapter-slide h1 {
  position: absolute;
  top: 55%;
  left: 10%;
  text-align: left;
  color: #e8e8e8 ;
}

/* Two-column layout */
.left-column {
  width: 20%;
  float: left;
  margin-top: -30px;
}

.right-column {
  width: 75%;
  float: right;
  margin-top: -30px;
}

.pull-left {
  float: left;
  width: 47%;
  margin-top: -30px;
}
.pull-right {
  float: right;
  width: 47%;
  margin-top: -30px;
}

/************************************
 *
 * Template-independent CSS code for formatting xaringan presentations
 *
 * For that extra bit of "hygge"
 *
 ************************************/


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


.Large { font-size: 144% }
.large { font-size: 120% }
.small { font-size: 90% }
.footnotesize { font-size: 80% }
.scriptsize { font-size: 70% }
.tiny { font-size: 60% }

.black { color: black; }
.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; }


.code { font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace; }

/******************
 * 
 * Coloured content boxes
 *
 ****************/


.content-box { 
    box-sizing: content-box;
    	background-color: #e2e2e2;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}


.content-box-blue,
.content-box-gray,
.content-box-grey,
.content-box-army,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
    border-radius: 15px;
    margin: 0 0 25px;
    overflow: hidden;
    padding: 20px;
    width: 100%;
}

.content-box-blue {
    background-color: #F0F8FF;

}

.content-box-gray {
    background-color: #e2e2e2;
}

.content-box-grey {
	background-color: #F5F5F5;
}

.content-box-army {
	background-color: #737a36;
}

.content-box-green {
	background-color: #d9edc2;
}

.content-box-purple {
	background-color: #e2e2f9;
}

.content-box-red {
	background-color: #f9dbdb;
}

.content-box-yellow {
	background-color: #fef5c4;
}


.full-width {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
}