/* Self hosted material design fonts */
@import '~material-design-icons/iconfont/material-icons.css';

.app {
  height: 100vh; // emmet h100vh
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: white;
}

p {
  margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1.5em !important;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0.3em;
}

h1.voffset,
h2.voffset,
h3.voffset,
h4.voffset,
h5.voffset,
h6.voffset {
  margin-top: 3em;
}

pre {
  margin: 2em 0;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px !important;
  line-height: 1.42857143;
  word-break: break-all;
  word-wrap: break-word;
  color: #333333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace !important;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Material Design Adaptive Breakpoints by @eyecatchup     */
/* https://gist.github.com/eyecatchup/9e847b05f15efccc1a29 */
/*
Below you'll find CSS media queries based on the breakpoint guidance
published by the Material Design team. You can choose to use, customise
or remove these breakpoints based on your needs.

http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
*/

.store-content-container {
  padding-left:  5%;
  padding-right: 5%;
}

/* desktop-medium */
@media all and (min-width: 841px) and (max-width: 1280px) {
  .store-content-container {
    padding-left: 10%;
    padding-right: 10%;
  }
}
/* desktop-large */
@media all and (min-width: 1281px) and (max-width: 1440px) {
  .store-content-container {
    padding-left: 10%;
    padding-right: 10%;
  }
}
/* desktop-large-2 */
@media all and (min-width: 1441px) and (max-width: 1600px) {
  .store-content-container {
    padding-left: 10%;
    padding-right: 10%;
  }
}
/* desktop-large-3 */
@media all and (min-width: 1601px) and (max-width: 1920px) {
  .store-content-container {
    padding-left: 10%;
    padding-right: 10%;
  }
}

/* desktop-xlarge */
@media all and (min-width: 1920px) {
  .store-content-container {
    padding-left: 15%;
    padding-right: 15%;
  }
}

.store-content-container-narrow {
  padding-left:  5%;
  padding-right: 5%;
}

  /* desktop-medium */
  @media all and (min-width: 841px) and (max-width: 1280px) {
  .store-content-container-narrow {
    padding-left: 20%;
    padding-right: 20%;
  }
}
/* desktop-large */
@media all and (min-width: 1281px) and (max-width: 1440px) {
  .store-content-container-narrow {
    padding-left: 22%;
    padding-right: 22%;
  }
}
/* desktop-large-2 */
@media all and (min-width: 1441px) and (max-width: 1600px) {
  .store-content-container-narrow {
    padding-left: 24%;
    padding-right: 24%;
  }
}
/* desktop-large-3 */
@media all and (min-width: 1601px) and (max-width: 1920px) {
  .store-content-container-narrow {
    padding-left: 30%;
    padding-right: 30%;
  }
}

/* desktop-xlarge */
@media all and (min-width: 1920px) {
  .store-content-container-narrow {
    padding-left: 32%;
    padding-right: 32%;
  }
}
