/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

:root {
  --slate1: hsl(206, 30%, 98.8%);
  --slate2: hsl(210, 16.7%, 97.6%);
  --slate3: hsl(209, 13.3%, 95.3%);
  --slate4: hsl(209, 12.2%, 93.2%);
  --slate5: hsl(208, 11.7%, 91.1%);
  --slate6: hsl(208, 11.3%, 88.9%);
  --slate7: hsl(207, 11.1%, 85.9%);
  --slate8: hsl(205, 10.7%, 78%);
  --slate9: hsl(206, 6%, 56.1%);
  --slate10: hsl(206, 5.8%, 52.3%);
  --slate11: hsl(206, 6%, 43.5%);
  --slate12: hsl(206, 24%, 9%);
}

.dark-theme {
  --slate1: hsl(200, 7%, 8.8%);
  --slate2: hsl(195, 7.1%, 11%);
  --slate3: hsl(197, 6.8%, 13.6%);
  --slate4: hsl(198, 6.6%, 15.8%);
  --slate5: hsl(199, 6.4%, 17.9%);
  --slate6: hsl(201, 6.2%, 20.5%);
  --slate7: hsl(203, 6%, 24.3%);
  --slate8: hsl(207, 5.6%, 31.6%);
  --slate9: hsl(206, 6%, 43.9%);
  --slate10: hsl(206, 5.2%, 49.5%);
  --slate11: hsl(206, 6%, 63%);
  --slate12: hsl(210, 6%, 93%);
}

:root {
  --blue1: hsl(206, 100%, 99.2%);
  --blue2: hsl(210, 100%, 98%);
  --blue3: hsl(209, 100%, 96.5%);
  --blue4: hsl(210, 98.8%, 94%);
  --blue5: hsl(209, 95%, 90.1%);
  --blue6: hsl(209, 81.2%, 84.5%);
  --blue7: hsl(208, 77.5%, 76.9%);
  --blue8: hsl(206, 81.9%, 65.3%);
  --blue9: hsl(206, 100%, 50%);
  --blue10: hsl(208, 100%, 47.3%);
  --blue11: hsl(211, 100%, 43.2%);
  --blue12: hsl(211, 100%, 15%);
}

.dark-theme {
  --blue1: hsl(212, 35%, 9.2%);
  --blue2: hsl(216, 50%, 11.8%);
  --blue3: hsl(214, 59.4%, 15.3%);
  --blue4: hsl(214, 65.8%, 17.9%);
  --blue5: hsl(213, 71.2%, 20.2%);
  --blue6: hsl(212, 77.4%, 23.1%);
  --blue7: hsl(211, 85.1%, 27.4%);
  --blue8: hsl(211, 89.7%, 34.1%);
  --blue9: hsl(206, 100%, 50%);
  --blue10: hsl(209, 100%, 60.6%);
  --blue11: hsl(210, 100%, 66.1%);
  --blue12: hsl(206, 98%, 95.8%);
}

:root {
  --grass1: hsl(116, 50%, 98.9%);
  --grass2: hsl(120, 60%, 97.1%);
  --grass3: hsl(120, 53.6%, 94.8%);
  --grass4: hsl(121, 47.5%, 91.4%);
  --grass5: hsl(122, 42.6%, 86.5%);
  --grass6: hsl(124, 39%, 79.7%);
  --grass7: hsl(126, 37.1%, 70.2%);
  --grass8: hsl(131, 38.1%, 56.3%);
  --grass9: hsl(131, 41%, 46.5%);
  --grass10: hsl(132, 43.1%, 42.2%);
  --grass11: hsl(133, 50%, 32.5%);
  --grass12: hsl(130, 30%, 14.9%);
}

.dark-theme {
  --grass1: hsl(146, 30%, 7.4%);
  --grass2: hsl(136, 33.3%, 8.8%);
  --grass3: hsl(137, 36%, 11.4%);
  --grass4: hsl(137, 37.6%, 13.7%);
  --grass5: hsl(136, 38.7%, 16%);
  --grass6: hsl(135, 39.6%, 19.1%);
  --grass7: hsl(134, 40.3%, 23.8%);
  --grass8: hsl(131, 40.1%, 30.8%);
  --grass9: hsl(131, 41%, 46.5%);
  --grass10: hsl(131, 39%, 52.1%);
  --grass11: hsl(131, 43%, 57.2%);
  --grass12: hsl(137, 72%, 94%);
}

:root {
  --red1: hsl(359, 100%, 99.4%);
  --red2: hsl(359, 100%, 98.6%);
  --red3: hsl(360, 100%, 96.8%);
  --red4: hsl(360, 97.9%, 94.8%);
  --red5: hsl(360, 90.2%, 91.9%);
  --red6: hsl(360, 81.7%, 87.8%);
  --red7: hsl(359, 74.2%, 81.7%);
  --red8: hsl(359, 69.5%, 74.3%);
  --red9: hsl(358, 75%, 59%);
  --red10: hsl(358, 69.4%, 55.2%);
  --red11: hsl(358, 65%, 48.7%);
  --red12: hsl(354, 50%, 14.6%);
}

.dark-theme {
  --red1: hsl(353, 23%, 9.8%);
  --red2: hsl(357, 34.4%, 12%);
  --red3: hsl(356, 43.4%, 16.4%);
  --red4: hsl(356, 47.6%, 19.2%);
  --red5: hsl(356, 51.1%, 21.9%);
  --red6: hsl(356, 55.2%, 25.9%);
  --red7: hsl(357, 60.2%, 31.8%);
  --red8: hsl(358, 65%, 40.4%);
  --red9: hsl(358, 75%, 59%);
  --red10: hsl(358, 85.3%, 64%);
  --red11: hsl(358, 100%, 69.5%);
  --red12: hsl(351, 89%, 96%);
}

:root {
  --amber1: hsl(39, 70%, 99%);
  --amber2: hsl(40, 100%, 96.5%);
  --amber3: hsl(44, 100%, 91.7%);
  --amber4: hsl(43, 100%, 86.8%);
  --amber5: hsl(42, 100%, 81.8%);
  --amber6: hsl(38, 99.7%, 76.3%);
  --amber7: hsl(36, 86.1%, 67.1%);
  --amber8: hsl(35, 85.2%, 55.1%);
  --amber9: hsl(39, 100%, 57%);
  --amber10: hsl(35, 100%, 55.5%);
  --amber11: hsl(30, 100%, 34%);
  --amber12: hsl(20, 80%, 17%);
}

.dark-theme {
  --amber1: hsl(36, 100%, 6.1%);
  --amber2: hsl(35, 100%, 7.6%);
  --amber3: hsl(32, 100%, 10.2%);
  --amber4: hsl(32, 100%, 12.4%);
  --amber5: hsl(33, 100%, 14.6%);
  --amber6: hsl(35, 100%, 17.1%);
  --amber7: hsl(35, 91%, 21.6%);
  --amber8: hsl(36, 100%, 25.5%);
  --amber9: hsl(39, 100%, 57%);
  --amber10: hsl(43, 100%, 64%);
  --amber11: hsl(39, 90%, 49.8%);
  --amber12: hsl(39, 97%, 93.2%);
}

:root {
  --border-radius: 5px;
}
:root {
  --slate-background: var(--slate1);
  --slate-subtle-background: var(--slate2);
  --slate-element-background: var(--slate3);
  --slate-element-background-hover: var(--slate4);
  --slate-element-background-active: var(--slate5);
  --slate-subtle-border: var(--slate6);
  --slate-element-border: var(--slate7);
  --slate-element-border-hover: var(--slate8);
  --slate-solid-background: var(--slate9);
  --slate-solid-background-hover: var(--slate10);
  --slate-low-contrast-text: var(--slate11);
  --slate-high-contrast-text: var(--slate12);
  --blue-background: var(--blue1);
  --blue-subtle-background: var(--blue2);
  --blue-element-background: var(--blue3);
  --blue-element-background-hover: var(--blue4);
  --blue-element-background-active: var(--blue5);
  --blue-subtle-border: var(--blue6);
  --blue-element-border: var(--blue7);
  --blue-element-border-hover: var(--blue8);
  --blue-solid-background: var(--blue9);
  --blue-solid-background-hover: var(--blue10);
  --blue-low-contrast-text: var(--blue11);
  --blue-high-contrast-text: var(--blue12);
  --grass-background: var(--grass1);
  --grass-subtle-background: var(--grass2);
  --grass-element-background: var(--grass3);
  --grass-element-background-hover: var(--grass4);
  --grass-element-background-active: var(--grass5);
  --grass-subtle-border: var(--grass6);
  --grass-element-border: var(--grass7);
  --grass-element-border-hover: var(--grass8);
  --grass-solid-background: var(--grass9);
  --grass-solid-background-hover: var(--grass10);
  --grass-low-contrast-text: var(--grass11);
  --grass-high-contrast-text: var(--grass12);
  --amber-background: var(--amber1);
  --amber-subtle-background: var(--amber2);
  --amber-element-background: var(--amber3);
  --amber-element-background-hover: var(--amber4);
  --amber-element-background-active: var(--amber5);
  --amber-subtle-border: var(--amber6);
  --amber-element-border: var(--amber7);
  --amber-element-border-hover: var(--amber8);
  --amber-solid-background: var(--amber9);
  --amber-solid-background-hover: var(--amber10);
  --amber-low-contrast-text: var(--amber11);
  --amber-high-contrast-text: var(--amber12);
  --red-background: var(--red1);
  --red-subtle-background: var(--red2);
  --red-element-background: var(--red3);
  --red-element-background-hover: var(--red4);
  --red-element-background-active: var(--red5);
  --red-subtle-border: var(--red6);
  --red-element-border: var(--red7);
  --red-element-border-hover: var(--red8);
  --red-solid-background: var(--red9);
  --red-solid-background-hover: var(--red10);
  --red-low-contrast-text: var(--red11);
  --red-high-contrast-text: var(--red12);
  --background: var(--slate1);
  --subtle-background: var(--slate2);
  --element-background: var(--slate3);
  --element-background-hover: var(--slate4);
  --element-background-active: var(--slate5);
  --subtle-border: var(--slate6);
  --element-border: var(--slate7);
  --element-border-hover: var(--slate8);
  --solid-background: var(--slate9);
  --solid-background-hover: var(--slate10);
  --low-contrast-text: var(--slate11);
  --high-contrast-text: var(--slate12);
  --success-background: var(--grass1);
  --success-subtle-background: var(--grass2);
  --success-element-background: var(--grass3);
  --success-element-background-hover: var(--grass4);
  --success-element-background-active: var(--grass5);
  --success-subtle-border: var(--grass6);
  --success-element-border: var(--grass7);
  --success-element-border-hover: var(--grass8);
  --success-solid-background: var(--grass9);
  --success-solid-background-hover: var(--grass10);
  --success-low-contrast-text: var(--grass11);
  --success-high-contrast-text: var(--grass12);
  --warning-background: var(--amber1);
  --warning-subtle-background: var(--amber2);
  --warning-element-background: var(--amber3);
  --warning-element-background-hover: var(--amber4);
  --warning-element-background-active: var(--amber5);
  --warning-subtle-border: var(--amber6);
  --warning-element-border: var(--amber7);
  --warning-element-border-hover: var(--amber8);
  --warning-solid-background: var(--amber9);
  --warning-solid-background-hover: var(--amber10);
  --warning-low-contrast-text: var(--amber11);
  --warning-high-contrast-text: var(--amber12);
  --danger-background: var(--red1);
  --danger-subtle-background: var(--red2);
  --danger-element-background: var(--red3);
  --danger-element-background-hover: var(--red4);
  --danger-element-background-active: var(--red5);
  --danger-subtle-border: var(--red6);
  --danger-element-border: var(--red7);
  --danger-element-border-hover: var(--red8);
  --danger-solid-background: var(--red9);
  --danger-solid-background-hover: var(--red10);
  --danger-low-contrast-text: var(--red11);
  --danger-high-contrast-text: var(--red12);
  --primary-background: var(--blue1);
  --primary-subtle-background: var(--blue2);
  --primary-element-background: var(--blue3);
  --primary-element-background-hover: var(--blue4);
  --primary-element-background-active: var(--blue5);
  --primary-subtle-border: var(--blue6);
  --primary-element-border: var(--blue7);
  --primary-element-border-hover: var(--blue8);
  --primary-solid-background: var(--blue9);
  --primary-solid-background-hover: var(--blue10);
  --primary-low-contrast-text: var(--blue11);
  --primary-high-contrast-text: var(--blue12);
}

body {
  background-color: var(--background);
  font-family: "Fira Code", monospace;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

button {
  --button-border-color: var(--element-border);
  --button-border-color-hover: var(--element-border-hover);
  --button-border-size: 1px;
  --button-border-style: solid;
  --button-border-radius: var(--border-radius);
  --button-background: var(--element-background);
  --button-background-hover: var(--element-background-hover);
  --button-text: var(--low-contrast-text);
  --button-text-hover: var(--primary-solid-background);
  --button-primary-text: var(--primary-solid-background);
  --button-primary-text-hover: var(--primary-low-contrast-text);
  --button-padding-main: 0.325rem;
  --button-padding-cross: 0.625rem;
  cursor: pointer;
  border: var(--button-border-size) var(--button-border-style)
    var(--button-border-color);
  border-radius: var(--button-border-radius);
  background-color: var(--button-background);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding-main) var(--button-padding-cross);
  color: var(--button-text);
}
button:hover {
  background-color: var(--button-background-hover);
  border-color: var(--button-border-color-hover);
  color: var(--button-text-hover);
}
button.text {
  background-color: transparent;
  border: unset;
}
button.primary {
  color: var(--button-primary-text);
}
button.primary:hover {
  color: var(--button-primary-text-hover);
}

h4 {
  margin: 0;
  padding: 0;
  color: var(--solid-background);
  font-weight: 300;
  font-size: 0.825rem;
}

i {
  font-size: 1.25rem;
}

a {
  --link-text: var(--primary-solid-background);
  --link-text-hover: var(--primary-low-contrast-text);
  text-decoration: none;
  color: var(--link-text);
}
a:hover {
  color: var(--link-text-hover);
}

ul,
ol,
menu {
  list-style-type: none;
}

.app {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  --corner-width: 20%;
  --corner-height: 10%;
  grid-template-columns: var(--corner-width) 1fr var(--corner-width);
  grid-template-rows: var(--corner-height) 1fr var(--corner-height);
  grid-template-areas: "theme empty1 links" "empty2 title empty3" "email nav work";
  justify-items: center;
  align-items: center;
  padding: 1rem 4rem;

  z-index: 1;

  pointer-events: none;
}

.app.notes {
  --corner-width: 13%;
  --corner-height: 4%;
  padding: 1rem 1rem;
}

.app.canvas {
  --corner-width: 13%;
  --corner-height: 4%;
  padding: 1rem 1rem;
}

.app .theme {
  grid-area: theme;
  justify-self: start;
  pointer-events: all;
}
.app .links {
  grid-area: links;
  display: flex;
  align-items: center;
  justify-self: end;
  pointer-events: all;
}
.app .links li:last-child {
  margin-left: 1rem;
  pointer-events: all;
}
.app .title {
  grid-area: title;
}
.app .title .red {
  color: var(--danger-solid-background);
}
.app .title .yellow {
  color: var(--warning-solid-background);
}
.app .title .blue {
  color: var(--primary-solid-background);
}
.app .email {
  grid-area: email;
  justify-self: start;
  pointer-events: all;
}

.app nav {
  grid-area: nav;
  justify-self: center;
  pointer-events: all;
}
.app .work {
  grid-area: work;
  justify-self: end;
  display: flex;
  flex-direction: column;
  pointer-events: all;
}
.app .work .work-label {
  align-self: flex-end;
}

@media only screen and (max-device-width: 500px) {
  .app {
    --corner-width: 10%;
    --corner-height: 10%;
    padding: 1rem 1rem;
  }
  .app a {
    font-size: 0.825rem;
  }
}

body {
  background-color: var(--background);
  font-family: "Fira Code", monospace;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

#app > div {
  height: 100%;
  width: 100%;
  z-index: 0;
}

#app.rapid .App-menu {
  display: none !important;
}

#app.homepage .App-menu {
  display: none !important;
}

ul {
  display: flex;
  list-style: none;
}

#frames {
  display: flex;
  list-style: none;
  grid-row: 3;
  grid-column: 2;
  align-items: center;
  justify-content: stretch;
  z-index: 5;
  pointer-events: all;

  position: fixed;
  bottom: 1rem;

  background-color: var(--element-background);
  padding: 1rem 0.3rem;
  border-radius: 2rem;

  max-width: 100vw;
  overflow-x: auto;
}

#prev,
#next {
  position: sticky;
  background: var(--element-background);
  background: linear-gradient(
    90deg,
    rgba(51, 51, 51, 0) 0%,
    var(--element-background) 20%,
    var(--element-background) 33%,
    var(--element-background) 100%
  );
}

#prev {
  left: 0;
}

#next {
  right: 0;
}

li {
  border-radius: 5px;
  border: solid 1px transparent;
  transition: 150ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  cursor: pointer;

  margin: 0 0.3rem;

  height: 72px;

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: center;
}

li canvas {
  border-radius: 5px;
}

li:hover {
  transform: scale(1.1);
}

li.active {
  border: solid var(--primary-element-border) 1px;
}

button {
  border: unset;
  background-color: unset;
  color: var(--primary-low-contrast-text);
}

body.loading #app {
  display: none;
}

body.loading .app {
  display: none;
}

body.loading #splash {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}