/* Theme colors. */
:root {
  --mdc-theme-primary: #23c332; /***/
  /* --mdc-theme-primary: #00ff00; */
  --mdc-theme-secondary: #f5f5f5 ; /*#676778;*/
  --mdc-theme-background: #fff;
  --mdc-theme-surface: #fff;
  --mdc-theme-error: #b71c1c;
  --mdc-theme-on-primary: #fff;
  --mdc-theme-on-secondary: #fff;
  --mdc-theme-on-surface: #000;
  --mdc-theme-on-error: #fff;
  --mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
  --mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
  --mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
  --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
  --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-primary-on-dark: #fff;
  --mdc-theme-text-secondary-on-dark: hsla(0, 0%, 100%, 0.7);
  --mdc-theme-text-hint-on-dark: hsla(0, 0%, 100%, 0.5);
  --mdc-theme-text-disabled-on-dark: hsla(0, 0%, 100%, 0.5);
  --mdc-theme-text-icon-on-dark: hsla(0, 0%, 100%, 0.5);
}

/* Layout grid spacing. */
:root {
  --mdc-layout-grid-margin-desktop: 24px;
  --mdc-layout-grid-gutter-desktop: 24px;
  --mdc-layout-grid-column-width-desktop: 72px;
  --mdc-layout-grid-margin-tablet: 16px;
  --mdc-layout-grid-gutter-tablet: 16px;
  --mdc-layout-grid-column-width-tablet: 72px;
  --mdc-layout-grid-margin-phone: 16px;
  --mdc-layout-grid-gutter-phone: 16px;
  --mdc-layout-grid-column-width-phone: 72px;
}

/** RESPONSIVE SETTINGS **/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
  .card-container .aura-card h1 {
    font-size: 1.4rem;
  }
  .card-container .aura-card h2 {
    font-size: 1.3rem;
    line-height: 1.9rem;
  }
  .card-container .aura-card h3 {
    font-size: 1.2rem;
  }
  .card-container .aura-card h4 {
    font-size: 0.9rem;
  }
  .heading.subtitle {
    font-size: 1.3rem;
  }
  .card-container.list .aura-card.category .heading.subtitle {
    font-size: 1.2rem;
    color: var(--mdc-theme-primary);
  }
  .category-info .aura-icons {
    width: 48px;
    height: 56px;
    margin-left: 8px;
    margin-right: 16px;
  }
  .category-info .aura-icons > * {
    background-size: 48px;
  }
  .card-container.list .aura-card.category {
    height: auto;
  }
  /* FIXME: width should work with 100%, height should adapt */
  #aura-host-list .card-container .aura-card.host {
    height: 320px;
    width: 320px;
  }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  .card-container .aura-card h1 {
    font-size: 1.8rem;
  }
  .card-container .aura-card h2 {
    font-size: 1.5rem;
  }
  .card-container .aura-card h3 {
    font-size: 1.2rem;
  }
  .card-container .aura-card h4 {
    font-size: 1.15rem;
  }
  .heading.subtitle {
    font-size: 1.5rem;
  }
  .card-container.list .aura-card.category {
    width: 299px;
    height: 460px;
  }
  .card-container.list .aura-card.category .heading.subtitle {
    font-size: 1.2rem;
    color: var(--mdc-theme-primary);
  }
  .show-overview .aura-icons {
    width: 68px;
    height: 68px;
  }
  .show-overview .aura-icons > * {
    background-size: 68px;
  }
  .card-container.list:not(.contained) .aura-card.show {
    width: calc(33% - 14px);
  }
  .card-container.detail .aura-card.show .show-image {
    width: 320px;
    height: 180px;
  }
  #aura-host-list .card-container .aura-card.host {
    width: 307px;
    height: 307px;
  }
  #aura-show-list .category-info .heading > * {
    margin-left: 33%;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}