:root {

  /* Primary color shades */
  --md-primary-fg-color:               #1E64C8;
  /* --md-primary-fg-color--light:        hsla(#{hex2hsl($clr-indigo-400)}, 1); */
  /* --md-primary-fg-color--dark:         hsla(#{hex2hsl($clr-indigo-700)}, 1); */
  /* --md-primary-bg-color:               hsla(0, 0%, 100%, 1); */
  /* --md-primary-bg-color--light:        hsla(0, 0%, 100%, 0.7); */

  /* Accent color shades */
  --md-accent-fg-color:                #FFD200;
  /* --md-accent-fg-color--transparent:   hsla(#{hex2hsl($clr-indigo-a200)}, 0.1); */
  /* --md-accent-bg-color:                hsla(0, 0%, 100%, 1); */
  /* --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7); */

  --main-background: #FFFDF7;
  --yellow: #AD9000;
  --dark-grey: #444;
  --minor-shadow: 0 2px 8px -2px #000; /* box-shadow */
  --mid-blue: #1E64C8;
  --light-blue: #8BB1E5;

}

/****
 * Custom styles
 **/
section.tiles { margin-top: 32px; margin-bottom: 48px; }
.tile.tiny { display: inline-block; width: 100%; text-align: left; font-size: 0;}
.tile.tiny .inner { background-color: #EEE; color: var(--main-background); cursor: pointer; transition: .2s; height: 64px; position: relative; }
.tile.tiny .inner:hover { }
.tile.tiny .inner img { height: 100%; display: inline-block; }
.tile.tiny .inner h3 { margin: 0; padding: 0; line-height: 32px; position: absolute; top: 4px; left: 108px; font-family: "arial"; font-size: 24px; letter-spacing: 0px; color: #222; }
.tile.tiny .inner span {position: absolute; left: 108px; top: 32px; font-family: "arial"; font-size: 17px; color: #888; }

/****
 * Overwriting styles
 **/
article.md-content__inner iframe { border: none; }
a.md-button { border: 2px solid var(--mid-blue) !important; margin: 0 0 12px 0; }
a.md-button:hover { background-color: var(--mid-blue) !important; }
b.output { margin-left: 24px; font-size: 17px; }
.md-content ol li { line-height: 19px;}
.md-typeset pre { margin: 24px 24px 48px 24px; }
article.md-content__inner li:hover a { color: var(--light-blue) !important; }
article.md-content__inner ul li { margin: 0; padding: 0; }
article.md-content__inner h1 { color: var(--yellow); font-weight: 600; letter-spacing: 1px; }
article.md-content__inner h2 { color: var(--light-blue); font-weight: 600; letter-spacing: 1px; }
article.md-content__inner h3 { color: #1E64C8; font-weight: 600; }

/* Center images */
img.center { display: block; margin: auto; max-width: 720px; }
img.marginy { margin-top: 24px; margin-bottom: 24px; }