<!-- shared styles for all elements and index.html -->
<dom-module id="shared-styles">
  <template>
    <style>
      .page-title {
        @apply(--paper-font-display2);
      }

      @media (max-width: 600px) {
        .page-title {
          font-size: 24px!important;
        }
      }

      paper-material {
        border-radius: 2px;
        height: 100%;
        padding: 16px 0 16px 0;
        width: calc(98.66% - 16px);
        margin: 16px auto;
        background: white;
      }

      /* Breakpoints */

      /* Small */
      @media (max-width: 600px) {

      paper-material {
      --menu-container-display: none;
      width: calc(97.33% - 32px);
      padding-left: 16px;
      padding-right: 16px;
      }

      paper-toolbar.tall .app-name {
      font-size: 24px;
      font-weight: 400;
      }

      #drawer .paper-toolbar {
      margin-left: 16px;
      }

      #overlay {
      min-width: 360px;
      }

      .bg {
      background: white;
      }

      }

      /* Tablet+ */
      @media (min-width: 601px) {

      paper-material {
      width: calc(98% - 46px);
      margin-bottom: 32px;
      padding-left: 30px;
      padding-right: 30px;
      }

      #drawer.paper-drawer-panel > [drawer] {
      border-right: 1px solid rgba(0, 0, 0, 0.14);
      }

      iron-pages {
      padding: 48px 62px;
      }

      }
    </style>
  </template>
</dom-module>