/* Variables /* ———————————————————- */

:root {

/* Colours */
--blue: #3eb0ef;
--green: #a4d037;
--purple: #ad26b4;
--yellow: #fecd35;
--red: #f05230;
--darkgrey: #15171A;
--midgrey: #738a94;
--lightgrey: #c5d2d9;
--whitegrey: #e5eff5;
--pink: #fa3a57;
--brown: #a3821a;

}

/* Reset /* ———————————————————- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;

} body {

line-height: 1;

} ol, ul {

list-style: none;

} blockquote, q {

quotes: none;

} blockquote:before, blockquote:after, q:before, q:after {

content: "";
content: none;

} table {

border-spacing: 0;
border-collapse: collapse;

} img {

max-width: 100%;

} html {

box-sizing: border-box;
font-family: sans-serif;

-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;

} *, *:before, *:after {

box-sizing: inherit;

} a {

background-color: transparent;

} a:active, a:hover {

outline: 0;

} b, strong {

font-weight: bold;

} i, em, dfn {

font-style: italic;

} h1 {

margin: 0.67em 0;
font-size: 2em;

} small {

font-size: 80%;

} sub, sup {

position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;

} sup {

top: -0.5em;

} sub {

bottom: -0.25em;

} img {

border: 0;

} svg:not(:root) {

overflow: hidden;

} mark {

background-color: #fdffb6;

} code, kbd, pre, samp {

font-family: monospace, monospace;
font-size: 1em;

} button, input, optgroup, select, textarea {

margin: 0; /* 3 */
color: inherit; /* 1 */
font: inherit; /* 2 */

} button {

overflow: visible;
border: none;

} button, select {

text-transform: none;

} button, html input, /* 1 */ input, input {

cursor: pointer; /* 3 */

-webkit-appearance: button; /* 2 */

} button, html input {

cursor: default;

} button::-moz-focus-inner, input::-moz-focus-inner {

padding: 0;
border: 0;

} input {

line-height: normal;

} input:focus {

outline: none;

} input, input {

box-sizing: border-box; /* 1 */
padding: 0; /* 2 */

} input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {

height: auto;

} input {

box-sizing: content-box; /* 2 */

-webkit-appearance: textfield; /* 1 */

} input::-webkit-search-cancel-button, input::-webkit-search-decoration {

-webkit-appearance: none;

} legend {

padding: 0; /* 2 */
border: 0; /* 1 */

} textarea {

overflow: auto;

} table {

border-spacing: 0;
border-collapse: collapse;

} td, th {

padding: 0;

}

/* ==========================================================================

Base styles: opinionated defaults
========================================================================== */

html {

overflow-x: hidden;
overflow-y: scroll;
font-size: 62.5%;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

} body {

overflow-x: hidden;
color: color(var(--midgrey) l(-25%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1.5rem;
line-height: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
text-rendering: optimizeLegibility;
background: #fff;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;

}

::selection {

text-shadow: none;
background: color(var(--blue) lightness(+30%));

}

hr {

position: relative;
display: block;
width: 100%;
margin: 2.5em 0 3.5em;
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid color(var(--lightgrey) l(+10%));

}

audio, canvas, iframe, img, svg, video {

vertical-align: middle;

}

fieldset {

margin: 0;
padding: 0;
border: 0;

}

textarea {

resize: vertical;

}

p, ul, ol, dl, blockquote {

margin: 0 0 1.5em 0;

}

ol, ul {

padding-left: 1.3em;
padding-right: 1.5em;

}

ol ol, ul ul, ul ol, ol ul {

margin: 0.5em 0 1em;

}

ul {

list-style: disc;

}

ol {

list-style: decimal;

}

li {

margin: 0.5em 0;
padding-left: 0.3em;
line-height: 1.6em;

}

dt {

float: left;
margin: 0 20px 0 0;
width: 120px;
color: var(--darkgrey);
font-weight: 500;
text-align: right;

}

dd {

margin: 0 0 5px 0;
text-align: left;

}

blockquote {

margin: 1.5em 0;
padding: 0 1.6em 0 1.6em;
border-left: var(--whitegrey) 0.5em solid;

}

blockquote p {

margin: 0.8em 0;
font-size: 1.2em;
font-weight: 300;

}

blockquote small {

display: inline-block;
margin: 0.8em 0 0.8em 1.5em;
font-size: 0.9em;
opacity: 0.8;

} /* Quotation marks */ blockquote small:before {

content: "\2014 \00A0";

}

blockquote cite {

font-weight: bold;

} blockquote cite a {

font-weight: normal;

}

a {

color: color(var(--blue) l(-5%));
text-decoration: none;

}

a:hover {

text-decoration: underline;

}

h1, h2, h3, h4, h5, h6 {

margin-top: 0;
line-height: 1.15;
font-weight: 700;
text-rendering: optimizeLegibility;

}

h1 {

margin: 0 0 0.5em 0;
font-size: 5rem;
font-weight: 700;

} @media (max-width: 500px) {

h1 {
    font-size: 2.2rem;
}

}

h2 {

margin: 1.5em 0 0.5em 0;
font-size: 2rem;

} @media (max-width: 500px) {

h2 {
    font-size: 1.8rem;
}

}

h3 {

margin: 1.5em 0 0.5em 0;
font-size: 1.8rem;
font-weight: 500;

} @media (max-width: 500px) {

h3 {
    font-size: 1.7rem;
}

}

h4 {

margin: 1.5em 0 0.5em 0;
font-size: 1.6rem;
font-weight: 500;

}

h5 {

margin: 1.5em 0 0.5em 0;
font-size: 1.4rem;
font-weight: 500;

}

h6 {

margin: 1.5em 0 0.5em 0;
font-size: 1.4rem;
font-weight: 500;

}

@media all and (-ms-high-contrast: none), (-ms-high-contrast:active) {

p, ol, ul{
    width: 100%;
}
blockquote {
    width: 100%;
}

}