/* MDL wants to use Roboto everywhere.  We want to use Fira everywhere.
   Solution: pretend one is the other. */
@font-face {
  font-family: 'Roboto';
  src: local('Fira Sans');
}

/* We also want the best rendering we have available. */
body {
  font-family: 'Fira Sans', 'Helvetica Neue', 'Helvetica', 'Tahoma', sans-serif !important;
  text-rendering: optimizeLegibility;
}

/* Align and size the logo with the title. */
#content h2 img {
  max-height: 2ex;
}

/* Center-align the no-JS navigation links. */
#content nav.mdl-navigation {
  display: block;
  margin: auto;
  text-align: center;
}

/* Certain things do not belong on small screens. */
@media screen and (max-width: 851px) {
  #tagline, #content h2 img {
    display: none;
  }
}

/* No margin for the headlines. */
#content h2 {
  margin-top: 0;
}

/* Make the header actually fixed. */
@media screen and (min-width: 851px) {
  .mdl-layout--fixed-header > .mdl-layout__header {
    position: fixed;
  }
}

/* Style the links list in the main page. */
ul.links {
  list-style-type: none;
  padding-left: initial;
  font-size: 17.5px;
}
ul.links .material-icons {
  font-size: 18px;
  vertical-align: text-bottom;
}


/* Comes with MDL's article template. */
#content-layout {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#topbar .mdl-layout__header-row {
  padding-left: 40px;
}

#content-container {
  max-width: 1600px;
  width: calc(100% - 16px);
  margin: 0 auto;
}

#content {
  border-radius: 2px;
  padding: 80px 56px;
  margin-top: 80px;
  margin-bottom: 80px;
}
.mdl-layout.is-small-screen #content {
  padding: 40px 28px;
  margin-top: 0;
  margin-bottom: 0;
}