@charset "UTF-8";
/* put global CSS variables here */
:root {
  /* l-colour or brand-colour */
  /* .<l-colour> { color: var(--<l-colour>); }
  .bg-<l-colour> { background-color: var(--<l-colour>); }
  .b-<l-colour> { border-color: var(--<l-colour>); }
  .hover-<l-colour>:hover { color: var(--<l-colour>); }
  .hover-bg-<l-colour>:hover { background-color: var(--<l-colour>); }
  .hover-b-<l-colour>:hover { border-color: var(--<l-colour>); } */
}

/* CUSTOM COLOURS */
/* colour - color, background, border, hover */
/* I may need 2 or 3 of these */
/* This is handy for inline css, css only for that page
*  l-colour or brand-colour
* Work out how I'll do this, I don't want many css variables
* maybe just --color-brand, --color-primary, --color-secondary
*/
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
*
* Testing
*
**/
@media (max-width: 600px) {
  .include-media-test {
    background-color: #def;
  }
  .include-media-test:before {
    content: "<=phone";
  }
}
@media (min-width: 601px) {
  .include-media-test {
    background-color: #abc;
  }
  .include-media-test:before {
    content: ">phone";
  }
}
@media (min-width: 815px) and (max-width: 1799px) {
  .include-media-test {
    background-color: #fed;
  }
  .include-media-test:before {
    content: ">=815px, <desktop";
  }
}
@media (min-width: 1800px) {
  .include-media-test {
    background-color: #fab;
  }
  .include-media-test:before {
    content: ">=desktop";
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .include-media-test:after {
    content: "Retina" !important;
  }
}

/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */
/**
 * Set the global `box-sizing` state to `border-box`.
 *
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 * paulirish.com/2012/box-sizing-border-box-ftw
 */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* ==========================================================================
   #NORMALIZE
   ========================================================================== */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/* Mozilla puts a dotted line around text when a button is selected */
button::-moz-focus-inner {
  border: 0;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

f input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/* ==========================================================================
   #RESET
   ========================================================================== */
/**
 * As well as using normalize.css, it is often advantageous to remove all
 * margins from certain elements.
 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dd,
ol,
ul,
form,
fieldset,
legend,
figure,
table,
th,
td,
caption,
hr {
  margin: 0;
  padding: 0;
}

/**
 * Give a help cursor to elements that give extra info on `:hover`.
 */
abbr[title],
dfn[title] {
  cursor: help;
}

/**
 * Remove underlines from potentially troublesome elements.
 */
u,
ins {
  text-decoration: none;
}

/**
 * Apply faux underlines to inserted text via `border-bottom`.
 */
ins {
  border-bottom: 1px solid;
}

/* ==========================================================================
   #SHARED
   ========================================================================== */
/**
 * Where `margin-bottom` is concerned,this value will be the same as the
 * base line-height. This allows us to keep a consistent vertical rhythm.
 * As per: csswizardry.com/2012/06/single-direction-margin-declarations
 */
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
blockquote,
p,
address,
hr,
table,
fieldset,
figure,
pre {
  margin-bottom: 24px;
}

/**
 * Where `margin-left` is concerned we want to try and indent certain elements
 * by a consistent amount. Define that amount once,here.
 */
ul,
ol,
dd {
  margin-left: 48px;
}

/* ==========================================================================
   #TYPOGRAPHY
   ========================================================================== */
/**
 * All font-sizes are based on the rem (root em). This makes it easier to increase font size on
 * small devices and generally easier to manage. 
 * rem is like a CSS variable for typography.
 * <p> default font-size: 1.25rem
 */
:root {
  font-size: 16px;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
input,
button,
optgroup,
select,
textarea {
  font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

/* set this as a default for p font. 16-20px is standard for desktop view. 16px is rem */
p {
  font-size: 1.25rem;
  line-height: 1.4;
}

@media screen and (max-width: 899px) {
  p {
    font-size: 1.125rem;
  }
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
blockquote,
p,
address,
hr,
table,
fieldset,
figure,
pre {
  margin-bottom: 1.5rem;
}

/**
 * Where `margin-left` is concerned we want to try and indent certain elements
 * by a consistent amount. Define that amount once,here.
 */
ul,
ol,
dd {
  margin-left: 1rem;
}

/* CUSTOM COLOURS */
/* colour - color, background, border, hover */
/* I may need 2 or 3 of these */
/* This is handy for inline css, css only for that page
*  l-colour or brand-colour
* Work out how I'll do this, I don't want many css variables
* maybe just --color-brand, --color-primary, --color-secondary
*/
/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Simple default styles for headings 1 through 6. Anything more opinionated
 * than simple font-size changes should likely be applied via classes (see:
 * http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
 */
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Light.woff2") format("woff2"), url("../fonts/Raleway-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
h1 {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.1666666667;
}

h2 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.2857142857;
}

h3 {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
}

h4 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
}

h5 {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
}

h6 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2 {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  line-height: 1.3;
  color: #231f20;
}

/* CUSTOM COLOURS */
/* colour - color, background, border, hover */
/* I may need 2 or 3 of these */
/* This is handy for inline css, css only for that page
*  l-colour or brand-colour
* Work out how I'll do this, I don't want many css variables
* maybe just --color-brand, --color-primary, --color-secondary
*/
a {
  text-decoration: none;
  color: #5555f0;
  cursor: pointer;
}

#projects .title a {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}

#projects .title a:hover {
  color: #fcc000;
  text-decoration: underline;
}

.a--primary {
  position: relative;
  color: #111111;
  color: #5555f0;
  font-weight: 500;
  z-index: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  font-family: inherit;
  font-size: inherit;
}
.a--primary:hover, .a--primary:focus, .a--primary:active {
  color: #f9a11b;
}

.link-secret {
  color: inherit;
  font-weight: 300;
}
.link-secret:hover, .link-secret:active, .link-secret:focus {
  color: #5555f0;
  text-decoration: none;
}

.a-btn-logotxt {
  display: inline-block;
  position: relative;
  width: 180px;
  height: 50px;
  padding-left: 60px;
  padding-right: 5px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  word-wrap: normal;
  border-radius: 10px;
}

.a-btn-logotxt:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 50px;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 2;
  border-radius: 8px 0 0 8px/8px 0 0 8px;
  background-size: 35px 35px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.a-btn-logotxt:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: #fff;
  z-index: 1;
  left: 52px;
  top: 25px;
  margin: -10px 0 0 -10px;
  transform: rotate(45deg);
}

.a-btn-logotxt.a-btn--github {
  background-color: #2ea44f;
  border: 2px solid #2ea44f;
}

.a-btn-logotxt.a-btn--github:before {
  background-image: url("data:image/svg+xml,%3Csvg width='256px' height='250px' viewBox='0 0 256 250' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid'%3E%3Cg%3E%3Cpath d='M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z' fill='%23161614'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.a-btn-logotxt.a-btn--codepen {
  margin: 35px;
  background-color: #ae63e4;
  border: 2px solid #ae63e4;
}

.a-btn-logotxt.a-btn--codepen:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z'%3E%3C/path%3E%3C/svg%3E");
}

.a-btn-logotxt.a-btn--linkedin {
  background-color: #0e76a8;
  border: 2px solid #0e76a8;
}

.a-btn-logotxt.a-btn--linkedin:before {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z' fill='%230E76A8'%3E%3C/path%3E%3Cpath d='M2 12h6v18h-6v-18z' fill='%230E76A8'%3E%3C/path%3E%3Cpath d='M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z' fill='%230E76A8'%3E%3C/path%3E%3C/svg%3E");
  background-position: 60% 40%;
}

/* ==========================================================================
   #CODE
   ========================================================================== */
/**
 * To put a black code box on to a webpage

 * Usage:
 * <p>Here is a line of code <span class="code code-inline"></span></p>
 * <div class="code code-block"><pre>
 * ..............
 * Put the code here.
 * ........................
 * </code></pre>
 */
pre {
  height: auto;
  color: #fff;
  text-shadow: none;
  text-align: left;
  word-wrap: normal;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  overflow: auto;
  padding: 6px;
  background-color: #222222;
  border-radius: 3px;
  margin-bottom: 1.5rem;
  /* white-space: pre-line; */
}

code,
pre {
  font-family: monospace;
}

.code {
  display: inline-block;
  height: auto;
  max-width: 100%;
  color: #ffffff;
  font-family: "Operator Mono", Inconsolata, Monaco, Consolas, "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  font-size: 16px;
  font-style: normal;
  background-color: #222222;
  font-family: monospace;
}

.code-block {
  padding: 20px 85px 20px 15px;
  border-radius: 6px;
  margin-bottom: 5px;
  overflow-x: auto;
}

.code-inline {
  width: auto;
  padding: 3px 10px;
  margin-top: 2px;
  margin-bottom: 2px;
  border-radius: 4px;
  font-weight: 500;
}

/* VS Code colors
*  Colours VS Code uses for HTML elements, CSS, just use the colour name
*/
.code-green {
  color: #92f066;
}

.code-blue {
  color: #32c9f9;
}

.code-red {
  color: #ff3c23;
}

.code-grey {
  color: #a0a0a0;
}

.code-p {
  color: #c082ff;
}

.code-o {
  color: #ffbe23;
}

.code-y {
  color: #e6dc17;
}

/**
*   The site’s main page-head is the top section, where the logo and menu often goes :
*   It can have fixed position
*/
/**
 * 1. A slightly smaller padding on smaller viewports.
 * 2. Grow to full-sized padding on large enough viewports.
*/
/*  This code should be adjusted depending on the situation
*   width, height, padding and margin are applied before container and padding
*   works with o-container and wrapper because they don't have height or vertical padding
*   put it a <header> before o-container or wrapper
*    eg <header class="page-head   page-head--fixed" role="banner" id="home">
*/
/* also in _7-components.masthead.scss */
.page-head {
  height: 80px;
  width: 100%;
  border-style: solid;
  border-width: 0px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: transform 900ms ease;
  position: relative;
}

/*
*   page-head--fixed makes the page head fixed
*   also use .masthead--top at the top of the masthead to put a margin on the masthead
*/
.page-head--fixed {
  position: fixed;
  top: 0;
}

.page-head--slide-up {
  transform: translateY(-85px);
  transform: translateY(-80px);
}

/**
* A Masthead is the top section below the menu and nav bar
*  masthead height for deskotp is default 600px
*  responsive code breakpoints change that
*  to get the full screen tv screen effect on webpage load, javascript can change it to your screen size
*/
/*
*  The box model scales down so it works with width much better than height.
*  Media statements work with width, not height. When you have no javascript, you can get the width, if you want to know the screen height, you can only guess that as a fallback. Javascript kicks in to get screen size for mastheads you want to take the full screen
*  Mobile - 350 x 660
*  Tablet - 700 x 550
*  laptop - 1000 x 600
*  Desktop - 1400 x 800
*  These are roughly good breakpoints to use.
*/
/* $site-nav-height is set in _7-components.page-head.scss
*   default height is for a desktop, responsive code below can change that
*/
/* From _7-components.page-head.scss */
.masthead--top {
  margin-top: 80px !important;
  transition: margin-top;
}

.masthead {
  height: 800px;
}

.masthead {
  width: 100%;
  z-index: 500;
  overflow: hidden;
  background-color: #fee000;
}

.masthead__container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.masthead__top {
  width: 90%;
  margin: 50px auto auto 10px;
}

.not-index {
  height: 200px;
}

.masthead--not-index {
  margin: 30px auto 15px;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-ExtraBold.woff2") format("woff2"), url("../fonts/Nunito-ExtraBold.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
.masthead h1 {
  color: #ffffff;
  color: black;
  text-align: center;
  /* margin-top: 150px; */
  font-family: "Nunito", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

@media screen and (max-width: 750px) {
  .masthead h1 {
    font-size: 25px;
  }
}
@media screen and (max-width: 500px) {
  .masthead h1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 550px) {
  .masthead_buttons {
    flex-direction: column !important;
    align-items: center;
    gap: 25px !important;
    margin-top: 40px;
  }
}
/* ==========================================================================
   #NAV BAR
========================================================================== */
/* The website menu, it uses a list clone and a marker,
 * list clone - site-nav__list.clone
 * infront of the marker using z-index. The list clone only shows up when
 * it's infront of the marker. They are both block or inline block so they
 * can be moved around on the menu to show what they need to show.
 * It extends over the whole menu and overflow is hidden
 * I couldn't use :target so I needed to use javascript. Scroll-out worked
 * out nicely.

 * site-nav__marker is the white marker
*/
.page-head .site-nav-seperate {
  position: fixed;
  height: 80px;
  width: 100%;
  top: 0;
  align-items: center;
  background-color: white;
  z-index: 1000;
}

.site-nav__container {
  display: flex;
  height: 55px;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 10;
}

.site-nav__home-link {
  display: flex;
  align-content: center;
  align-items: center;
}

.site-nav__home-link p {
  font-size: 26px;
  color: #fee000;
  font-family: "Vesper Libre", serif;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 5px;
  user-select: none;
}

.site-nav__link:hover {
  color: black !important;
  fill: black !important;
}

.site-nav__logo {
  display: block;
  height: 50px;
  width: 260px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 905.8 172.95'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fee000;%7D.cls-2%7Bfill:%23231f20;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M962.13,136.13,827.83,177.7a4.93,4.93,0,0,0,.47,9.53l55.62,11.41a4.92,4.92,0,0,1,3.94,4.83v73.91a4.93,4.93,0,0,0,9.3,2.26L968,143.1A4.92,4.92,0,0,0,962.13,136.13Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M110.07,308.85a49.74,49.74,0,0,1-18.28-3.36,42.87,42.87,0,0,1-15.07-9.92,46.63,46.63,0,0,1-10.24-16.33,62.7,62.7,0,0,1-3.75-22.57,61.16,61.16,0,0,1,3.91-22.58A50.94,50.94,0,0,1,77.11,217.3a44,44,0,0,1,15.31-10.47,48.11,48.11,0,0,1,18.43-3.59,38.28,38.28,0,0,1,17.66,4,49,49,0,0,1,13,9.3L129.29,231.2a39.25,39.25,0,0,0-8.21-5.86,20.6,20.6,0,0,0-9.76-2.26,21.89,21.89,0,0,0-9.77,2.26,23.12,23.12,0,0,0-8,6.49,31.94,31.94,0,0,0-5.31,10.31,44.67,44.67,0,0,0-2,13.75q0,15.78,6.72,24.45A21.58,21.58,0,0,0,111,289a22.65,22.65,0,0,0,11.17-2.74,34.43,34.43,0,0,0,8.67-6.79L143,293.85Q130.22,308.85,110.07,308.85Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M148.81,307V197.46h23v26.87l-1.09,13.9A61.49,61.49,0,0,1,180.84,231a26.89,26.89,0,0,1,13.75-3.36q12.65,0,18.35,8.28t5.71,23V307h-23V261.82q0-8.43-2.26-11.56c-1.51-2.08-3.94-3.12-7.27-3.12a13.87,13.87,0,0,0-7.5,2,43.72,43.72,0,0,0-6.87,5.55V307Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M230.21,307V229.48H249l1.56,13.6h.62q4.23-8,10.16-11.72a22,22,0,0,1,11.87-3.75,30.56,30.56,0,0,1,5.39.39,16.51,16.51,0,0,1,3.83,1.17L278.64,249a39.2,39.2,0,0,0-4.06-.94,28,28,0,0,0-4.38-.31,16.73,16.73,0,0,0-9.14,3.13Q256.29,254,253.17,262v45Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M298.32,218.08a13.75,13.75,0,0,1-9.53-3.36,11.11,11.11,0,0,1-3.75-8.67,10.86,10.86,0,0,1,3.75-8.59,15.56,15.56,0,0,1,19.14,0,11,11,0,0,1,3.67,8.59,11.21,11.21,0,0,1-3.67,8.67A13.68,13.68,0,0,1,298.32,218.08ZM286.92,307V229.48h23V307Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M345,308.85a45.18,45.18,0,0,1-15.7-3,48.48,48.48,0,0,1-14-7.81l10.31-14.38a46.72,46.72,0,0,0,10.15,6.1,25.33,25.33,0,0,0,9.85,2q5.14,0,7.5-1.72a5.66,5.66,0,0,0,2.34-4.84,4.89,4.89,0,0,0-1.33-3.36,13.59,13.59,0,0,0-3.59-2.74,35.85,35.85,0,0,0-5.08-2.26c-1.87-.68-3.8-1.43-5.78-2.27a71.55,71.55,0,0,1-7.19-3.28,30.3,30.3,0,0,1-6.56-4.61,22.48,22.48,0,0,1-4.84-6.4,18.5,18.5,0,0,1-1.88-8.52,23.11,23.11,0,0,1,2.11-9.84,21,21,0,0,1,6-7.65,29.36,29.36,0,0,1,9.37-4.92,38.87,38.87,0,0,1,12.19-1.8,37.5,37.5,0,0,1,15.62,3,63.17,63.17,0,0,1,11.72,6.8L366,251.2a40.62,40.62,0,0,0-8.28-4.84,20.66,20.66,0,0,0-8.13-1.72q-8.74,0-8.75,6.09a4.5,4.5,0,0,0,1.25,3.2,12.32,12.32,0,0,0,3.36,2.42,41.83,41.83,0,0,0,4.85,2.11l5.7,2.11q3.75,1.41,7.42,3.21a30.63,30.63,0,0,1,6.72,4.45,19.68,19.68,0,0,1,6.79,15.62,23.84,23.84,0,0,1-2,9.84,21.52,21.52,0,0,1-6.09,7.89,30.38,30.38,0,0,1-10,5.31A44.07,44.07,0,0,1,345,308.85Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M396.12,307,377.21,205.11h23.6l7,47.65q.93,8,2,16t2,16.17h.62q1.56-8.12,3.05-16.17t3.05-16l10.93-47.65h19.53L460,252.76q1.56,7.82,3,15.86t3.05,16.32h.62q1.09-8.26,2.11-16.24T471,252.76l7-47.65h22L481.89,307H453l-10-46.24q-1.26-5.94-2.27-12t-1.79-11.64h-.63c-.62,3.75-1.28,7.63-1.95,11.64s-1.43,8-2.27,12L424.55,307Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M522,308.85a24.67,24.67,0,0,1-9.61-1.8,20.58,20.58,0,0,1-7.26-5,23,23,0,0,1-4.61-7.42,25.07,25.07,0,0,1-1.64-9.22q0-12.18,10.31-19.06t33.28-9.21a13.13,13.13,0,0,0-3-8.21q-2.73-3-9.14-3a27.67,27.67,0,0,0-9.92,1.87,72,72,0,0,0-10.55,5.16l-8.28-15.16a81.6,81.6,0,0,1,15.71-7.34,53.4,53.4,0,0,1,17.41-2.81q15,0,22.89,8.51t7.89,26.48V307H546.72l-1.56-8h-.62a50,50,0,0,1-10.47,7.1A26.59,26.59,0,0,1,522,308.85ZM529.85,291a12.63,12.63,0,0,0,6.72-1.72,33.55,33.55,0,0,0,5.94-4.84v-13.6q-12.19,1.72-16.88,5T521,283.69a6.45,6.45,0,0,0,2.42,5.55A10.6,10.6,0,0,0,529.85,291Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M604.69,308.85A29.8,29.8,0,0,1,591.64,306a28.18,28.18,0,0,1-10-8.05,37.79,37.79,0,0,1-6.4-12.73,58.56,58.56,0,0,1-2.27-17,49.59,49.59,0,0,1,2.73-17,41.12,41.12,0,0,1,7.19-12.73,31.31,31.31,0,0,1,10.31-8.05,27.42,27.42,0,0,1,11.95-2.81,23.3,23.3,0,0,1,10.78,2.19,37.79,37.79,0,0,1,8.28,5.93l-.93-11.87v-26.4h23V307H627.49l-1.56-7.65h-.62a36.32,36.32,0,0,1-9.53,6.79A24.61,24.61,0,0,1,604.69,308.85Zm5.93-18.75a14.7,14.7,0,0,0,6.8-1.56,17.34,17.34,0,0,0,5.86-5.47V251.35a18.44,18.44,0,0,0-6.41-3.9,20.15,20.15,0,0,0-6.4-1.09q-5.47,0-9.69,5.23t-4.22,16.33q0,11.56,3.67,16.87A11.9,11.9,0,0,0,610.62,290.1Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M686.39,308.85a29.79,29.79,0,0,1-13-2.81,28.18,28.18,0,0,1-10-8.05,38,38,0,0,1-6.41-12.73,58.92,58.92,0,0,1-2.26-17,49.59,49.59,0,0,1,2.73-17,41.12,41.12,0,0,1,7.19-12.73,31.21,31.21,0,0,1,10.31-8.05,27.42,27.42,0,0,1,12-2.81,23.3,23.3,0,0,1,10.78,2.19,38,38,0,0,1,8.28,5.93L705,223.86v-26.4h23V307H709.2l-1.56-7.65H707a36.32,36.32,0,0,1-9.53,6.79A24.65,24.65,0,0,1,686.39,308.85Zm5.94-18.75a14.7,14.7,0,0,0,6.8-1.56,17.34,17.34,0,0,0,5.86-5.47V251.35a18.44,18.44,0,0,0-6.41-3.9,20.17,20.17,0,0,0-6.41-1.09q-5.46,0-9.68,5.23t-4.22,16.33q0,11.56,3.67,16.87A11.9,11.9,0,0,0,692.33,290.1Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M775.13,308.85a43.12,43.12,0,0,1-15.46-2.74,35.49,35.49,0,0,1-12.5-8,36.36,36.36,0,0,1-8.28-12.74,46.37,46.37,0,0,1-3-17.18,44.13,44.13,0,0,1,3.12-17,40.33,40.33,0,0,1,8.2-12.81,35.83,35.83,0,0,1,11.64-8.05,34.3,34.3,0,0,1,13.6-2.81,34.65,34.65,0,0,1,14.45,2.81,28.66,28.66,0,0,1,10.31,7.81,33.14,33.14,0,0,1,6.17,11.8,51.48,51.48,0,0,1,2,14.76,53.45,53.45,0,0,1-.31,5.94c-.21,1.87-.42,3.28-.63,4.22H758.1q1.56,8.43,7,12.42a21.61,21.61,0,0,0,13.2,4A31.84,31.84,0,0,0,795,286.19l7.66,13.91a50.82,50.82,0,0,1-13.2,6.4A46.22,46.22,0,0,1,775.13,308.85ZM758,259.79h28q0-6.56-3-10.62t-10-4.06a14.18,14.18,0,0,0-9.61,3.59Q759.2,252.3,758,259.79Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M843.4,289.94a5,5,0,0,1-1.48.32h-1.33a3.78,3.78,0,0,1-2.73-1.41c-.89-.94-1.33-2.6-1.33-5V203.14l-23-4.81v84.58a47.83,47.83,0,0,0,1.1,10.7,22.32,22.32,0,0,0,3.51,8.13,16.18,16.18,0,0,0,6.49,5.23,23.72,23.72,0,0,0,10,1.88,37.39,37.39,0,0,0,6.8-.55,24.83,24.83,0,0,0,4.77-1.33Z' transform='translate(-62.73 -135.9)'/%3E%3Cpath class='cls-2' d='M880.27,289.94a5,5,0,0,1-1.48.32h-1.33a3.78,3.78,0,0,1-2.73-1.41c-.89-.94-1.33-2.6-1.33-5v-73l-23-4.81v76.85a47.83,47.83,0,0,0,1.1,10.7,22.15,22.15,0,0,0,3.51,8.13,16.09,16.09,0,0,0,6.48,5.23,23.8,23.8,0,0,0,10,1.88,37.39,37.39,0,0,0,6.8-.55,24.5,24.5,0,0,0,4.76-1.33Z' transform='translate(-62.73 -135.9)'/%3E%3C/svg%3E");
  outline: none;
}

@media screen and (min-width: 320px) {
  .site-nav__logo {
    width: 200px !important;
  }
}
@media screen and (max-width: 319px) {
  .site-nav__logo {
    width: 160px !important;
  }
}
.site-nav__list-container,
.menu--mobile {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fee000;
  background: linear-gradient(#fee000, #fcc000);
  height: 45px;
  width: 453px;
  box-shadow: 0 9px 5px -3px #cccccc;
  user-select: none;
  margin: 0 auto 0 0;
}

.site-nav__list-container::before,
.site-nav__list-container::after,
.menu--mobile::before,
.menu--mobile::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #fee000;
  background: linear-gradient(#fee000, #fcc000);
  z-index: -10;
  box-shadow: 0 8px 5px -3px #cccccc;
  user-select: none;
}

.site-nav__list-container::before,
.menu--mobile::before {
  left: -20px;
}

.site-nav__list-container::after,
.menu--mobile::after {
  right: -20px;
}

@media screen and (min-width: 45em) {
  .site-nav__list-container {
    margin-right: 100px;
  }
}
.site-nav__list {
  height: 45px;
  height: auto;
  width: 453px;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: 0px;
  /**
      * If we’re targetting the nav, then don’t hide it.
      */
  /**
      * Unhide it permanently on larger screens.
      */
}
.site-nav__target:target + .site-nav__list {
  transform: none;
}
@media (min-width: 1201px) {
  .site-nav__list {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    float: right;
    background-color: transparent;
    overflow: visible;
    backdrop-filter: none;
    transform: none;
  }
}

.site-nav__list svg,
.menu--mobile svg {
  fill: #ffffff;
  fill: inherit;
}

@media screen and (min-width: 45em) {
  .site-nav__item {
    position: relative;
    border-bottom: none;
    float: left;
  }
}
.site-nav__item {
  height: 45px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  fill: #ffffff;
}
.site-nav__item:last-child {
  border-bottom: none;
}
@media (min-width: 1201px) {
  .site-nav__item {
    position: relative;
    border-bottom: none;
    float: left;
  }
  .site-nav__sub-menu .site-nav__item {
    float: none;
  }
  .site-nav__sub-menu .site-nav__item + .site-nav__item {
    border-top: 1px solid #ddd;
  }
}

.site-nav__item svg {
  fill: inherit;
}

.page-head .site-nav__link:hover,
.page-head .site-nav__link:active,
.page-head .site-nav__link:focus {
  color: black !important;
  fill: black !important;
}

li.site-nav__item:hover {
  color: black !important;
  fill: black !important;
}

.site-nav__link {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 45px;
  /* fixed width is better than padding when */
  /* the menu starts jittering eg bold on hover */
  padding-top: 12px;
  padding-bottom: 12px;
  color: #fee000;
  font-weight: 500;
  font-size: 18px;
  overflow: hidden;
}
.site-nav__link:hover, .site-nav__link:active, .site-nav__link:focus {
  color: black !important;
  fill: black !important;
}

.page-head .site-nav__list-container .site-nav__link {
  line-height: 1;
  padding-top: 14px;
  text-align: center;
}

.site-nav__list-container .site-nav__link {
  color: white;
  line-height: 1;
  padding-top: 10px;
  text-align: center;
}

.site-nav__list-container .site-nav__link svg,
.site-nav__link-clone svg {
  align-self: end;
}

.site-nav__list.clone {
  z-index: 20;
  position: relative;
  width: 50.8rem;
  height: 5rem;
  height: 100%;
  width: 0;
}

.clone--projects {
  left: 0px;
}

.clone--about {
  left: -2px;
}

.clone--tools {
  left: 8px;
}

.clone--games {
  left: 8px;
}

.clone--contact {
  left: 2px;
}

.site-nav__link-clone {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 12px;
  padding-top: 12px;
  z-index: 30;
  color: #fee000;
  overflow: hidden;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  padding-top: 10px;
}

.site-nav__link-clone svg {
  fill: #fee000;
}

.site-nav__marker {
  position: absolute;
  top: 4px;
  left: 4px;
  height: 57px;
  height: 80%;
  border-radius: 18px;
  box-sizing: border-box;
  background-color: #ffffff;
  z-index: 15;
  opacity: 0;
  width: 0;
  left: -100px;
}

.marker--projects {
  left: 5px;
  width: 88px;
  opacity: 1;
}

.marker--about {
  left: 88px;
  width: 70px;
  opacity: 1;
}

.marker--tools {
  left: 158px;
  width: 92px;
  opacity: 1;
}

.marker--games {
  left: 250px;
  width: 101px;
  opacity: 1;
}

.marker--contact {
  left: 351px;
  width: 90px;
  opacity: 1;
}

.menu-item {
  z-index: 8;
  display: block;
  position: absolute;
  top: -20px;
  height: 150%;
  cursor: pointer;
}

.site-nav__link--projects {
  width: 88px;
}

.site-nav__link--about {
  width: 70px;
}

.site-nav__link--tools {
  width: 92px;
}

.site-nav__link--games {
  width: 101px;
}

.site-nav__link--contact {
  width: 90px;
}

.menu--mobile {
  width: 35px;
}

.menu--mobile svg line,
.menu--mobile svg path {
  stroke: #ffffff;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50%;
  transition: transform 200ms, opacity 450ms 50ms;
}

.menu--mobile.active svg line:nth-of-type(1),
.menu--mobile.active svg line:nth-of-type(3) {
  opacity: 0;
}

.menu--mobile.active svg line:nth-of-type(2) {
  transform: rotate(-45deg) rotate(360deg);
}

.menu--mobile.active svg line:nth-of-type(4) {
  transform: rotate(45deg) rotate(360deg);
}

.menu--mobile {
  width: 30px;
  margin-right: 60px;
  transition: all 0.25s ease-in-out;
}

@media screen and (min-width: 900px) {
  .menu--mobile {
    display: none;
  }
}
@media screen and (max-width: 899px) {
  .site-nav__list-container {
    display: none;
  }
}
.menu--mobile nav {
  position: fixed;
  top: 80px;
  right: -350px;
  width: 100%;
  max-width: 350px;
  max-height: 70vh;
  height: auto;
  background-color: #eaeaea;
  transition: all 0.25s ease-in-out;
  border: 4px solid #fee000;
  overflow: auto;
}

.menu--mobile .mobile-nav--slide {
  right: 2%;
}

@media screen and (max-width: 425px) {
  .menu--mobile {
    margin-right: 35px;
  }
}
.menu--mobile__list {
  list-style-type: none;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.menu--mobile__item {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #aaa;
}

.menu--mobile__link {
  width: 100%;
  padding: 2px 0;
  text-decoration: none;
  font-size: 1.4em;
  color: #fee000;
  color: #000000;
}

.menu-arrow {
  display: flex;
  height: 50px;
  width: 100%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 900;
}

.h0 {
  height: 0;
  overflow: hidden;
}

nav ul li ul > li:first-of-type > a {
  display: flex;
}

nav ul li ul > li:first-of-type > a svg {
  align-self: center;
  flex-basis: 38px;
  position: absolute;
}

/*------------------------------------*\
    #SUB-MENU - TOOLS & GAMES
\*------------------------------------*/
.sub-menu {
  position: absolute;
  top: 36px;
  transform: translateX(-52%);
  width: 400px;
  left: 50%;
  margin-left: 0;
  list-style: none;
  padding: 5px 0px 5px 0px;
  color: #fee000;
  background-color: #ffffff;
  border-radius: 20px;
  border: 3px solid #fee000;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 2px 2px 2px rgba(0, 0, 0, 0.1), 4px 4px 4px rgba(0, 0, 0, 0.1), 8px 8px 8px rgba(0, 0, 0, 0.1);
  transition: opacity 450ms linear;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  max-height: 90vh;
  height: auto;
}

.sub-menu::before {
  position: absolute;
  content: "";
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  z-index: 5;
  overflow: visible;
  background-color: #ffffff;
  border-top: 3px solid #fee000;
  border-left: 3px solid #fee000;
}

.site-nav__list clone .sub-menu {
  z-index: 900;
}

.site-nav__item:hover .sub-menu,
.marker--tools:hover .sub-menu,
.marker--games:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  height: auto !important;
}

.marker--tools:hover ~ .site-nav__item .sub-menu.tools {
  opacity: 1;
  visibility: visible;
}

.marker--games:hover ~ .site-nav__item .sub-menu.games {
  opacity: 1;
  visibility: visible;
}

.site-nav__list .marker--projects .site-nav__list.clone {
  width: 88px;
  overflow: hidden;
}

.site-nav__list .marker--about .site-nav__list.clone {
  width: 70px;
  overflow: hidden;
}

.site-nav__list .marker--tools .site-nav__list.clone {
  width: 92px;
  overflow: hidden;
  left: 7px;
}

.site-nav__list .marker--games .site-nav__list.clone {
  width: 101px;
  overflow: hidden;
  left: 4px;
}

.site-nav__list .marker--contact .site-nav__list.clone {
  width: 90px;
  overflow: hidden;
}

.marker--about .site-nav__list.clone li:nth-of-type(1),
.marker--tools .site-nav__list.clone li:nth-of-type(1),
.marker--games .site-nav__list.clone li:nth-of-type(1),
.marker--contact .site-nav__list.clone li:nth-of-type(1) {
  display: none;
}

.marker--projects .site-nav__list.clone li:nth-of-type(2),
.marker--tools .site-nav__list.clone li:nth-of-type(2),
.marker--games .site-nav__list.clone li:nth-of-type(2),
.marker--contact .site-nav__list.clone li:nth-of-type(2) {
  display: none;
}

.marker--projects .site-nav__list.clone li:nth-of-type(3),
.marker--about .site-nav__list.clone li:nth-of-type(3),
.marker--games .site-nav__list.clone li:nth-of-type(3),
.marker--contact .site-nav__list.clone li:nth-of-type(3) {
  display: none;
}

.marker--projects .site-nav__list.clone li:nth-of-type(4),
.marker--about .site-nav__list.clone li:nth-of-type(4),
.marker--tools .site-nav__list.clone li:nth-of-type(4),
.marker--contact .site-nav__list.clone li:nth-of-type(4) {
  display: none;
}

.marker--projects .site-nav__list.clone li:nth-of-type(5),
.marker--about .site-nav__list.clone li:nth-of-type(5),
.marker--tools .site-nav__list.clone li:nth-of-type(5),
.marker--games .site-nav__list.clone li:nth-of-type(5) {
  display: none;
}

.sub-menu li {
  padding: 2px 20px;
}

.sub-menu li:hover {
  background-color: rgba(255, 160, 0, 0.1);
  background-color: rgba(222, 222, 222, 0.4);
}

.sub-menu svg {
  fill: black;
  fill: #231f20;
  margin-bottom: 6px;
}

.sub-menu__item-text {
  display: inline-block;
  position: relative;
  left: 40px;
  width: 310px;
  margin-top: 3px;
}

.sub-menu__item-text.offset-tools {
  left: 38px;
}

.sub-menu__item-text.offset-games {
  left: 39px;
}

.sub-menu p {
  margin-top: 1px;
  margin-bottom: 1px;
  font-size: 14px;
}

.sub-menu span {
  font-size: 18px;
  font-weight: 700;
  text-decoration: underline;
}

.sub-menu__item-text div:first-of-type {
  position: absolute;
  left: -35px;
  width: 12px;
  height: 12px;
  background-color: #fee000;
  border-radius: 50%;
  margin-top: 5px;
}

.nav-list-sub-icon {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  border-width: 0px;
}
.nav-list-sub-icon .ui-list > li {
  border: 0 solid #ccc;
  line-height: 1;
  padding: 8px;
}
.nav-list-sub-icon .nav-list-sub-icon__item {
  display: block;
  padding: 25px;
  margin: -8px;
  float: left;
}

.nav-list-sub-icon a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* for sprites */
.nav-list-sub-icon a svg {
  width: 50px;
  height: 50px;
  margin: 0 !important;
  stroke: #ffffff;
}

/* Prmary, secondary classes to customize
*/
.nav-list-sub-icon--primary {
  position: relative;
  z-index: 600;
}

.nav-list-sub-icon--primary a {
  border: 1px solid #000000;
}

@media screen and (min-width: 501px) {
  .nav-list-sub-icon--primary a {
    width: 80px;
    height: 80px;
  }
}
@media screen and (max-width: 500px) {
  .nav-list-sub-icon--primary a {
    width: 50px;
    height: 50px;
  }
}
@media screen and (min-width: 501px) {
  .nav-svg--primary {
    padding: 6px;
  }
}
@media screen and (max-width: 500px) {
  .nav-svg--primary {
    padding: 2px;
  }
}
@media screen and (min-width: 501px) {
  .nav-svg--primary {
    width: 60px !important;
    height: 60px !important;
    margin-top: 7px;
  }
}
@media screen and (max-width: 500px) {
  .nav-svg--primary {
    width: 50px !important;
    height: 50px !important;
    margin-top: 0px;
  }
}
.nav-svg--primary:hover {
  transition: transform 300ms linear;
  transform: rotate(360deg);
}

.nav-list-sub-icon--primary li {
  padding: 0 !important;
  margin: 12px !important;
}

.nav-list-sub-icon--primary li:nth-of-type(1):hover a {
  background-color: #ffffff;
}

.nav-list-sub-icon--primary li:nth-of-type(2):hover a {
  background-color: #55acee;
}

.nav-list-sub-icon--primary li:nth-of-type(3):hover a {
  background-color: black;
  background-color: #aaaaaa;
}

.nav-list-sub-icon--primary li:nth-of-type(4):hover a {
  background-color: #0077b5;
}

.nav-list-sub-icon--primary li {
  position: relative;
}

.icon-description {
  position: absolute;
  width: 110px;
  height: 70px;
  background: #231f20;
  top: -80px;
  left: -15px;
  z-index: 1100;
  padding: 6px;
  border-radius: 10px;
  color: white;
  opacity: 0;
  visibility: hidden;
  transform: scale(0%);
  transition: all 300ms linear;
  font-size: 15px;
}

p.icon-description {
  line-height: 1.25;
}

.icon-description::before {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  border: 20px solid transparent;
  border-top-color: #231f20;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.nav-list-sub-icon--primary li:nth-of-type(1):hover .icon-description:nth-of-type(1) {
  opacity: 1;
  transform: scale(100%);
  visibility: visible;
}

.nav-list-sub-icon--primary li:nth-of-type(2):hover .icon-description:nth-of-type(1) {
  opacity: 1;
  transform: scale(100%);
  visibility: visible;
}

.nav-list-sub-icon--primary li:nth-of-type(3):hover .icon-description:nth-of-type(1) {
  opacity: 1;
  transform: scale(100%);
  visibility: visible;
}

.nav-list-sub-icon--primary li:nth-of-type(4):hover .icon-description:nth-of-type(1) {
  opacity: 1;
  transform: scale(100%);
  visibility: visible;
}

svg title {
  opacity: 0;
}

.dn {
  display: none;
}