body {
    background-color:rgb(247, 247, 247);
    font-family: 'Roboto', sans-serif;
}


.body {
  padding-left: 1em;
  padding-right: 1em;

  padding-top: 1em;
}

.drawer {
  background-color: white;
}

.header-link {
  text-decoration: none;
  color: white;
}

.title-link {
  text-decoration: none;
  color:#673AB7;

  -webkit-margin-before: 0.1em;
  -webkit-margin-after: 0.1em;
}

h1 {
  font-size:24px;
  font-weight:bold;
  color:#673AB7;
  -webkit-margin-before: 0.1em;
  -webkit-margin-after: 0.1em;
}

h2 {
  font-size:20px;
  font-weight:bold;
  opacity:0.87;
}

h3 {
  font-size:16px;
  font-weight:bold;
  opacity:0.87;

  padding: 0px;
  margin: 0px;
  border: 0;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}

h4 {
  font-family: 'Roboto', sans-serif;
  opacity:0.54;
  font-weight:normal;
  padding: 0px;
  margin: 0px;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;

}

img {
  max-width: 100%;
}

paper-card {
  width: 100%;
  margin-bottom: 16px;

}
.avatar {
  display: inline-block;
  height: 64px;
  width: 64px;
  border-radius: 50%;
  background: var(--paper-pink-500);
  color: white;
  line-height: 64px;
  font-size: 30px;
  text-align: center;
}
.fancy .title {
  position: absolute;
  top: 30px;
  left: 100px;
  color: var(--paper-indigo-500);
}
.fancy img {
  width: 100%;
}
.fancy .big {
  font-size: 22px;
  padding: 8px 0 16px;
  color: var(--google-grey-500);
}
.fancy .medium {
  font-size: 16px;
  padding-bottom: 8px;
}

.article-card .title {
  /*position: absolute;
  top: 30px;
  left: 100px;*/
  color:#673AB7;
}
.article-card img {
  /*width: 100%;*/
}
.article-card .big {
  font-size: 24px;
  font-weight:bold;
  padding: 8px 0 16px;
  color:#673AB7;
}
.article-card .medium {
  font-size: 16px;
  padding-bottom: 8px;
}

.youtube-video-box {
  position:   relative;
  width:      100%;
  height: 0;
  padding-top:   66.6%; /* This is your aspect ratio */ }

.youtube-video {
  position: absolute;
  top:      0;
  left:     0;
  bottom:   0;
  right:    0;
  width:    100%;
  height:   100%
}

/**
 * Syntax highlighting styles
 */
.highlight {
  background: #fff; }
  .highlight .c {
    color: #998;
    font-style: italic; }
  .highlight .err {
    color: #a61717;
    background-color: #e3d2d2; }
  .highlight .k {
    font-weight: bold; }
  .highlight .o {
    font-weight: bold; }
  .highlight .cm {
    color: #998;
    font-style: italic; }
  .highlight .cp {
    color: #999;
    font-weight: bold; }
  .highlight .c1 {
    color: #998;
    font-style: italic; }
  .highlight .cs {
    color: #999;
    font-weight: bold;
    font-style: italic; }
  .highlight .gd {
    color: #000;
    background-color: #fdd; }
  .highlight .gd .x {
    color: #000;
    background-color: #faa; }
  .highlight .ge {
    font-style: italic; }
  .highlight .gr {
    color: #a00; }
  .highlight .gh {
    color: #999; }
  .highlight .gi {
    color: #000;
    background-color: #dfd; }
  .highlight .gi .x {
    color: #000;
    background-color: #afa; }
  .highlight .go {
    color: #888; }
  .highlight .gp {
    color: #555; }
  .highlight .gs {
    font-weight: bold; }
  .highlight .gu {
    color: #aaa; }
  .highlight .gt {
    color: #a00; }
  .highlight .kc {
    font-weight: bold; }
  .highlight .kd {
    font-weight: bold; }
  .highlight .kp {
    font-weight: bold; }
  .highlight .kr {
    font-weight: bold; }
  .highlight .kt {
    color: #458;
    font-weight: bold; }
  .highlight .m {
    color: #099; }
  .highlight .s {
    color: #d14; }
  .highlight .na {
    color: #008080; }
  .highlight .nb {
    color: #0086B3; }
  .highlight .nc {
    color: #458;
    font-weight: bold; }
  .highlight .no {
    color: #008080; }
  .highlight .ni {
    color: #800080; }
  .highlight .ne {
    color: #900;
    font-weight: bold; }
  .highlight .nf {
    color: #900;
    font-weight: bold; }
  .highlight .nn {
    color: #555; }
  .highlight .nt {
    color: #000080; }
  .highlight .nv {
    color: #008080; }
  .highlight .ow {
    font-weight: bold; }
  .highlight .w {
    color: #bbb; }
  .highlight .mf {
    color: #099; }
  .highlight .mh {
    color: #099; }
  .highlight .mi {
    color: #099; }
  .highlight .mo {
    color: #099; }
  .highlight .sb {
    color: #d14; }
  .highlight .sc {
    color: #d14; }
  .highlight .sd {
    color: #d14; }
  .highlight .s2 {
    color: #d14; }
  .highlight .se {
    color: #d14; }
  .highlight .sh {
    color: #d14; }
  .highlight .si {
    color: #d14; }
  .highlight .sx {
    color: #d14; }
  .highlight .sr {
    color: #009926; }
  .highlight .s1 {
    color: #d14; }
  .highlight .ss {
    color: #990073; }
  .highlight .bp {
    color: #999; }
  .highlight .vc {
    color: #008080; }
  .highlight .vg {
    color: #008080; }
  .highlight .vi {
    color: #008080; }
  .highlight .il {
    color: #099; }

/**
 * Code formatting
 */
pre,
code {
  font-size: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  background-color: #eef; }

/*code {
  padding: 1px 5px; }*/

pre {
  padding: 8px 12px;
  overflow-x: scroll; }
  pre > code {
    border: 0;
    padding-right: 0;