CSS Base

base.css

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  font-size: 1.6rem;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  color: white;
  background-color: black;
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  color: white;
  background-color: black;
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}


:root {
  --container: 1200px;
   --container: 1200px; //holds site in a centered container of this size
  --container-content: 70rem; //holds article text for nice reading
  --container-padding: 30px; //used on left and right side of containers

  --gutters: 15px; //common padding size, used on flexbox and modules
  --gap: 30px; //common gap size used for margins and grids

  --z-index-top: 99;
  --z-index-overlay: 95;
  --z-index-menu-button: 90;
  --z-index-menu: 80;
  --z-index-header: 75;
  --z-index-behind: -1;
}


.container {
  width: 100%;
  max-width: var(--container);
  margin: auto;
  padding: 0 var(--container-padding);
}


.container-left, .container-right {
  width: 100%;
  max-width: calc(var(--container) + ((100% - var(--container)) / 2));
  margin: 0 auto 0 0;
  padding: 0 var(--container-padding) 0 0;
}

//container starts and goes all the way to the right
.container-right {
  margin: 0 0 0 auto;
  padding: 0 0 0 var(--container-padding);
}

.container-fluid {
  width: 100%;
  margin: auto;
  padding: 0 var(--container-padding);
}


.container-content {
  padding: 0 var(--container-padding); //still has padding.
  width: 100%;

  > *:not( .alignwide ):not( .alignfull ):not(.full-width) {
	max-width: var(--container-content) !important; //needs to override the figures or any other elements with inline widths
	margin-right: auto;
	margin-left: auto;
  }

  > .full-width, > .alignfull {
	width: auto; //override gutenberg, otherwise negative margins below wont work
	margin-left: calc(-1 * var(--container-padding)); //negative margins to counteract the content-containers padding
	margin-right: calc(-1 * var(--container-padding));
  }

  > .alignwide {
    width: 100%;
	max-width: calc(var(--container) - (var(--container-padding) * 2));

  }

}