.js.preload * { transition: none !important; animation: none !important; }

/* Html top level elements */

html {
  height: 100%;
  transition: background-color 500ms;
}
body {
  margin: 0;
  overflow-x: hidden;
}
.invert-page {
  background-color: var(--black);
  color: var(--white);
}

header,main,section { display: block }

html.page-loading * {
  cursor: wait !important;
}



/* Containers */

:root {
  --container:        88rem;
  --xs-container:     16rem;
  --sm-container:     24rem;
  --md-container:     32rem;
  --lg-container:     48rem;
  --xl-container:     56rem;
  --xxl-container:    60rem;
  --xxxl-container:   64rem;
  --max-container:    1800px;
}

.container {
  width: 100%;
  box-sizing: border-box;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto
}
.xs-container   { max-width: var(--xs-container); }
.sm-container   { max-width: var(--sm-container); }
.md-container   { max-width: var(--md-container); }
.lg-container   { max-width: var(--lg-container); }
.xl-container   { max-width: var(--xl-container); }
.xxl-container  { max-width: var(--xxl-container); }
.xxxl-container { max-width: var(--xxxl-container); }
.max-container  { max-width: var(--max-container); }


/* Use these classes to remove default margins of child elements */

.no-margin-top>*:first-child {
  margin-top: 0;
}

.no-margin-bottom>*:last-child {
  margin-bottom: 0;
}