WebJamApps/breakpointministries

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; // 10px/16px = 62.5% -> 1rem = 10px
  @media only screen and (max-width: $bp-largest) {
    font-size: 50%; // 1rem = 8px;
  }
}

body {
  font-weight: $font-weight-extra-light;
  line-height: 1.6;
  font-family: $default-font-family;
  overflow-y: hidden;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-rows: minmax(95vh, auto) 1fr;
  grid-template-columns: [sidebar-start] minmax(min-content, max-content) [sidebar-end full-start] minmax(5rem, .4fr) [center-start] repeat(8, [col-start] minmax(min-content, 8rem) [col-end]) [center-end] minmax(5rem, .4fr) [full-end];

  
  @media only screen and (max-width: $bp-med) {
    @include scrollbarOverride;
    grid-template-rows: min-content auto min-content;
    grid-template-columns: [full-start] minmax(2rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(2rem, 1fr) [full-end];
  }
  
  .page-content {
    margin: auto;
    width: 79vw;
    height: 100vh;

    @media only screen and (max-width: $bp-ipad-land) {
      overflow-y: auto;
      @include scrollbarOverride;
    }

    @media only screen and (max-width: $bp-med) {
      width: 95vw;
      height: auto;
    }

    @media only screen and (max-width: $bp-galaxy-fold) {
      input#title, input#blogtitle {
        width: 30.5rem !important;
      }
    }
  }

  &.close {
    .blog-container {
      display: none;
    }
    .footer {
      display: none;
    }
  }
}