@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

@font-face {
  font-family: logo;
  src: 
    url(../fonts/spartan-bold.woff2) format('woff2'),
    url(../fonts/spartan-bold.woff) format('woff'),
    url(../fonts/spartan-bold.ttf);
}
@font-face {
  font-family: subheading;
    src: 
      url(../fonts/mplus1-black.woff2) format('woff2'),
      url(../fonts/mplus1-black.woff) format('woff'),
      url(../fonts/mplus1-black.ttf);
}
@font-face {
  font-family: heading;
  src: 
    url(../fonts/ostrichsans-bold.woff2) format('woff2'),
    url(../fonts/ostrichsans-bold.woff) format('woff'),
    url(../fonts/ostrichsans-bold.otf);
}
@font-face {
  font-family: body;
  src: 
    url(../fonts/lato-regular.woff2) format('woff2'),
    url(../fonts/lato-regular.woff) format('woff'),
    url(../fonts/lato-regular.ttf);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
html {
  scroll-behavior: smooth;
  overflow-y: scroll;
  overflow-x: hidden;
}
body {
  /*background-color: var(--neutral);*/
}
main {
     margin-bottom: 10rem;
}
article {
    color: var(--text);
    width: calc(100% - var(--fixedWidth) * 2);
    margin-left: calc(var(--fixedWidth) + 5rem);
    font-size: 1.2rem;
    color: var(--neutral);
    min-height: 100%;
    margin-top: 2rem;
}
body:has(.quoteMobile) article,
article:has(.overlap) {
    /*width: calc(100% - var(--fixedWidth) * 2);*/
}

article p {
  margin: 0;
}
h1 {
  grid-area: h1;
  color: var(--light);
  background-color: var(--neutral);
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  font-size: 2rem;
  text-transform: lowercase;
}
h1 {
  font-weight: normal;
}
h1 span {
  font-weight: bold;
}
a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
 }
 article a {
  color: var(--main);
  text-decoration: underline;
 }
 ul,
 ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
 }
/* =============================================================================
  HTML, BODY
============================================================================= */
body {
  font-family: body;
  line-height: 1.8;
}
  .wrapper {
      min-height: 100%;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      grid-template-areas:
          "logoContainer"
          "h1"
          "main"
          "footer";
  }
main {
  grid-area: main;
  margin-bottom: 4rem;
 }
 h2 {
     color: var(--comp);
     text-align: center;
     font-size: 1.5rem;
 }
 article p {
  margin: 1rem auto;
 }
 footer {
     background: var(--neutral);
     color: #fff;
     padding: .2rem 1rem;
     overflow: auto;
     grid-area: footer;
     border-top: 1px solid var(--comp);
     display: flex;
     justify-content: space-between;
     margin-top: 10rem;
 }
footer a {
  color: inherit;
  text-decoration: underline;
}
footer .copyright {
  /*float: left;*/
}
footer .links {
  /*float: right;*/
  text-align: right;
}
footer .links p {
  float: right;
  margin-left: 2em;
}
.sitemap p {
    text-align: center;
}
.emphasis {
  font-weight: bold;
}
code {
  font-size: 1.1rem;
}
#ImageRules p {
    max-width: 60%;
    margin: 0 auto;
    margin-bottom: 1rem;
}
button.close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: var(--comp);
    border: 0 solid var(--comp);
    color: #fff;
    padding: 0.25rem;
    box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, .5);
    cursor: pointer;
    outline: 0;
}
pre {
  line-height: 1.4;
}
table {
  border-collapse: collapse;
}
body:has(.quoteMobile) section {
  width: 70%;
}
@media only screen and (max-width: 1260px) {
  .wrapper {
    display: block;
    }
    body:has(.quoteMobile) section {
      width: 100%;
    }
}
@media only screen and (max-width: 1100px) {
  article {
      width: calc(100% - var(--fixedWidth) - 5rem);
}
  section:has(.collapse) {
       width: 100%; 
       padding: 0;
  }
}
@media only screen and (max-width: 800px) {
  article {
    width: 95%;
    margin: 0 auto;
  }
}