@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,600');
@import url('https://fonts.googleapis.com/css?family=Raleway:400,600');

h1, h2, h3 {
  font-family: 'Raleway', Helvetica, sans-serif;
  margin-bottom: 0;
  margin-top: 20px;
}

.remark-slide-content h1 {
  font-size:45px;
}

body {
  font-family: 'Source Sans Pro', Helvetica, sans-serif;
}

a:hover {
  border-bottom-color: transparent;
  color: #0d3b66 !important;
}

a, a > code {
  -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
  -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
  -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
  border-bottom: dotted 1px rgba(160, 160, 160, 0.65);
  color: inherit;
  text-decoration: none;
}

.title {
  font-size:100px;
  padding: 15px 0;
  font-weight: 600;
  display:inline-block;
}
.largecode p{
  font-size:30px;
  font-family: monospace;
  margin: 0;
}

.thesisplot img{
  height: 400px;
}

.larger p {
  font-size: 36px;
}

.larger h1 {
  font-size: 90px;
}
.larger h2 {
  font-size: 80px;
}

.left-side {
  height: 100%;
  width: 33%;
  padding: 0;
  margin: 1em 4em 1em 4em;
}

.left-side .pull-left {
  float: left;
  width: 33%;
  height: 100%;
  margin-bottom:20px;
}

.left-side .pull-right {
  float: right;
  width: 64%;
  margin-bottom:20px;
}

.right-side {
  height: 100%;
  width: 33%;
  padding: 0;
  margin: 1em 4em 1em 4em;
}

.right-side .pull-left {
  float: left;
  width: 64%;
  margin-bottom:20px;
}

.right-side .pull-right {
  float: right;
  width: 33%;
  height: 100%;
  margin-bottom:20px;
}

.portrait {
  padding: 2em;
}

.portrait img{
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.portrait p{
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 6em;
  background-color: #0d3b66;
  color: #ee964b;
  text-align: center;
}

.bg-blond {
  background-color: #faf0ca !important;
}

.bg-yellow {
  background-color: #f4d35e !important;
}

.iframe-page {
  padding: 0
}

.iframe-page iframe {
  border: none
}

.feature {
  background-color: #faf0ca !important;
  color: #0d3b66 !important;
}

.feature h1 {
  color: #ee964b;
  text-shadow: 1px 1px 2px #f4d35e;
  font-size: 4em;
  font-weight: 700;
}

.feature h2{
  font-size: 2em;
  font-weight: 700;
}

.topic-starter{
  background-color: #faf0ca !important;
  color: #135593 !important;
  background-image: url("../resources/butterfly-banner.jpg");
  background-position: top;
}

.topic-starter h1{
  padding-top: 38%;
  text-shadow: 1px 1px 2px #f4d35e;
  font-size: 4em;
  font-weight: 700;
}

.box-12 {
  width: 100%;
  border-radius: 25px;
  padding: 5px 0px 5px 25px;
  background-color: #ffffff99;
}

.box-12.opaque {
  width: 100%;
  border-radius: 25px;
  padding: 5px 0px 5px 25px;
  background-color: #ffffff;
}

.box-12 p{
  margin: 10px 20px 0px 0px;
}

.sticker-float img{
	height: 200px;
	float: right;
}

.float-right{
  float: right;
}

.face-border img{
  height: 200px;
  border-radius: 25%;
}

.sticker-left img{
	height: 150px;
}

.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}

.sticker-content-right img{
  display: inherit;
}

.sticker img{
  height: 200px;
}

p, li {
    font-size: 30px;
}

.footnote {
  position: absolute;
  bottom: 0;
  padding-right: 4em;
  font-size: 90%;
  background-color: #faf0cacc;
  width: 100%;
  margin-left: -4.5em;
  padding-left: 20px;
}

.footnote p {
  margin: 0.25em 0;
}

.shadowText {
  text-shadow: 0 0 20px #333;
}

.center {
  text-align: left;
}

.bottom {
  position:absolute;
  bottom:33px;
}

.bottom-margin{
  margin-top:40%;
}

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

.remark-code-line-highlighted     { background-color: #ffff88; }

.r.remark-code {
  font-size:18px;
  border-radius: 10px;
}

.remark-code {
	text-shadow: 0 0 0 #fff;
	font-size: 14px;
}
.remark-slide-content{
  background-color: #fbfbfb;
  color: #333333;
}
.inverse {
  background-color: #faf0ca;
  color: #0d3b66;
}
.inverse h1, .inverse h2, .inverse h3 {
  color: #0d3b66;
}
.inverse h1{
  font-weight: 600;
}

/* Two-column layout */
.left-column {
  color: #777;
  width: 20%;
  height: 92%;
  float: left;
}
.left-column h2:last-of-type, .left-column h3:last-child {
  color: #000;
}
.right-column {
  width: 75%;
  float: right;
  padding-top: 1em;
}
.pull-left {
  float: left;
  width: 50%;
  margin-bottom:20px;
}
.pull-right {
  float: right;
  width: 50%;
  margin-bottom:20px;
}

.plot-right-absolute{
  position: absolute;
  width: 55%;
  right: 10px;
  top: 10%;
}

.full-width{
  width: 100%;
}

.sticker-hint{
  position: absolute;
  bottom: 120px;
  right: -30px;
  transform: rotate(-45deg);
}

.small-print{
  position:absolute;
  bottom: 10px;
  left: 30px;
}

.small-print p{
  font-size:18px;
}

.full-width p{
  margin: 3px;
}

.card{
  padding-left: 10px;
}

.table{
	width: 100%;
	text-align: center;
  background-color: #fbfbfb;
  color: #333333;
}

.table > tbody > tr > td.success {
	background-color: #dff0d8;
}

.table > tbody > tr > td.warning {
	background-color: #fcf8e3;
}

.table > tbody > tr > td.danger {
	background-color: #f2dede;
}

.mjx-chtml{ font-size: 110% !important; }

.vis-background{
  background-color: #ffffff;
}
.vis-timeline{
  margin:10px 0;
}

img, video, iframe {
  max-width: 100%;
}
blockquote {
  border-left: solid 5px lightgray;
  padding-left: 1em;
}
table {
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
table thead th { border-bottom: 1px solid #ddd; }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(even) { background: #eee }

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

.error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  padding: 15px;
  padding-right: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 4px;
}

.warn {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
  padding: 15px;
  padding-right: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 4px;
}