@charset "UTF-8";
/*! [replace-name] v[replace-version] */
/**
 * AU-replace - Replace a string with a string
 * http://codepen.io/jakob-e/pen/doMoML
 *
 * @author @eriksen_dk <https://twitter.com/eriksen_dk>
 *
 * @param  {string} $string  - The haystack string to be manipulated
 * @param  {string} $search  - The needle to be replace
 * @param  {string} $replace - The replacement
 *
 * @return {string}          - The manipulated string with replaced values
 */
/**
 * AU-svguri - Generate an optimized SVG data-uri
 * https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
 * http://codepen.io/jakob-e/pen/doMoML
 *
 * @author @eriksen_dk <https://twitter.com/eriksen_dk>
 *
 * @param  {string} $svg - The SVG to be converted
 *
 * @return {string}      - An optimized data-uri
 */
/**
 * AU-factorial - Returns the factorial of a non-negative integer.
 * https://github.com/terkel/mathsass
 *
 * @author Pascal Duez @pascalduez <http://pascalduez.me/>
 *
 * @param  {integer} $number - A non-negative integer.
 *
 * @return {integer}         - The factorial log
 */
/**
 * AU-pow - Returns base to the exponent power.
 * https://github.com/terkel/mathsass
 *
 * @author Pascal Duez @pascalduez <http://pascalduez.me/>
 *
 * @param  {integers} $base     - The base number
 * @param  {integers} $exponent - The exponent to which to raise base
 *
 * @return {integers}           - The result of the math
 */
/**
 * AU-color-luminance - Calculate color luminance
 *
 * https://github.com/voxpelli/sass-color-helpers/blob/master/stylesheets/color-helpers/_contrast.scss
 * Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
 * Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
 *
 * @author Pelle Wessman @voxpelli <http://kodfabrik.se/>
 *
 * @param  {string} $color - The color to calculate the luminance from
 *
 * @return {float}          - The luminance
 */
/**
 * AU-color-contrast - Get the contrast ratio of two colors and warn when it is below WCAG 2.0 AA standard 4.5:1
 *
 * https://github.com/voxpelli/sass-color-helpers/blob/master/stylesheets/color-helpers/_contrast.scss
 * Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
 * Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
 *
 * @author Pelle Wessman @voxpelli <http://kodfabrik.se/>
 *
 * @param  {string}   $foreground - Color one
 * @param  {string}   $background - Color two
 * @param  {boolean}  $silent     - If the logs get printed in the terminal
 * @param  {boolean}  $rounded    - If the value is rounded or not
 *
 * @return {integer}              - The contrast ratio
 */
/**
 * AU-color-a11y - The function to find the nearest accessible color
 *
 * https://github.com/alex-page/sass-a11ycolor
 *
 * @author Alex Page @aalexpaage <http://alexpage.com.au>
 *
 * @param  {Color}           $toMakeA11y           - The color that is to be changed
 * @param  {Color}           $background           - The background color to compare against toMakeA11y for the contrast
 * @param  {'small'|'large'} $ratioKey   ['small'] - The keyword 'small' or 'large' to set the WCAG 2.1 contrast ration or 3.0 or 4.5
 * @param  {Number}          $steps      [0.1]     - The step size our function is searching for a new color in. The bigger the number the faster the process
 *                                                    the rougher the found color.
 *
 * @return {Color}                                 - Returns the nearest accessible color
 */
/**
 * AU-color-lowest-contrast - Find the lowest contrast color
 *
 * @param  {Colors}          $colors     - The color to find the lowest contrast
 * @param  {Color}           $background - The background color to compare the colors against
 *
 * @return {Color}                       - Returns the lowest contrast color
 */
/**
 * AU-space - Mixin for setting a properties value to snap to the grid, with a fallback for REM.
 *
 * @param  {string} $property - The css property to apply the spacing ( padding, margin )
 * @param  {number} $values   - The values of the property ( 0, 20px, 1unit, 5% )
 *
 * @return {number}           - The space in px and rems
 */
/**
 * AU-clearfix - Clearing floats
 */
/**
 * AU-media - Create media queries and wraps the @content code inside of it
 *
 * @param  {keywords} $breakpoint - Either one of the following keywords: xs, sm, md, lg
 *
 * @return {string}               - The code passed in via @content wrapped inside a media query
 */
/**
 * AU-sronly - Hide an element from the screen but not a screen reader
 */
/**
 * AU-outline - Create outline based on the theme the user is using.
 *
 * @param  {keywords} $theme - `dark` or default ( `light` )
 *
 * @return {string}          - The code
 */
/**
 * AU-focus - Add the outline to focus
 */
/**
 * AU-fontgrid Mixin for setting font-size and line-height that snaps to the grid.
 *
 * @param  {keywords} $fontsize-key   -  Either one of the following keywords: xs, sm, md, lg, xl, xxl, xxxl
 * @param  {keywords} $lineheight-key -  Either one of the following keywords: heading, nospace, default
 *
 * @return {string}                   - The code; fontsize in REM, with PX fallback, and unitless line-height which matches vertical grid
*/
/**
 * AU-pixelfallback enable pixel fallbacks
 */
/**
 * AU-media Breakpoints
 */
/**
 * AU-rem value used for REM calculation
 */
/**
 * AU-unit used for all type and grid calculations
 */
/**
 * AU-font stack
 * AU-font-monospace stack
 */
/**
 * AU-fontsize-map
 *
 * Predetermined pixel sizes from a 1.25 typescale rounded to the nearest $AU-unit (vertical grid)
 */
/**
 * AU-lineheight-map
 *
 * Predetermined lineheight mapped to keyword
 */
/**
 * AU-maxwidth for line lengths (the ‘measure’)
 */
/**
 * Colors light theme
 */
/**
 * Colors dark theme
 */
/**
 * Colors system messages
 */
/**
 * AU-border-radius styles
 */
/*! [replace-name] v[replace-version] */
/**
 * Block of links.
 */
.au-link-list {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1.5;
		display: block;
		list-style-type: none;
		margin: 0;
		padding: 4px 0;
		padding: 0.25rem 0;
}
.au-body .au-link-list {
		margin: 0;
		padding: 4px 0;
		padding: 0.25rem 0;
}
.au-link-list > li {
		display: block;
		margin: 4px;
		margin: 0.25rem;
}
.au-link-list.au-link-list--inline {
		display: inline-block;
}
.au-link-list.au-link-list--inline > li {
		display: inline-block;
}

/*! [replace-name] v[replace-version] */
@media print {
		.au-body *, .au-body {
				text-shadow: none !important;
				color: #000 !important;
				background-color: transparent !important;
				-webkit-box-shadow: none !important;
				        box-shadow: none !important;
				border-color: #000 !important;
		}
		.au-body a,
		.au-body a:visited {
				text-decoration: underline;
		}
		.au-body a[href]:after {
				content: " (" attr(href) ")" !important;
				display: inline !important;
		}
		.au-body a[href^="javascript:"]:after,
		.au-body a[href^="#"]:after {
				content: "" !important;
		}
		.au-body abbr[title]:after {
				content: " (" attr(title) ")";
		}
		.au-body pre,
		.au-body blockquote {
				border: 1px solid #000;
				padding: 6px;
				page-break-inside: avoid;
		}
		.au-body thead {
				display: table-header-group;
		}
		.au-body tr,
		.au-body img {
				page-break-inside: avoid;
		}
		.au-body img {
				max-width: 100% !important;
		}
		.au-body p,
		.au-body h2,
		.au-body h3 {
				orphans: 3;
				widows: 3;
		}
		.au-body h2,
		.au-body h3 {
				page-break-after: avoid;
		}
		.au-body p a {
				word-wrap: break-word;
		}
		.au-body select {
				background: #fff !important;
		}
}
.au-body {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1.5;
		margin: 0;
		-webkit-text-size-adjust: 100%;
		   -moz-text-size-adjust: 100%;
		    -ms-text-size-adjust: 100%;
		        text-size-adjust: 100%;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		color: #313131;
		background-color: #ffffff;
}
.au-body a {
		color: #00698f;
		text-decoration: underline;
		-webkit-text-decoration-skip: ink;
		        text-decoration-skip-ink: auto;
}
.au-body a:hover {
		color: #313131;
		text-decoration: none;
}
.au-body a:focus {
		outline: 3px solid #9263DE;
		outline-offset: 2px;
}
.au-body a::-moz-focus-inner {
		border: 0;
}
.au-body {
		/**
		 * Highlighting in-page sections that are in focus
		 */
}
.au-body [tabindex="0"]:focus,
.au-body :target {
		outline: 3px solid #9263DE;
		outline-offset: 2px;
}
.au-body {
		/**
		 * `mark` styling.
		 */
}
.au-body mark {
		color: #ffffff;
		background-color: #00698f;
}
.au-body {
		/**
		 * Text selection styling
		 */
}
.au-body ::-moz-selection {
		color: #ffffff;
		background-color: rgba(0, 105, 143, 0.99);
}
.au-body ::selection {
		color: #ffffff;
		background-color: rgba(0, 105, 143, 0.99);
}
.au-body img::-moz-selection, .au-body video::-moz-selection, .au-body iframe::-moz-selection {
		background-color: rgba(0, 105, 143, 0.75);
}
.au-body img::selection,
.au-body video::selection,
.au-body iframe::selection {
		background-color: rgba(0, 105, 143, 0.75);
}
.au-body {
		/**
		 * Vertical spacing of common text elements.
		 */
}
.au-body p {
		max-width: 42em;
		margin: 0;
}
.au-body * + p {
		margin-top: 24px;
		margin-top: 1.5rem;
}
.au-body ul:not([class]),
.au-body ol:not([class]),
.au-body dl:not([class]),
.au-body pre {
		margin: 0;
}
.au-body * + ul:not([class]),
.au-body * + ol:not([class]),
.au-body * + dl:not([class]),
.au-body * + pre {
		margin-top: 24px;
		margin-top: 1.5rem;
}
.au-body ul:not([class]) > li,
.au-body ol:not([class]) > li {
		margin-top: 8px;
		margin-top: 0.5rem;
}
.au-body ul:not([class]) > li > ul:not([class]),
.au-body ul:not([class]) > li > ol:not([class]),
.au-body ol:not([class]) > li > ul:not([class]),
.au-body ol:not([class]) > li > ol:not([class]) {
		margin-top: 8px;
		margin-top: 0.5rem;
}
.au-body ul:not([class]) > ul:not([class]),
.au-body ol:not([class]) > ul:not([class]) {
		list-style-type: disc;
}
.au-body dl:not([class]) > dd {
		margin-top: 8px;
		margin-top: 0.5rem;
		padding-left: 8px;
		padding-left: 0.5rem;
		margin-left: 0;
		border-left: solid 1px;
}
.au-body dl:not([class]) > dt {
		margin-top: 24px;
		margin-top: 1.5rem;
		font-weight: bold;
}
.au-body dl:not([class]) > dt:first-of-type {
		margin-top: 0;
}
.au-body .written-by:after {
		content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHZpZXdCb3g9IjAgMCA2NTggMTgiPjx0ZXh0IHg9IjEzIiB5PSIxMyIgZm9udC1zaXplPSIxMyI+TWVzc3JzLCBEb20sIFBhZ2V5LCBUcmViLCBQYXQgYW5kIEtsZXBhcyBhcmUgcHJvdWQgdG8gcHJlc2VudCB0aGUgR09MRCBkZXNpZ24gc3lzdGVtLiAtIE1pc2NoaWVmIG1hbmFnZWQ8L3RleHQ+PC9zdmc+");
		color: #BADA55;
}
.au-body {
		/**
		 * Emphasis and alt. voice/mood/diff. from prose text.
		 */
}
.au-body em,
.au-body i {
		font-style: italic;
}
.au-body {
		/**
		 * Stong emphasis.
		 */
}
.au-body strong,
.au-body b {
		font-weight: bold;
}
.au-body {
		/**
		 * `small`: for less important information (not stylistic purposes).
		 */
}
.au-body small {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.4285714286;
}
.au-body {
		/**
		 * `s`: represents contents no longer accurate/relevant.
		 * del` & `ins`: editorial markup.
		 */
}
.au-body s,
.au-body del {
		text-decoration: line-through;
}
.au-body ins {
		text-decoration-line: underline;
		text-decoration-style: dashed;
		-webkit-text-decoration-skip: ink;
		        text-decoration-skip-ink: auto;
}
.au-body {
		/**
		 * Defining definition of a term.
		 *
		 * The paragraph, description list group, or section that is the nearest
		 * ancestor of the `dfn` element must also contain the definition(s) for the term
		 * given by the `dfn` element.
		 *
		 * Note: `abbr` can be nested inside `dfn`.
		 */
}
.au-body dfn {
		font-style: normal;
}
.au-body {
		/**
		 * Abbreviations/acronyms.
		 */
}
.au-body abbr,
.au-body abbr[title] {
		border-bottom: none;
		text-decoration: underline;
		-webkit-text-decoration: underline dotted;
		        text-decoration: underline dotted;
}
.au-body abbr[title] {
		cursor: help;
}
.au-body a abbr {
		padding-bottom: 1px;
}
.au-body {
		/**
		 * Variables, eg. as used in mathematical expressions.
		 *
		 * We also provide semantic support for nested vars, and things like indices.
		 */
}
.au-body var {
		padding: 0 1px;
		font-style: italic;
		font-family: serif;
}
.au-body var sup,
.au-body var sub {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		font-style: normal;
		padding: 0 1px;
}
.au-body {
		/**
		 * Prevent `sub` and `sup` elements from affecting the line height in
		 * all browsers.
		 * https://github.com/necolas/normalize.css/blob/master/normalize.css#L174
		 */
}
.au-body sub,
.au-body sup {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.1428571429;
		position: relative;
		vertical-align: baseline;
}
.au-body sub {
		bottom: -0.25em;
}
.au-body sup {
		top: -0.5em;
}
.au-body {
		/**
		 * Keyboard strokes.
		 * Code snippets and code blocks.
		 */
}
.au-body kbd,
.au-body code,
.au-body samp {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.4285714286;
		padding: 4px;
		padding: 0.25rem;
		font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
		display: inline-block;
		border-radius: 4px;
		background-color: rgb(244.8, 244.8, 244.8);
		color: #313131;
}
.au-body pre {
		font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.au-body pre code {
		padding: 16px;
		padding: 1rem;
		display: block;
		-moz-tab-size: 4;
		  -o-tab-size: 4;
		     tab-size: 4;
}
.au-body {
		/**
		 * Horizontal rule, used for paragraph-level thematic breaks.
		 */
}
.au-body hr {
		-webkit-box-sizing: content-box;
		        box-sizing: content-box;
		height: 0;
		overflow: visible;
		border: none;
		border-top: 1px solid rgb(127.359375, 127.359375, 127.359375);
		margin-bottom: 24px;
		margin-bottom: 1.5rem;
}
.au-body * + hr {
		margin-top: 24px;
		margin-top: 1.5rem;
}
.au-body {
		/**
		 *  Body colour schemes
		 */
}
.au-body.au-body--alt {
		background: rgb(234.6, 234.6, 234.6);
}
.au-body.au-body--alt kbd,
.au-body.au-body--alt code,
.au-body.au-body--alt samp {
		background-color: rgb(224.4, 224.4, 224.4);
}
.au-body.au-body--dark {
		background: #135E70;
		color: #ffffff;
}
.au-body.au-body--dark ::-moz-selection {
		color: #135E70;
		background-color: rgba(97, 218, 255, 0.99);
}
.au-body.au-body--dark ::selection {
		color: #135E70;
		background-color: rgba(97, 218, 255, 0.99);
}
.au-body.au-body--dark img::-moz-selection, .au-body.au-body--dark video::-moz-selection, .au-body.au-body--dark iframe::-moz-selection {
		background-color: rgba(97, 218, 255, 0.75);
}
.au-body.au-body--dark img::selection,
.au-body.au-body--dark video::selection,
.au-body.au-body--dark iframe::selection {
		background-color: rgba(97, 218, 255, 0.75);
}
.au-body.au-body--dark a {
		color: #61daff;
}
.au-body.au-body--dark a:hover {
		color: #ffffff;
}
.au-body.au-body--dark a:focus {
		outline: 3px solid #C390F9;
}
.au-body.au-body--dark a::-moz-focus-inner {
		border: 0;
}
.au-body.au-body--dark [tabindex="0"]:focus,
.au-body.au-body--dark :target {
		outline: 3px solid #C390F9;
}
.au-body.au-body--dark mark {
		background-color: #61daff;
		color: #135E70;
}
.au-body.au-body--dark hr {
		border-top-color: rgb(137, 174.5, 183.5);
}
.au-body.au-body--dark code,
.au-body.au-body--dark kbd,
.au-body.au-body--dark samp {
		color: #ffffff;
		background-color: rgb(16.041221374, 79.3618320611, 94.558778626);
}
.au-body.au-body--dark.au-body--alt {
		background: rgb(13.0824427481, 64.7236641221, 77.1175572519);
}
.au-body.au-body--dark.au-body--alt code,
.au-body.au-body--dark.au-body--alt kbd,
.au-body.au-body--dark.au-body--alt samp {
		background-color: rgb(10.1236641221, 50.0854961832, 59.6763358779);
}

/*! [replace-name] v[replace-version] */
.au-keyword-list {
		font-size: 24px;
		font-size: 1.5rem;
		line-height: 1.5;
}
.au-keyword-list:before, .au-keyword-list:after {
		content: "";
		display: table;
}
.au-keyword-list:after {
		clear: both;
}
* + .au-keyword-list {
		margin-top: 16px;
		margin-top: 1rem;
}
.au-body .au-keyword-list > li {
		margin-top: 16px;
		margin-top: 1rem;
		float: left;
		clear: both;
		list-style: none;
		margin-left: 0;
}
.au-keyword-list > li {
		font-weight: bold;
}
.au-keyword-list > li > a {
		display: block;
}

.au-keyword-list__small {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1;
		display: block;
		font-weight: normal;
}
.au-body .au-keyword-list__small {
		color: #313131;
}
.au-keyword-list--dark .au-keyword-list__small {
		color: #ffffff;
}

body {
		background: #ffffff;
		color: #313131;
		margin: 0;
		padding: 96px 24px 32px 24px;
		padding: 6rem 1.5rem 2rem 1.5rem;
		overflow-x: hidden;
}
body:before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background: repeating-linear-gradient(-45deg, #222, #222 10px, #333 10px, #333 20px);
		padding: 24px;
		padding: 1.5rem;
		font-size: 16px;
		font-size: 1rem;
		line-height: 1;
		content: "📃 Test file";
		font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
		color: white;
}

.test-link {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.split-wrapper {
		overflow: hidden;
}

.split {
		padding: 1%;
}
.split.split--alt {
		background: rgb(234.6, 234.6, 234.6);
}
.split.split--dark {
		background: #135E70;
		color: #ffffff;
}
.split.split--dark.split--alt {
		background: rgb(13.0824427481, 64.7236641221, 77.1175572519);
}
@media (min-width: 576px) {
		.split {
				width: 48%;
				float: left;
		}
}

@media print {
		body,
		.split--dark,
		.split--alt,
		.split--alt.split--dark {
				background: transparent !important;
		}
		.split {
				padding: 0 !important;
				width: 100% !important;
		}
}
.testing {
		border: 3px dashed hotpink;
}