*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

button {
  background-color: transparent;
  color: inherit;
  border-width: 0;
  padding: 0;
  cursor: pointer;
  font-size: 1rem;
}

figure {
  margin: 0;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin: 0;
}

ul, ol, dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p {
  margin: 0;
}

cite {
  font-style: normal;
}

fieldset {
  border-width: 0;
  padding: 0;
  margin: 0;
}

:root {
  --primary: #494e8b;
  --secondary: #8d99ae;
  --accent: #f8f32b;
  --text: #434451;
  --back: #ffffff;
}

:root body.tone-a {
  --primary: #494e8b;
  --secondary: #8d99ae;
  --accent: #f8f32b;
  --text: #434451;
  --back: #ffffff;
}
:root body.tone-b {
  --primary: #5f2a62;
  --secondary: #a976c3;
  --accent: #a0de59;
  --text: #466b5a;
  --back: #fffcf3;
}
:root body.tone-c {
  --primary: #3c6e71;
  --secondary: #284b63;
  --accent: #dc136c;
  --text: #474747;
  --back: #ffffff;
}
:root body.tone-d {
  --primary: #183059;
  --secondary: #f03a47;
  --accent: #276fbf;
  --text: #af5b5b;
  --back: #f6f4f3;
}
:root body.tone-e {
  --primary: #246eb9;
  --secondary: #d8cd52;
  --accent: #f06543;
  --text: #908e72;
  --back: #fdfffc;
}

html {
  font-size: 16px;
}

@media only screen and (min-width: 600px) {
  html {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  html {
    font-size: 17px;
  }
}
@media only screen and (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}
:root {
  --primary: #494e8b;
  --secondary: #8d99ae;
  --accent: #f8f32b;
  --text: #434451;
  --back: #ffffff;
}

:root body.tone-a {
  --primary: #494e8b;
  --secondary: #8d99ae;
  --accent: #f8f32b;
  --text: #434451;
  --back: #ffffff;
}
:root body.tone-b {
  --primary: #5f2a62;
  --secondary: #a976c3;
  --accent: #a0de59;
  --text: #466b5a;
  --back: #fffcf3;
}
:root body.tone-c {
  --primary: #3c6e71;
  --secondary: #284b63;
  --accent: #dc136c;
  --text: #474747;
  --back: #ffffff;
}
:root body.tone-d {
  --primary: #183059;
  --secondary: #f03a47;
  --accent: #276fbf;
  --text: #af5b5b;
  --back: #f6f4f3;
}
:root body.tone-e {
  --primary: #246eb9;
  --secondary: #d8cd52;
  --accent: #f06543;
  --text: #908e72;
  --back: #fdfffc;
}

/* TYPOGRAPHY
----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: color(primary);
  font-family: "Roboto Mono", monospace !important;
  font-weight: 700;
}
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-weight: 700;
  color: color(primary);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}
h4 em {
  font-weight: 400;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}

p {
  font-weight: 400;
  margin: 0.75rem 0;
}

html {
  font-size: 16px;
}

@media only screen and (min-width: 600px) {
  html {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  html {
    font-size: 17px;
  }
}
@media only screen and (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}
:root {
  --primary: #494e8b;
  --secondary: #8d99ae;
  --accent: #f8f32b;
  --text: #434451;
  --back: #ffffff;
}

:root body.tone-a {
  --primary: #494e8b;
  --secondary: #8d99ae;
  --accent: #f8f32b;
  --text: #434451;
  --back: #ffffff;
}
:root body.tone-b {
  --primary: #5f2a62;
  --secondary: #a976c3;
  --accent: #a0de59;
  --text: #466b5a;
  --back: #fffcf3;
}
:root body.tone-c {
  --primary: #3c6e71;
  --secondary: #284b63;
  --accent: #dc136c;
  --text: #474747;
  --back: #ffffff;
}
:root body.tone-d {
  --primary: #183059;
  --secondary: #f03a47;
  --accent: #276fbf;
  --text: #af5b5b;
  --back: #f6f4f3;
}
:root body.tone-e {
  --primary: #246eb9;
  --secondary: #d8cd52;
  --accent: #f06543;
  --text: #908e72;
  --back: #fdfffc;
}

:root {
  --primary: #494e8b;
  --secondary: #8d99ae;
  --accent: #f8f32b;
  --text: #434451;
  --back: #ffffff;
}

:root body.tone-a {
  --primary: #494e8b;
  --secondary: #8d99ae;
  --accent: #f8f32b;
  --text: #434451;
  --back: #ffffff;
}
:root body.tone-b {
  --primary: #5f2a62;
  --secondary: #a976c3;
  --accent: #a0de59;
  --text: #466b5a;
  --back: #fffcf3;
}
:root body.tone-c {
  --primary: #3c6e71;
  --secondary: #284b63;
  --accent: #dc136c;
  --text: #474747;
  --back: #ffffff;
}
:root body.tone-d {
  --primary: #183059;
  --secondary: #f03a47;
  --accent: #276fbf;
  --text: #af5b5b;
  --back: #f6f4f3;
}
:root body.tone-e {
  --primary: #246eb9;
  --secondary: #d8cd52;
  --accent: #f06543;
  --text: #908e72;
  --back: #fdfffc;
}

body {
  background-color: var(--back);
  background-size: 100%;
  margin: 0;
  padding: 0;
  --letter-size: 9vw;
}
@media screen and (min-width: 425px) {
  body {
    --letter-size: 8vw;
  }
}
@media screen and (min-width: 1200px) {
  body {
    --letter-size: 5.5rem;
  }
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h1 {
  margin: 0;
}
h1 span.text {
  color: transparent;
  font-size: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  left: -9999999rem;
  top: -9999999rem;
}
h1 .word {
  margin: 0;
  padding: 0;
  height: var(--letter-size);
  margin-bottom: calc(var(--letter-size) * 0.1);
}
h1 .word .letter {
  cursor: pointer;
  width: var(--letter-size);
  height: var(--letter-size);
  position: relative;
  display: inline-block;
  margin-right: calc(var(--letter-size) * 0.05);
}
h1 .word .letter::before, h1 .word .letter::after {
  background-color: var(--primary);
  content: "";
  position: absolute;
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 0.5);
  left: calc(var(--letter-size) * 0.75);
  top: calc(var(--letter-size) * 0.25);
  transition: 0.2s;
  mix-blend-mode: darken;
}
h1 .word .letter::after {
  background-color: var(--secondary);
  width: calc(var(--letter-size) * 1);
  height: calc(var(--letter-size) * 1);
  left: 0%;
  top: 0%;
  mix-blend-mode: darken;
  animation-name: pop-up;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
h1 .word .letter span {
  mix-blend-mode: darken;
  background-color: var(--primary);
  display: inline-block;
  position: absolute;
  transition: 0.2s;
}
h1 .word .letter.letter-g::before {
  width: calc(var(--letter-size) * 1);
  height: calc(var(--letter-size) * 0.5);
  left: 0;
  top: calc(var(--letter-size) * 0.5);
  border-radius: 0;
  transition-delay: 0.1s;
  animation-delay: 0.75s;
}
h1 .word .letter.letter-g::after {
  width: calc(var(--letter-size) * 0.5);
  height: var(--letter-size);
  left: 0;
  top: 0;
  border-top-left-radius: var(--letter-size);
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--letter-size);
  border-bottom-right-radius: 0;
  transition-delay: 0.2s;
  animation-delay: 0.5s;
}
h1 .word .letter.letter-g span {
  width: 0;
  left: calc(var(--letter-size) * 0.666);
  top: calc(var(--letter-size) * 0.666);
  height: 0;
  transition-delay: 0s;
}
h1 .word .letter.letter-g.alive:not(.cool)::before, h1 .word .letter.letter-g:hover:not(.cool)::before {
  width: calc(var(--letter-size) * 0.666);
  height: calc(var(--letter-size) * 0.333);
  left: calc(var(--letter-size) * 0.333);
  top: calc(var(--letter-size) * 0.666);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--letter-size);
  border-bottom-right-radius: var(--letter-size);
}
h1 .word .letter.letter-g.alive:not(.cool)::after, h1 .word .letter.letter-g:hover:not(.cool)::after {
  width: calc(var(--letter-size) * 0.666);
  height: calc(var(--letter-size) * 0.666);
  left: calc(var(--letter-size) * 0.333);
  top: 0;
  border-top-left-radius: var(--letter-size);
  border-top-right-radius: var(--letter-size);
  border-bottom-left-radius: var(--letter-size);
  border-bottom-right-radius: var(--letter-size);
  transition-delay: 0s;
}
h1 .word .letter.letter-g.alive:not(.cool) span, h1 .word .letter.letter-g:hover:not(.cool) span {
  width: calc(var(--letter-size) * 0.333);
  height: calc(var(--letter-size) * 0.333);
  top: calc(var(--letter-size) * 0.333);
  left: calc(var(--letter-size) * 0.666);
  transition-delay: 0.2s;
}
h1 .word .letter.letter-up-g::before {
  width: calc(var(--letter-size) * 1);
  height: calc(var(--letter-size) * 0.5);
  left: 0;
  top: calc(var(--letter-size) * 0.5);
}
h1 .word .letter.letter-up-g::after {
  width: calc(var(--letter-size) * 0.5);
  height: var(--letter-size);
  left: 0;
  top: 0;
  border-bottom-left-radius: var(--letter-size);
  border-top-left-radius: var(--letter-size);
}
h1 .word .letter.letter-i {
  width: calc(var(--letter-size) * 0.5);
}
h1 .word .letter.letter-i::before {
  width: 0;
  height: 0;
  border-radius: calc(var(--letter-size) * 0.5);
  left: calc(var(--letter-size) * 0.25);
  top: 0;
}
h1 .word .letter.letter-i::after {
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 1);
  left: 0;
  top: 0;
  animation-delay: 3s;
}
h1 .word .letter.letter-i.alive:not(.cool)::before, h1 .word .letter.letter-i:hover:not(.cool)::before {
  width: calc(var(--letter-size) * 0.35);
  height: calc(var(--letter-size) * 0.35);
  border-radius: calc(var(--letter-size) * 0.5);
  left: calc(var(--letter-size) * 0.075);
  top: 0;
}
h1 .word .letter.letter-i.alive:not(.cool)::after, h1 .word .letter.letter-i:hover:not(.cool)::after {
  height: calc(var(--letter-size) * 0.5);
  top: calc(var(--letter-size) * 0.5);
  width: calc(var(--letter-size) * 0.25);
  left: calc(var(--letter-size) * 0.125);
  border-radius: calc(var(--letter-size) * 0.5) calc(var(--letter-size) * 0.5) 0 0;
}
h1 .word .letter.letter-low-i {
  width: calc(var(--letter-size) * 0.5);
}
h1 .word .letter.letter-low-i::before {
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 0.5);
  border-radius: calc(var(--letter-size) * 0.5);
  left: 0;
  top: 0;
}
h1 .word .letter.letter-low-i::after {
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 0.75);
  left: 0;
  top: calc(var(--letter-size) * 0.25);
}
h1 .word .letter.letter-up-i {
  width: calc(var(--letter-size) * 0.5);
}
h1 .word .letter.letter-up-i::before {
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 1);
  left: 0;
  top: 0;
}
h1 .word .letter.letter-up-i::after {
  content: none;
}
h1 .word .letter.letter-up-l {
  width: calc(var(--letter-size) * 0.9);
}
h1 .word .letter.letter-up-l::before {
  width: calc(var(--letter-size) * 1);
  height: calc(var(--letter-size) * 0.5);
  left: 0;
  top: calc(var(--letter-size) * 0.5);
  border-radius: 0;
  animation-delay: 1.25s;
}
h1 .word .letter.letter-up-l::after {
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 1);
  left: 0;
  top: 0;
  border-radius: 0;
  transition-delay: 0.2s;
}
h1 .word .letter.letter-up-l.alive:not(.cool)::before, h1 .word .letter.letter-up-l:hover:not(.cool)::before {
  width: calc(var(--letter-size) * 0.35);
  height: calc(var(--letter-size) * 1);
  top: 0;
  border-radius: calc(var(--letter-size) * 0.5) calc(var(--letter-size) * 0.5) 0 0;
}
h1 .word .letter.letter-up-l.alive:not(.cool)::after, h1 .word .letter.letter-up-l:hover:not(.cool)::after {
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 0.35);
  left: calc(var(--letter-size) * 0.35);
  top: calc(var(--letter-size) * 0.65);
  border-radius: 0 calc(var(--letter-size) * 0.5) calc(var(--letter-size) * 0.5) 0;
}
h1 .word .letter.letter-up-l-2::before {
  width: calc(var(--letter-size) * 1);
  height: calc(var(--letter-size) * 0.5);
  left: 0;
  top: calc(var(--letter-size) * 0.5);
  background-color: var(--secondary);
  transform-origin: calc(var(--letter-size) * 0.25) calc(var(--letter-size) * 0.25);
  transform: scale(1) translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
h1 .word .letter.letter-up-l-2::after {
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 1);
  left: 0;
  top: 0;
  background-color: transparent;
  border: calc(var(--letter-size) * 0.1) solid var(--primary);
  transform-origin: calc(var(--letter-size) * 0.25) calc(var(--letter-size) * 0.75);
  transform: scale(1) translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
h1 .word .letter.letter-up-l-2.alive:not(.cool)::before, h1 .word .letter.letter-up-l-2:hover:not(.cool)::before {
  background-color: var(--secondary);
  transform: scale(1) translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
}
h1 .word .letter.letter-up-l-2.alive:not(.cool)::after, h1 .word .letter.letter-up-l-2:hover:not(.cool)::after {
  background-color: transparent;
  border: calc(var(--letter-size) * 0.1) solid var(--primary);
  transform: scale(1) translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
}
h1 .word .letter.letter-b {
  width: calc(var(--letter-size) * 0.65);
}
h1 .word .letter.letter-b::before, h1 .word .letter.letter-b::after {
  border-bottom-right-radius: var(--letter-size);
  border-top-right-radius: var(--letter-size);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  width: calc(var(--letter-size) * 0.75);
  height: 62.5%;
}
h1 .word .letter.letter-b::before {
  left: 0;
  top: 40%;
  transition-delay: 0.1s;
  animation-delay: 1s;
  background-color: var(--secondary);
}
h1 .word .letter.letter-b::after {
  width: calc(var(--letter-size) * 0.5);
  left: 0;
  top: 0;
  background-color: var(--primary);
}
h1 .word .letter.letter-b.alive:not(.cool)::after, h1 .word .letter.letter-b:hover:not(.cool)::after {
  width: calc(var(--letter-size) * 0.75);
  height: calc(var(--letter-size) * 0.75);
  top: calc(var(--letter-size) * 0.25);
}
h1 .word .letter.letter-b.alive:not(.cool)::before, h1 .word .letter.letter-b:hover:not(.cool)::before {
  width: calc(var(--letter-size) * 0.25);
  height: calc(var(--letter-size) * 1);
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  top: 0;
}
h1 .word .letter.letter-up-b {
  width: calc(var(--letter-size) * 0.65);
}
h1 .word .letter.letter-up-b::before, h1 .word .letter.letter-up-b::after {
  border-bottom-right-radius: var(--letter-size);
  border-top-right-radius: var(--letter-size);
  width: calc(var(--letter-size) * 0.75);
  height: 62.5%;
}
h1 .word .letter.letter-up-b::before {
  left: 0;
  top: 40%;
}
h1 .word .letter.letter-up-b::after {
  width: calc(var(--letter-size) * 0.5);
  left: 0;
  top: 0;
}
h1 .word .letter.letter-up-e {
  width: calc(var(--letter-size) * 0.666);
}
h1 .word .letter.letter-up-e::before {
  width: calc(var(--letter-size) * 0.5);
  left: calc(var(--letter-size) * 0.25);
  top: calc(var(--letter-size) * 0.25);
  height: calc(var(--letter-size) * 0.125);
  transition-delay: 0.2s;
}
h1 .word .letter.letter-up-e::after {
  width: calc(var(--letter-size) * 0.666);
  height: calc(var(--letter-size) * 1);
  left: 0;
  top: 0;
  transition-delay: 0.2s;
  animation-delay: 2.5s;
}
h1 .word .letter.letter-up-e span {
  width: calc(var(--letter-size) * 0.5);
  left: calc(var(--letter-size) * 0.25);
  top: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 0.125);
  transition-delay: 0.1s;
}
h1 .word .letter.letter-up-e.alive:not(.cool)::before, h1 .word .letter.letter-up-e.alive:not(.cool)::after,
h1 .word .letter.letter-up-e.alive:not(.cool) span, h1 .word .letter.letter-up-e:hover:not(.cool)::before, h1 .word .letter.letter-up-e:hover:not(.cool)::after,
h1 .word .letter.letter-up-e:hover:not(.cool) span {
  width: calc(var(--letter-size) * 0.666);
  left: 0;
}
h1 .word .letter.letter-up-e.alive:not(.cool)::before, h1 .word .letter.letter-up-e:hover:not(.cool)::before {
  height: calc(var(--letter-size) * 0.4);
  top: 0;
  transition-delay: 0.1s;
}
h1 .word .letter.letter-up-e.alive:not(.cool)::after, h1 .word .letter.letter-up-e:hover:not(.cool)::after {
  height: calc(var(--letter-size) * 0.6);
  top: calc(var(--letter-size) * 0.2);
  transition-delay: 0s;
}
h1 .word .letter.letter-up-e.alive:not(.cool) span, h1 .word .letter.letter-up-e:hover:not(.cool) span {
  top: calc(var(--letter-size) * 0.6);
  height: calc(var(--letter-size) * 0.4);
  transition-delay: 0.2s;
}
h1 .word .letter.letter-low-e::before {
  width: calc(var(--letter-size) * 0.5);
  height: var(--letter-size);
  left: 0;
  top: 0;
  border-bottom-left-radius: var(--letter-size);
  border-top-left-radius: var(--letter-size);
  z-index: 1;
}
h1 .word .letter.letter-low-e::after {
  width: var(--letter-size);
  height: calc(var(--letter-size) * 0.5);
  left: 0;
  top: 0;
  border-top-right-radius: var(--letter-size);
  border-top-left-radius: var(--letter-size);
}
h1 .word .letter.letter-low-e.alive:not(.cool)::before, h1 .word .letter.letter-low-e:hover:not(.cool)::before {
  width: calc(var(--letter-size) * 0.6);
  height: calc(var(--letter-size) * 0.4);
  left: calc(var(--letter-size) * 0.4);
  top: calc(var(--letter-size) * 0.25);
  border-radius: 0;
  border-top-left-radius: var(--letter-size);
  border-bottom-left-radius: var(--letter-size);
}
h1 .word .letter.letter-low-e.alive:not(.cool)::after, h1 .word .letter.letter-low-e:hover:not(.cool)::after {
  width: var(--letter-size);
  height: var(--letter-size);
  border-radius: 0;
}
h1 .word .letter.letter-up-r {
  width: calc(var(--letter-size) * 0.65);
}
h1 .word .letter.letter-up-r::before, h1 .word .letter.letter-up-r::after {
  left: 0;
  top: 0;
}
h1 .word .letter.letter-up-r::before {
  border-bottom-right-radius: var(--letter-size);
  border-top-right-radius: var(--letter-size);
  width: calc(var(--letter-size) * 0.6);
  height: calc(var(--letter-size) * 0.625);
  border: calc(var(--letter-size) * 0.1) solid var(--primary);
  background-color: transparent;
  transition-delay: 0.1s;
}
h1 .word .letter.letter-up-r::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(var(--letter-size) * 1) 0 0 calc(var(--letter-size) * 0.7);
  border-color: transparent transparent transparent var(--secondary);
  background-color: transparent;
  border-radius: 0;
  transform: translate(0, 0) rotate(0deg);
  transition-delay: 0s;
  animation-delay: 1.5s;
}
h1 .word .letter.letter-up-r.alive:not(.cool)::before, h1 .word .letter.letter-up-r:hover:not(.cool)::before {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  width: calc(var(--letter-size) * 0.4);
  height: calc(var(--letter-size) * 0.75);
  top: calc(var(--letter-size) * 0.25);
  border: calc(var(--letter-size) * 0.21) solid var(--primary);
  transition-delay: 0s;
}
h1 .word .letter.letter-up-r.alive:not(.cool)::after, h1 .word .letter.letter-up-r:hover:not(.cool)::after {
  border-width: calc(var(--letter-size) * 0.5) 0 0 calc(var(--letter-size) * 0.5);
  transform: translate(0, 0) rotate(90deg);
  left: calc(var(--letter-size) * 0.3);
  top: calc(var(--letter-size) * 0.25);
  transition-delay: 0.1s;
}
h1 .word .letter.letter-low-r {
  width: calc(var(--letter-size) * 0.9);
}
h1 .word .letter.letter-low-r::before {
  width: var(--letter-size);
  height: calc(var(--letter-size) * 0.5);
  left: 0;
  top: 0;
  border-top-right-radius: var(--letter-size);
  border-top-left-radius: var(--letter-size);
  animation-delay: 0.8s;
}
h1 .word .letter.letter-low-r::after {
  width: calc(var(--letter-size) * 0.5);
}
h1 .word .letter.letter-low-r.alive:not(.cool)::before, h1 .word .letter.letter-low-r:hover:not(.cool)::before {
  width: calc(var(--letter-size) * 0.5);
  height: var(--letter-size);
  left: 0;
  top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
h1 .word .letter.letter-low-r.alive:not(.cool)::after, h1 .word .letter.letter-low-r:hover:not(.cool)::after {
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 0.5);
  border-radius: var(--letter-size);
  left: calc(var(--letter-size) * 0.5);
}
h1 .word .letter.letter-t::after {
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 1);
  left: calc(var(--letter-size) * 0.25);
  top: 0;
  z-index: 1;
  animation-delay: 0.75s;
}
h1 .word .letter.letter-t::before {
  width: calc(var(--letter-size) * 1);
  height: calc(var(--letter-size) * 0.5);
  left: 0;
  top: 0;
  transition-delay: 0.15s;
  animation-delay: 0.6s;
}
h1 .word .letter.letter-t.alive:not(.cool)::after, h1 .word .letter.letter-t:hover:not(.cool)::after {
  width: calc(var(--letter-size) * 0.75);
  height: calc(var(--letter-size) * 0.25);
  left: calc(var(--letter-size) * 0.125);
  top: calc(var(--letter-size) * 0.25);
}
h1 .word .letter.letter-t.alive:not(.cool)::before, h1 .word .letter.letter-t:hover:not(.cool)::before {
  height: calc(var(--letter-size) * 1);
  width: calc(var(--letter-size) * 0.25);
  left: calc(var(--letter-size) * 0.375);
}
h1 .word .letter.letter-up-t::before {
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 1);
  left: calc(var(--letter-size) * 0.25);
  top: 0;
  z-index: 1;
}
h1 .word .letter.letter-up-t::after {
  width: calc(var(--letter-size) * 1);
  height: calc(var(--letter-size) * 0.5);
  left: 0;
  top: 0;
}
h1 .word .letter.letter-up-o::before {
  width: calc(var(--letter-size) * 1);
  height: calc(var(--letter-size) * 1);
  left: 0;
  top: 0;
  border-radius: calc(var(--letter-size) * 0.5);
  background-color: transparent;
  border: calc(var(--letter-size) * 0.2) solid var(--primary);
  transform: scaleX(1) scaleY(1);
  transition-duration: 0.25s;
}
h1 .word .letter.letter-up-o::after {
  content: none;
}
h1 .word .letter.letter-up-o.alive:not(.cool)::before, h1 .word .letter.letter-up-o:hover:not(.cool)::before {
  top: calc(var(--letter-size) * 0.125);
  transform: scaleX(-0.75) scaleY(0.75);
  border: calc(var(--letter-size) * 0.51) solid var(--primary);
}
h1 .word .letter.letter-up-o.letter-up-o-2::before, h1 .word .letter.letter-up-o.letter-up-o-2::after {
  border-radius: 100%;
}
h1 .word .letter.letter-up-o.letter-up-o-2::before {
  width: calc(var(--letter-size) * 0.5);
  height: calc(var(--letter-size) * 0.5);
  left: calc(var(--letter-size) * 0.25);
  top: calc(var(--letter-size) * 0.25);
  background-color: var(--primary);
  border-radius: calc(var(--letter-size) * 1);
  z-index: 1;
  transition-delay: 0.1s;
  transform: scaleX(1) scaleY(1);
}
h1 .word .letter.letter-up-o.letter-up-o-2::after {
  content: "";
  width: calc(var(--letter-size) * 1);
  height: calc(var(--letter-size) * 1);
  left: 0;
  top: 0;
  border-radius: calc(var(--letter-size) * 1);
  transition-delay: 0s;
}
h1 .word .letter.letter-up-o.letter-up-o-2.alive:not(.cool)::before, h1 .word .letter.letter-up-o.letter-up-o-2:hover:not(.cool)::before {
  width: calc(var(--letter-size) * 1);
  height: calc(var(--letter-size) * 1);
  left: 0;
  top: 0;
  transform: scaleX(1) scaleY(1);
  transition-delay: 0s;
}
h1 .word .letter.letter-up-o.letter-up-o-2.alive:not(.cool)::after, h1 .word .letter.letter-up-o.letter-up-o-2:hover:not(.cool)::after {
  width: calc(var(--letter-size) * 1.4);
  height: calc(var(--letter-size) * 1.4);
  left: calc(var(--letter-size) * -0.2);
  top: calc(var(--letter-size) * -0.2);
  transition-delay: 0.2s;
}
h1 .word .letter.letter-up-f {
  width: calc(var(--letter-size) * 0.666);
}
h1 .word .letter.letter-up-f::before {
  width: calc(var(--letter-size) * 0.7);
  height: calc(var(--letter-size) * 0.25);
  left: 0;
  top: calc(var(--letter-size) * 0.25);
}
h1 .word .letter.letter-up-f::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(var(--letter-size) * 1) calc(var(--letter-size) * 0.7) 0 0;
  border-color: var(--secondary) transparent transparent transparent;
  background-color: transparent;
  border-radius: 0;
  animation-delay: 1s;
}
h1 .word .letter.letter-up-f.alive:not(.cool)::before, h1 .word .letter.letter-up-f:hover:not(.cool)::before {
  width: calc(var(--letter-size) * 0.666);
  height: calc(var(--letter-size) * 0.333);
  border-radius: calc(var(--letter-size) * 0.333) calc(var(--letter-size) * 0.333) 0 0;
  top: 0;
}
h1 .word .letter.letter-up-f.alive:not(.cool)::after, h1 .word .letter.letter-up-f:hover:not(.cool)::after {
  border-width: calc(var(--letter-size) * 0.4) calc(var(--letter-size) * 0.4) 0 0;
  top: calc(var(--letter-size) * 0.45);
}
h1 .word .letter.letter-s {
  width: calc(var(--letter-size) * 0.65);
}
h1 .word .letter.letter-s::before, h1 .word .letter.letter-s::after {
  width: calc(var(--letter-size) * 0.75);
  height: 62.5%;
}
h1 .word .letter.letter-s::before {
  border-bottom-right-radius: var(--letter-size);
  border-top-right-radius: var(--letter-size);
  left: 0;
  top: 40%;
  z-index: 1;
  animation-delay: 1.5s;
  background-color: var(--secondary);
}
h1 .word .letter.letter-s::after {
  border-bottom-left-radius: var(--letter-size);
  border-top-left-radius: var(--letter-size);
  left: 0;
  top: 0;
  transition-delay: 0.1s;
  background-color: var(--primary);
}
h1 .word .letter.letter-s.alive:not(.cool)::before, h1 .word .letter.letter-s.alive:not(.cool)::after, h1 .word .letter.letter-s:hover:not(.cool)::before, h1 .word .letter.letter-s:hover:not(.cool)::after {
  width: calc(var(--letter-size) * 0.75);
  height: calc(var(--letter-size) * 0.375);
  border-top-left-radius: 0;
  border-top-right-radius: var(--letter-size);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: var(--letter-size);
}
h1 .word .letter.letter-s.alive:not(.cool)::before, h1 .word .letter.letter-s:hover:not(.cool)::before {
  border-top-left-radius: var(--letter-size);
  border-top-right-radius: var(--letter-size);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  top: calc(var(--letter-size) * 0.25);
  left: calc(var(--letter-size) * 0.25);
  z-index: 1;
}
h1 .word .letter.letter-s.alive:not(.cool)::after, h1 .word .letter.letter-s:hover:not(.cool)::after {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--letter-size);
  border-bottom-right-radius: var(--letter-size);
  top: calc(var(--letter-size) * 0.625);
}
h1 .word .letter.letter-up-s {
  width: calc(var(--letter-size) * 0.65);
}
h1 .word .letter.letter-up-s::before, h1 .word .letter.letter-up-s::after {
  width: calc(var(--letter-size) * 0.75);
  height: 62.5%;
}
h1 .word .letter.letter-up-s::before {
  border-bottom-right-radius: var(--letter-size);
  border-top-right-radius: var(--letter-size);
  left: 0;
  top: 40%;
  z-index: 1;
}
h1 .word .letter.letter-up-s::after {
  border-bottom-left-radius: var(--letter-size);
  border-top-left-radius: var(--letter-size);
  left: 0;
  top: 0;
}
h1 .word .letter.accented::before {
  background-color: var(--accent);
}

:root body.tone-a .word .letter::before, :root body.tone-a .word .letter::after {
  mix-blend-mode: darken;
}
:root body.tone-a .word .letter span {
  mix-blend-mode: darken;
}
:root body.tone-b .word .letter::before, :root body.tone-b .word .letter::after {
  mix-blend-mode: multiply;
}
:root body.tone-b .word .letter span {
  mix-blend-mode: multiply;
}
:root body.tone-c .word .letter::before, :root body.tone-c .word .letter::after {
  mix-blend-mode: hard-light;
}
:root body.tone-c .word .letter span {
  mix-blend-mode: hard-light;
}
:root body.tone-d .word .letter::before, :root body.tone-d .word .letter::after {
  mix-blend-mode: multiply;
}
:root body.tone-d .word .letter span {
  mix-blend-mode: multiply;
}
:root body.tone-e .word .letter::before, :root body.tone-e .word .letter::after {
  mix-blend-mode: multiply;
}
:root body.tone-e .word .letter span {
  mix-blend-mode: multiply;
}

:root {
  --primary: #494e8b;
  --secondary: #8d99ae;
  --accent: #f8f32b;
  --text: #434451;
  --back: #ffffff;
}

:root body.tone-a {
  --primary: #494e8b;
  --secondary: #8d99ae;
  --accent: #f8f32b;
  --text: #434451;
  --back: #ffffff;
}
:root body.tone-b {
  --primary: #5f2a62;
  --secondary: #a976c3;
  --accent: #a0de59;
  --text: #466b5a;
  --back: #fffcf3;
}
:root body.tone-c {
  --primary: #3c6e71;
  --secondary: #284b63;
  --accent: #dc136c;
  --text: #474747;
  --back: #ffffff;
}
:root body.tone-d {
  --primary: #183059;
  --secondary: #f03a47;
  --accent: #276fbf;
  --text: #af5b5b;
  --back: #f6f4f3;
}
:root body.tone-e {
  --primary: #246eb9;
  --secondary: #d8cd52;
  --accent: #f06543;
  --text: #908e72;
  --back: #fdfffc;
}

.color {
  mix-blend-mode: color;
}

.color-burn {
  mix-blend-mode: color-burn;
}

.color-dodge {
  mix-blend-mode: color-dodge;
}

.darken {
  mix-blend-mode: darken;
}

.difference {
  mix-blend-mode: difference;
}

.exclusion {
  mix-blend-mode: exclusion;
}

.hard-light {
  mix-blend-mode: hard-light;
}

.hue {
  mix-blend-mode: hue;
}

.lighten {
  mix-blend-mode: lighten;
}

.luminosity {
  mix-blend-mode: luminosity;
}

.multiply {
  mix-blend-mode: multiply;
}

.normal {
  mix-blend-mode: normal;
}

.overlay {
  mix-blend-mode: overlay;
}

.saturation {
  mix-blend-mode: saturation;
}

.screen {
  mix-blend-mode: screen;
}

.soft-light {
  mix-blend-mode: soft-light;
}

.primary {
  background-color: var(--primary);
}

.secondary {
  background-color: var(--secondary);
}

.accent {
  background-color: var(--accent);
}

.text {
  background-color: var(--text);
}

.back {
  background-color: var(--back);
}

body,
html {
  width: 100%;
  padding: 0;
  margin: 0;
}

.colors {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.colors .col {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}
.colors .col .square {
  width: 2rem;
  height: 2rem;
}

.examples {
  padding: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--back);
}
.examples .example {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.examples .example p {
  min-width: 5rem;
  max-width: 5rem;
}
.examples .example .bar {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.examples .example .bar div {
  height: 1.5rem;
  z-index: 2;
  position: relative;
  top: -0.5rem;
}
.examples .example .bar .top,
.examples .example .bar .bottom {
  grid-column: span 3;
  z-index: 1;
  top: 0;
}
.examples .example .bar .bottom {
  z-index: 3;
}

* {
  font-family: "Roboto", sans-serif;
  color: var(--text);
}

body {
  background-color: var(--back);
  color: var(--text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}

::selection {
  background-color: var(--primary);
  color: var(--back);
}

a {
  font-weight: 500;
  color: var(--text);
  background-color: var(--accent);
}
a:hover {
  color: var(--text);
  background-color: var(--back);
}
a:hover span {
  color: var(--text);
  background-color: var(--back);
}

p {
  max-width: 40rem;
}

.container {
  margin: 0 auto;
  width: 90vw;
  max-width: 50rem;
}
@media screen and (min-width: 1024px) {
  .container {
    width: 80vw;
  }
}
.container.container-b {
  margin: calc(var(--letter-size) * 1.5) auto;
  padding-top: calc(var(--letter-size) * 0.5);
}

header {
  left: 0;
  padding: 2rem 0 0.5rem;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
  background-color: var(--back);
  margin: 0;
  height: calc(var(--letter-size) * 2.1);
  box-sizing: content-box;
}

main {
  margin-top: calc(var(--letter-size) * 2.1 + 4rem);
}

h2 {
  background-color: var(--back);
  color: var(--secondary);
  border-bottom: 2px solid;
  padding: 3rem 0 0;
  position: sticky;
  text-align: right;
  z-index: 2;
  font-size: 1.5rem;
  pointer-events: none;
  top: calc(var(--letter-size) * 2.05);
}
@media screen and (min-width: 425px) {
  h2 {
    font-size: 1.75rem;
  }
}

h3 {
  margin-top: 2rem;
}

h4.hi {
  color: var(--primary);
  line-height: 2rem;
  display: inline;
  background-color: var(--accent);
}
h4:not(.hi) {
  font-size: 1.125rem;
}

ul {
  margin-top: 1rem;
}
ul li {
  list-style: disc;
  margin-top: 0.5rem;
  list-style-position: inside;
}

section.bio .pic-container {
  border-radius: 50%;
  float: left;
  margin: 1rem 1rem 1rem 0;
  shape-outside: circle();
  width: 8rem;
  padding-top: 8rem;
  background-image: url("./../img/pic.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (min-width: 1024px) {
  section.bio .pic-container {
    width: 10rem;
    padding-top: 10rem;
  }
}
section.technical-knowledge .technical-knowledge-container {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
section.technical-knowledge .technical-knowledge-container h5 {
  margin: 1rem 0 0.15rem;
}
section.technical-knowledge .technical-knowledge-container ul,
section.technical-knowledge .technical-knowledge-container li {
  margin: 0 0 0 1rem;
}
section.technical-knowledge .technical-knowledge-container--badges {
  width: 2rem;
  margin: 1rem;
}
@media screen and (min-width: 768px) {
  section.technical-knowledge .technical-knowledge-container--badges {
    min-width: 9rem;
    max-width: 12rem;
    width: 20vw;
    margin-right: 0;
  }
}
section.technical-knowledge .technical-knowledge-container--badges img {
  margin: 0.25rem;
  width: 2rem;
  overflow: hidden;
  height: 2rem;
  object-position: -0.15rem;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  section.technical-knowledge .technical-knowledge-container--badges img {
    all: unset;
    width: auto;
    margin: 0.125rem;
  }
}
@media screen and (min-width: 1200px) {
  section.technical-knowledge .technical-knowledge-container--badges img {
    margin: 0.25rem;
  }
}

.contact-link-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin: 3rem 0 0;
}
@media screen and (min-width: 1024px) {
  .contact-link-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.contact-link-container a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-link-container a span {
  color: var(--secondary);
  margin-right: 0.5rem;
}

/* HELPERS
----------------------------------------------------------------------------- */
.primary {
  color: var(--primary);
}

.secondary {
  color: var(--secondary);
}

.accent {
  color: var(--accent);
}

.cover {
  background-image: url("./../img/texture1.jpg");
  background-position: center;
  background-size: cover;
  mix-blend-mode: multiply;
  opacity: 0.1;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 2;
}

/* EXAMPLES
----------------------------------------------------------------------------- */
.examples {
  display: flex;
  justify-content: space-between;
}
.examples .example-list {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  padding-right: 1rem;
  border-right: 1px solid var(--primary);
}
.examples .example-list button {
  color: var(--primary);
  padding: 0.25rem;
  text-align: left;
}
.examples .example-list button:hover {
  background-color: var(--back);
  color: var(--secondary);
}
.examples .example-list button.active {
  background-color: transparent;
  color: var(--secondary);
  cursor: default;
}
.examples .example-container {
  padding: 1rem;
}
.examples .example-container .example {
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .examples .example-container .example {
    flex-direction: row;
  }
}
.examples .example-container .example.hide {
  display: none;
}
.examples .example-container .example .example-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 15rem;
  width: min(40vw, 30rem);
}
.examples .example-container .example p {
  padding-left: 1rem;
}

:root body.tone-a h4.hi {
  color: var(--primary);
  background-color: var(--accent);
}
:root body.tone-a a {
  color: var(--text);
  background-color: var(--accent);
}
:root body.tone-a a:hover {
  color: var(--text);
  background-color: var(--back);
}
:root body.tone-a a:hover span {
  color: var(--text);
  background-color: var(--back);
}
:root body.tone-b h4.hi {
  color: var(--back);
  background-color: #5f2a62;
}
:root body.tone-b a {
  color: var(--back);
  background-color: #5f2a62;
}
:root body.tone-b a:hover {
  color: var(--back);
  background-color: #3c1b3e;
}
:root body.tone-b a:hover span {
  color: var(--back);
  background-color: #3c1b3e;
}
:root body.tone-c h4.hi {
  color: #450a93;
  background-color: #f422cc;
}
:root body.tone-c a {
  color: #450a93;
  background-color: #f422cc;
}
:root body.tone-c a:hover {
  color: #450a93;
  background-color: #d80bb1;
}
:root body.tone-c a:hover span {
  color: #450a93;
  background-color: #d80bb1;
}
:root body.tone-d h4.hi {
  color: var(--back);
  background-color: var(--secondary);
}
:root body.tone-d a {
  color: var(--back);
  background-color: var(--secondary);
}
:root body.tone-d a:hover {
  color: var(--back);
  background-color: var(--secondary);
}
:root body.tone-d a:hover span {
  color: var(--back);
  background-color: var(--secondary);
}
:root body.tone-e h4.hi {
  color: var(--primary);
  background-color: var(--secondary);
}
:root body.tone-e a {
  color: var(--primary);
  background-color: var(--secondary);
}
:root body.tone-e a:hover {
  color: var(--primary);
  background-color: var(--secondary);
}
:root body.tone-e a:hover span {
  color: var(--primary);
  background-color: var(--secondary);
}

/* COLOR TOGGLE
----------------------------------------------------------------------------- */
.color-toggle-container {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  align-items: center;
  display: none;
  gap: 0.5rem;
  justify-content: space-between;
  flex-direction: column;
  z-index: 4;
  transform: translate3d(0, 0, 0);
}
@media screen and (min-width: 425px) {
  .color-toggle-container {
    display: flex;
  }
}
.color-toggle-container span {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 2rem;
  background-color: var(--primary);
  border: 0.25rem solid var(--back);
  box-shadow: inset 0 0 0 0.25rem var(--accent);
  cursor: pointer;
  position: relative;
  opacity: 50%;
}
.color-toggle-container span:hover, .color-toggle-container span.active {
  opacity: 1;
}
.color-toggle-container span:nth-of-type(1) {
  background-color: #494e8b;
  box-shadow: inset 0 0 0 0.25rem #f8f32b;
}
.color-toggle-container span:nth-of-type(1).active {
  border-color: #494e8b;
}
.color-toggle-container span:nth-of-type(2) {
  background-color: #a0de59;
  box-shadow: inset 0 0 0 0.25rem #5f2a62;
}
.color-toggle-container span:nth-of-type(2).active {
  border-color: #a976c3;
}
.color-toggle-container span:nth-of-type(3) {
  background-color: #77dce2;
  box-shadow: inset 0 0 0 0.25rem #f422cc;
}
.color-toggle-container span:nth-of-type(3).active {
  border-color: #284b63;
}
.color-toggle-container span:nth-of-type(4) {
  background-color: #183059;
  box-shadow: inset 0 0 0 0.25rem #f03a47;
}
.color-toggle-container span:nth-of-type(4).active {
  border-color: #276fbf;
}
.color-toggle-container span:nth-of-type(5) {
  background-color: #d8cd52;
  box-shadow: inset 0 0 0 0.25rem #f06543;
}
.color-toggle-container span:nth-of-type(5).active {
  border-color: #246eb9;
}

/*# sourceMappingURL=styles.css.map */