@import url("https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,700&display=swap");
@font-face {
  font-family: 'With Sans';
  src: url("../fonts/WithAgrandir-Master.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 50% 200%; }
@font-face {
  font-family: 'Agrandir Grotesk';
  src: url("../fonts/AgrandirGroteskVariable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 50% 200%; }
html {
  overflow-x: hidden; }

:root {
  --fontw: 100;
  --ball: translateX(90px) translateY(90px);
  --foreground: #2c2c2c;
  --background: #F9F4F0;
  --complementary: #2C2721;
  --comp_text: white;
  --comp_text_inverted: black;
  --lightergray: #eee;
  --lightgray: #A4B0B6;
  --darkgray: #2c2c2c; }

* {
  font-family: 'Work Sans', 'Helvetica', sans-serif;
  box-sizing: border-box;
  color: var(--darkgray);
  list-style: none;
  user-select: none;
  text-rendering: optimizeLegibility; }

*:focus {
  outline: none; }

.underline {
  text-decoration: underline; }

.with-sans {
  font-family: With Sans, sans-serif; }

.agrandir {
  font-family: Agrandir Grotesk, sans-serif !important; }

.disabled {
  opacity: 0.5;
  pointer-events: none; }

.hidden {
  display: none; }

body {
  margin: 0;
  background: var(--background);
  transition: background 0.06s ease-in-out; }

.wrapper {
  width: 100vw;
  max-width: 1700px;
  height: 100vh;
  margin: 0 auto; }

nav {
  z-index: 100; }
  nav > a, nav > button, nav > div {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 200px; }
    nav > a svg, nav > button svg, nav > div svg {
      width: 26px;
      height: 26px; }
    nav > a:hover p, nav > button:hover p, nav > div:hover p {
      display: block; }
    nav > a p, nav > button p, nav > div p {
      margin: 5px 5px 0;
      display: none;
      font-size: 16px;
      color: #3F4A51; }
  nav .back {
    position: absolute;
    top: 30px;
    left: 40px; }
    nav .back svg path {
      fill: var(--foreground); }
    nav .back p {
      color: var(--foreground); }
  nav .options svg path {
    fill: var(--foreground); }
  nav .close,
  nav .options {
    position: absolute;
    top: 30px;
    right: 40px;
    flex-direction: row-reverse;
    background: none;
    border: 0;
    z-index: 2; }
    nav .close p,
    nav .options p {
      margin: 0 15px 0 0;
      color: var(--foreground); }
  nav .close {
    display: none;
    z-index: 3; }

/* The container */
.checkbox {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */ }
  .checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0; }
  .checkbox .checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background: #FFFFFF;
    border: 0.5px solid var(--darkgray);
    box-sizing: border-box;
    border-radius: 2px;
    transition: all 0.2s ease-in-out; }
  .checkbox:hover input ~ .checkmark {
    background-color: var(--lightergray); }
  .checkbox input:checked ~ .checkmark {
    background-color: var(--background); }
  .checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none; }
  .checkbox input:checked ~ .checkmark:after {
    display: block; }
  .checkbox .checkmark:after {
    left: 5px;
    top: 2px;
    width: 3px;
    height: 8px;
    border: solid var(--comp_text_inverted);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg); }

#header_menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: unset;
  display: flex;
  flex-direction: column;
  background: #eeeeee;
  padding: 0; }
  #header_menu #header_wrapper {
    display: none; }
  #header_menu .top {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start; }
  #header_menu ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0;
    overflow: scroll; }
    #header_menu ul li {
      height: 250px;
      min-width: 400px;
      margin: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--lightergray);
      border-radius: 2px;
      box-shadow: 0 2px 3px var(--lightgray);
      transition: transform 0.2s ease-in-out; }
      #header_menu ul li:hover {
        transform: scale3d(1.02, 1.02, 1.02);
        transform-origin: center; }
      #header_menu ul li a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center; }
  #header_menu .header_icon {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 30px;
    top: 15px; }
    #header_menu .header_icon img {
      height: 50px;
      width: 50px;
      object-fit: contain;
      cursor: pointer; }
    #header_menu .header_icon .icon_close {
      display: none; }

#home_container ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0;
  overflow: scroll; }
  #home_container ul li {
    height: 250px;
    min-width: 400px;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--lightergray);
    border-radius: 2px;
    box-shadow: 0 2px 3px var(--lightgray);
    transition: transform 0.2s ease-in-out; }
    #home_container ul li:hover {
      transform: scale3d(1.02, 1.02, 1.02);
      transform-origin: center; }
    #home_container ul li a {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center; }

/* BACKGOUND COLOR SELECTOR */
.bg-color ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-flow: wrap;
  padding: 0; }
.bg-color li {
  width: 30px;
  height: 30px; }
.bg-color li button {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0;
  cursor: pointer; }
.bg-color li button:hover {
  opacity: 0.9; }
.bg-color .white {
  background-color: #F9F4F0;
  border: 1px solid var(--lightgray); }
.bg-color .black {
  background-color: #2C2721; }
.bg-color .orange {
  background-color: #D98864; }
.bg-color .pink {
  background: #F4BACC; }
.bg-color .yellow {
  background-color: #F7DE8E; }
.bg-color .blue {
  background-color: #108AA3; }
.bg-color .green {
  background-color: #176659; }
.bg-color .purple {
  background-color: #C7CEF4; }
.bg-color .light-green {
  background-color: #AED6A5; }
.bg-color .bgcolor-selected {
  border: 1px solid #2C2C2C;
  border-radius: 50%;
  width: 33px;
  height: 33px; }

/*
	https://easings.net/
*/
noscript {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: var(--lightergray);
  color: var(--darkgray);
  font-size: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  noscript p {
    margin: 10px auto; }

.errors {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 0;
  display: none;
  animation: opacity0_1 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
  animation-direction: reverse;
  background: var(--lightergray);
  color: var(--darkgray);
  font-size: 18px;
  text-align: center;
  justify-content: center;
  align-items: center; }
  @media (orientation: portrait) and (max-width: 820px) {
    .errors {
      display: flex;
      opacity: 1;
      animation: opacity0_1 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; } }
@keyframes opacity0_1 {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
  .errors .resize_error {
    display: block; }
  .errors .mobile_error {
    display: none; }
  .mobile .errors .resize_error {
    display: none; }
  .mobile .errors .mobile_error {
    display: block; }

:root {
  --optionsWidth: 365px;
  --scaleMulti: scale3D(1,1,1); }

.typetool {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  overflow: hidden;
  /* LAYOUTS */ }
  .typetool #options {
    height: 100vh;
    width: 365px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    z-index: 3;
    overflow: scroll;
    background: #FFFCF9;
    -webkit-box-shadow: -3px 4px 10px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: -3px 4px 10px rgba(0, 0, 0, 0.15);
    box-shadow: -3px 4px 10px rgba(0, 0, 0, 0.15);
    -webkit-transform: translateX(365px);
    -moz-transform: translateX(365px);
    -ms-transform: translateX(365px);
    -o-transform: translateX(365px);
    transform: translateX(365px);
    -webkit-transition: all 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -o-transition: all 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -moz-transition: all 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: all 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53); }
    .typetool #options label {
      cursor: pointer; }
    .typetool #options .select-hidden {
      display: none;
      visibility: hidden;
      padding-right: 10px; }
    .typetool #options .select {
      cursor: pointer;
      display: inline-block;
      position: relative;
      font-size: 16px;
      color: var(--darkgray);
      width: 100%; }
    .typetool #options .select-styled {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40px;
      background: white;
      border: 1px solid var(--lightgray);
      border-radius: 2px;
      padding: 10px 15px;
      font-size: 15px;
      line-height: 20px;
      color: var(--darkgray);
      appearance: none;
      cursor: pointer; }
      .typetool #options .select-styled:hover {
        background-color: var(--lightergray); }
      .typetool #options .select-styled.active, .typetool #options .select-styled:active {
        background-color: var(--lightergray); }
        .typetool #options .select-styled.active:after, .typetool #options .select-styled:active:after {
          top: 9px;
          border-color: transparent transparent var(--darkgray) transparent; }
    .typetool #options .select-options li,
    .typetool #options .select-styled {
      font-size: 15px;
      font-family: Work Sans, sans-serif; }
    .typetool #options .select-options {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      z-index: 999;
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: white;
      border: 1px solid var(--lightgray);
      border-width: 0 1px 1px 1px;
      border-radius: 0 0 2px 2px;
      max-height: 200px;
      overflow: scroll;
      box-shadow: 0 2px 5px var(--lightgray); }
      .typetool #options .select-options li {
        margin: 0;
        padding: 12px 0;
        text-indent: 15px;
        border-bottom: 1px solid var(--lightergray); }
        .typetool #options .select-options li:hover {
          color: var(--darkgray);
          background: var(--lightergray); }
        .typetool #options .select-options li.active {
          background: var(--lightergray); }
        .typetool #options .select-options li[rel="hide"] {
          display: none; }
    .typetool #options .dropdown svg {
      position: absolute;
      right: 15px;
      top: 45%; }
    .typetool #options button {
      cursor: pointer; }
      .typetool #options button:hover {
        opacity: 0.9; }
    .typetool #options > div {
      padding: 30px; }
    .typetool #options h3 {
      font-family: Work Sans, sans-serif;
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 19px;
      text-align: center;
      letter-spacing: 0.045em;
      color: var(--darkgray);
      text-transform: uppercase;
      margin: 0 0 25px; }
    .typetool #options h4 {
      font-family: Work Sans, sans-serif;
      font-style: normal;
      font-weight: 500;
      font-size: 12px;
      line-height: 14px;
      text-transform: uppercase;
      color: #C0AE9B;
      margin: 0; }
  .typetool .margin-bottom {
    margin-bottom: auto !important; }
  .typetool .modes {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    background: #FFFCF9;
    border-bottom: 1px solid var(--lightergray);
    display: grid;
    grid-gap: 20px;
    padding: 100px 30px 30px !important; }
    .typetool .modes select {
      width: 100%; }
    .typetool .modes label {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      height: 40px;
      margin: 0; }
      .typetool .modes label p {
        font-family: Work Sans;
        font-style: normal;
        font-weight: normal;
        font-size: 13px;
        line-height: 15px;
        color: var(--darkgray);
        margin-left: 10px; }
  .typetool .bg-color ul {
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .typetool .text-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    border-top: 1px solid #EEEEEE; }
    .typetool .text-options h3 {
      margin-bottom: 0;
      grid-column: 1 / span 2; }
    .typetool .text-options .font-style {
      max-height: 120px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
      grid-column: 1 / span 2; }
      .typetool .text-options .font-style h4 {
        width: 100%;
        grid-column: 1 / span 4; }
      .typetool .text-options .font-style label {
        background: none;
        border: 1px solid #C0AE9B;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        text-align: center;
        font-size: 14px;
        line-height: 19px; }
        .typetool .text-options .font-style label p {
          width: 100%;
          height: 100%;
          background: none;
          padding: 20px 10px;
          margin: 0;
          color: #C0AE9B;
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -moz-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -moz-box-align: center;
          -ms-flex-align: center;
          align-items: center; }
        .typetool .text-options .font-style label input[type="radio"] {
          display: none; }
        .typetool .text-options .font-style label input[type="radio"]:checked + p {
          background-color: #2c2721;
          color: white;
          border: 0; }
    .typetool .text-options .font-size {
      display: grid;
      grid-gap: 10px; }
      .typetool .text-options .font-size h4 {
        grid-row: 1; }
      .typetool .text-options .font-size label {
        width: 100px;
        grid-row: 2; }
    .typetool .text-options .text-align {
      display: grid;
      grid-gap: 10px; }
      .typetool .text-options .text-align h4 {
        grid-row: 1; }
      .typetool .text-options .text-align div {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        height: 40px;
        width: 70%;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        grid-row: 2; }
        .typetool .text-options .text-align div label {
          background: none;
          border: none;
          width: 30px;
          height: 30px;
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -moz-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -moz-box-align: center;
          -ms-flex-align: center;
          align-items: center; }
          .typetool .text-options .text-align div label svg {
            width: 20px;
            height: 20px;
            padding: 5px;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            background: none;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px; }
          .typetool .text-options .text-align div label input[type="radio"] {
            display: none; }
          .typetool .text-options .text-align div label input[type="radio"]:checked + svg {
            background-color: var(--lightergray); }
  .typetool #options .export {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid var(--lightergray);
    padding: 25px 30px;
    background: #FFFCF9;
    cursor: pointer; }
    .typetool #options .export .export-open {
      width: 100%;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      position: relative;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .typetool #options .export .export-open h3 {
        margin: 0; }
      .typetool #options .export .export-open svg {
        width: 20px;
        height: 20px;
        position: absolute;
        right: -5px;
        top: -10px;
        padding: 10px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        cursor: pointer; }
      .typetool #options .export .export-open .close-icon {
        display: none; }
    .typetool #options .export .export-options {
      display: none;
      margin-top: 25px; }
      .typetool #options .export .export-options .export-options-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -moz-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end; }
        .typetool #options .export .export-options .export-options-wrapper .format {
          width: 100%;
          grid-column: 1;
          display: grid;
          grid-gap: 10px; }
          .typetool #options .export .export-options .export-options-wrapper .format h4 {
            font-family: Work Sans, sans-serif; }
        .typetool #options .export .export-options .export-options-wrapper .trans-background {
          margin-top: 24px;
          grid-column: 2 / span 2;
          display: flex;
          flex-direction: row-reverse;
          justify-content: flex-end;
          align-items: center;
          width: 100%;
          height: 40px;
          margin: 0; }
          .typetool #options .export .export-options .export-options-wrapper .trans-background p {
            font-family: Work Sans;
            font-style: normal;
            font-weight: normal;
            font-size: 13px;
            line-height: 15px;
            color: var(--darkgray);
            margin-left: 10px; }
        .typetool #options .export .export-options .export-options-wrapper .export-button {
          height: 50px;
          grid-column: 1 / span 3;
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -moz-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -moz-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          color: var(--comp_text);
          background-color: var(--complementary);
          border: 0; }
          .typetool #options .export .export-options .export-options-wrapper .export-button h3 {
            margin: 0 auto;
            color: inherit; }
        .typetool #options .export .export-options .export-options-wrapper .preview {
          margin: 10px 0; }
          .typetool #options .export .export-options .export-options-wrapper .preview button {
            background: none;
            border: 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex; }
            .typetool #options .export .export-options .export-options-wrapper .preview button svg {
              width: 9px;
              height: 16px;
              -webkit-transition: -webkit-transform 0.1s;
              transition: -webkit-transform 0.1s;
              -o-transition: -o-transform 0.1s;
              -moz-transition: transform 0.1s, -moz-transform 0.1s;
              transition: transform 0.1s;
              transition: transform 0.1s, -webkit-transform 0.1s, -moz-transform 0.1s, -o-transform 0.1s; }
            .typetool #options .export .export-options .export-options-wrapper .preview button h4 {
              margin-left: 15px; }
        .typetool #options .export .export-options .export-options-wrapper .refresh {
          grid-column: 3;
          margin: 10px 0; }
          .typetool #options .export .export-options .export-options-wrapper .refresh button {
            background: none;
            border: 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex; }
            .typetool #options .export .export-options .export-options-wrapper .refresh button svg {
              width: 16px;
              height: 16px;
              -webkit-transition: -webkit-transform 0.1s;
              transition: -webkit-transform 0.1s;
              -o-transition: -o-transform 0.1s;
              -moz-transition: transform 0.1s, -moz-transform 0.1s;
              transition: transform 0.1s;
              transition: transform 0.1s, -webkit-transform 0.1s, -moz-transform 0.1s, -o-transform 0.1s; }
              .typetool #options .export .export-options .export-options-wrapper .refresh button svg path {
                stroke: #2c2c2c;
                stroke-width: 2px; }
            .typetool #options .export .export-options .export-options-wrapper .refresh button h4 {
              margin-left: 10px; }
        .typetool #options .export .export-options .export-options-wrapper #preview-box {
          width: 100%;
          grid-column: 1 / span 3;
          background-image: -webkit-linear-gradient(45deg, #dedede 25%, transparent 25%), -webkit-linear-gradient(135deg, #dedede 25%, transparent 25%), -webkit-linear-gradient(45deg, transparent 75%, #dedede 75%), -webkit-linear-gradient(135deg, transparent 75%, #dedede 75%);
          background-image: -moz-linear-gradient(45deg, #dedede 25%, transparent 25%), -moz-linear-gradient(135deg, #dedede 25%, transparent 25%), -moz-linear-gradient(45deg, transparent 75%, #dedede 75%), -moz-linear-gradient(135deg, transparent 75%, #dedede 75%);
          background-image: -o-linear-gradient(45deg, #dedede 25%, transparent 25%), -o-linear-gradient(135deg, #dedede 25%, transparent 25%), -o-linear-gradient(45deg, transparent 75%, #dedede 75%), -o-linear-gradient(135deg, transparent 75%, #dedede 75%);
          background-image: linear-gradient(45deg, #dedede 25%, transparent 25%), linear-gradient(-45deg, #dedede 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dedede 75%), linear-gradient(-45deg, transparent 75%, #dedede 75%);
          -webkit-background-size: 10px 10px;
          -moz-background-size: 10px 10px;
          background-size: 10px 10px;
          background-position: 0 0, 0 5px, 5px -5px, -5px 0px; }
          .typetool #options .export .export-options .export-options-wrapper #preview-box img {
            display: block;
            width: 100%;
            -o-object-fit: contain;
            object-fit: contain;
            border: 1px dashed var(--lightgray); }
  .typetool main {
    width: 100%;
    height: 100vh;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -o-transition: all 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -moz-transition: all 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: all 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  .typetool aside {
    padding: 20px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }
    .typetool aside #controller {
      border: 1px solid var(--foreground);
      width: 25vh;
      height: 25vh;
      max-width: 200px;
      max-height: 200px;
      min-width: 100px;
      min-height: 100px;
      background: none;
      position: relative;
      cursor: cell;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box; }
      .typetool aside #controller #mousecontrol {
        position: absolute;
        left: -70px;
        bottom: 0;
        width: 50px;
        height: 50px;
        border: 1px solid black;
        display: none; }
        .typetool aside #controller #mousecontrol:before {
          background-color: #fff;
          top: 0;
          right: 0;
          content: "";
          height: 100%;
          width: 100%;
          position: absolute;
          -webkit-transition: 0.1s;
          -o-transition: 0.1s;
          -moz-transition: 0.1s;
          transition: 0.1s;
          border: 1px solid black; }
        .typetool aside #controller #mousecontrol:checked:before {
          background-color: var(--complementary); }
      .typetool aside #controller #ball {
        width: 20px;
        height: 20px;
        background: var(--complementary);
        position: absolute;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        cursor: pointer;
        -webkit-box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.5);
        box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.5); }
      .typetool aside #controller .axis {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin: 0;
        position: absolute;
        color: var(--foreground);
        z-index: -1; }
        .typetool aside #controller .axis:nth-of-type(1) {
          top: 3px;
          left: 7px;
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          -o-transform: rotate(-90deg);
          transform: rotate(-90deg);
          -webkit-transform-origin: 50% 120%;
          -moz-transform-origin: 50% 120%;
          -ms-transform-origin: 50% 120%;
          -o-transform-origin: 50% 120%;
          transform-origin: 50% 120%; }
        .typetool aside #controller .axis:nth-of-type(2) {
          bottom: 3px;
          right: 7px; }
    .typetool aside #zoom {
      position: absolute;
      bottom: 20px;
      right: 30px;
      border: 0;
      padding: 10px 15px; }
      .typetool aside #zoom p {
        color: var(--foreground);
        margin: 0;
        text-align: center;
        font-family: 'Work Sans', sans-serif; }
    .typetool aside .reset {
      display: none;
      width: 100px;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 10px 0 0 20px;
      background: none;
      border: 0;
      z-index: 2;
      cursor: pointer;
      -webkit-transition: all 0.2s;
      -o-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s; }
      .typetool aside .reset:hover p {
        display: block; }
      .typetool aside .reset svg {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg); }
        .typetool aside .reset svg path:nth-child(1) {
          stroke: var(--foreground); }
        .typetool aside .reset svg path:nth-child(n+2) {
          fill: var(--foreground); }
      .typetool aside .reset p {
        display: none;
        margin: 0 0 0 10px;
        color: var(--foreground); }
    .typetool aside #measure h1 {
      font-family: With Sans, sans-serif;
      width: unset;
      display: inline-block;
      margin: 0;
      font-weight: var(--fontwght);
      font-stretch: var(--fontwdth);
      font-size: 72pt;
      visibility: hidden;
      position: absolute;
      bottom: -100px; }
  .typetool #text-container {
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    font-size: 70pt; }
    .typetool #text-container [contenteditable=true] {
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
      cursor: text;
      -webkit-transition: all 0.2s;
      -o-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s;
      border: 2px dashed transparent;
      padding: 20px 20px 0 0; }
      .typetool #text-container [contenteditable=true]:empty:before {
        content: attr(placeholder);
        display: block;
        opacity: 0.4; }
      .typetool #text-container [contenteditable=true]:focus {
        border: 2px dashed rgba(0, 0, 0, 0.1);
        /* WebKit/Blink Browsers */ }
      .typetool #text-container [contenteditable=true]:active {
        border: 2px dashed rgba(0, 0, 0, 0.5);
        /* WebKit/Blink Browsers */ }
    .typetool #text-container h1 {
      color: var(--foreground);
      white-space: nowrap;
      line-height: 1.6;
      font-size: 1em; }
      .typetool #text-container h1 * {
        color: var(--foreground); }
    .typetool #text-container h2 {
      font-weight: 400;
      font-size: 0.3548387097em;
      margin: 0.03757859em 0 20px 7px;
      font-stretch: semi-expanded;
      color: var(--foreground);
      cursor: default;
      letter-spacing: 1px; }
    .typetool #text-container #canvas {
      max-height: 900px;
      position: absolute;
      left: 20px;
      top: 20%;
      border: 1.3px dashed var(--foreground);
      padding: 0;
      -webkit-transform-origin: top left;
      -moz-transform-origin: top left;
      -ms-transform-origin: top left;
      -o-transform-origin: top left;
      transform-origin: top left;
      -webkit-transform: var(--scaleMulti) translate3d(0, 0, 0);
      -moz-transform: var(--scaleMulti) translate3d(0, 0, 0);
      transform: var(--scaleMulti) translate3d(0, 0, 0);
      -webkit-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
      -o-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
      -moz-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
      transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
      will-change: transform; }
      @media (max-width: 1700px) {
        .typetool #text-container #canvas {
          left: 5%; } }
      .typetool #text-container #canvas .canvas_wrapper {
        -webkit-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
        transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1); }
      .typetool #text-container #canvas > div > div {
        -webkit-transform-origin: top left;
        -moz-transform-origin: top left;
        -ms-transform-origin: top left;
        -o-transform-origin: top left;
        transform-origin: top left;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
    @media screen and (max-width: 1024px) {
      .typetool #text-container #canvas {
        top: 30%; } }
    @media screen and (max-width: 768px) {
      .typetool #text-container #canvas {
        left: 2%;
        top: 40%; } }
    .typetool #text-container span {
      overflow-wrap: break-word;
      word-break: break-all; }
    .typetool #text-container #wc-logo {
      cursor: default;
      margin-bottom: 0; }
      .typetool #text-container #wc-logo span {
        -webkit-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
        transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1); }
    .typetool #text-container #wc-other * {
      color: var(--foreground); }
    .typetool #text-container #any-text {
      cursor: text; }
    .typetool #text-container .text-container {
      font-family: With Sans, sans-serif;
      width: unset;
      display: inline-block;
      margin: 0;
      font-weight: var(--fontwght);
      font-stretch: var(--fontwdth);
      -webkit-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
      -o-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
      -moz-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
      transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
      line-height: 1.6; }
@keyframes voice-literal {
  0% {
    font-variation-settings: "wght" 469, "wdth" 200; }
  10% {
    font-variation-settings: "wght" 600, "wdth" 170; }
  18% {
    font-variation-settings: "wght" 400, "wdth" 150; }
  25% {
    font-variation-settings: "wght" 900, "wdth" 200; }
  50% {
    font-variation-settings: "wght" 200, "wdth" 150; }
  60% {
    font-variation-settings: "wght" 200, "wdth" 150; }
  70% {
    font-variation-settings: "wght" 100, "wdth" 50; }
  85% {
    font-variation-settings: "wght" 400, "wdth" 170; }
  90% {
    font-variation-settings: "wght" 469, "wdth" 200; }
  100% {
    font-variation-settings: "wght" 469, "wdth" 200; } }
@keyframes slow-long {
  0% {
    font-variation-settings: "wght" 469, "wdth" 200; }
  10% {
    font-variation-settings: "wght" 469, "wdth" 200; }
  20% {
    font-variation-settings: "wght" 900, "wdth" 200; }
  25% {
    font-variation-settings: "wght" 900, "wdth" 200; }
  60% {
    font-variation-settings: "wght" 200, "wdth" 150; }
  70% {
    font-variation-settings: "wght" 100, "wdth" 50; }
  85% {
    font-variation-settings: "wght" 400, "wdth" 170; }
  90% {
    font-variation-settings: "wght" 469, "wdth" 200; }
  100% {
    font-variation-settings: "wght" 469, "wdth" 200; } }
@keyframes fast-longish {
  0% {
    font-variation-settings: "wght" 469, "wdth" 200; }
  10% {
    font-variation-settings: "wght" 600, "wdth" 170; }
  13% {
    font-variation-settings: "wght" 400, "wdth" 150; }
  30% {
    font-variation-settings: "wght" 900, "wdth" 200; }
  40% {
    font-variation-settings: "wght" 900, "wdth" 200; }
  50% {
    font-variation-settings: "wght" 200, "wdth" 150; }
  55% {
    font-variation-settings: "wght" 200, "wdth" 150; }
  60% {
    font-variation-settings: "wght" 100, "wdth" 50; }
  70% {
    font-variation-settings: "wght" 400, "wdth" 170; }
  80% {
    font-variation-settings: "wght" 469, "wdth" 200; }
  100% {
    font-variation-settings: "wght" 469, "wdth" 200; } }
@keyframes voice-pauses {
  0% {
    font-variation-settings: "wght" 300, "wdth" 150; }
  5% {
    font-variation-settings: "wght" 600, "wdth" 170; }
  7% {
    font-variation-settings: "wght" 400, "wdth" 150; }
  10% {
    font-variation-settings: "wght" 900, "wdth" 200; }
  20% {
    font-variation-settings: "wght" 200, "wdth" 150; }
  40% {
    font-variation-settings: "wght" 200, "wdth" 150; }
  45% {
    font-variation-settings: "wght" 100, "wdth" 50; }
  50% {
    font-variation-settings: "wght" 300, "wdth" 170; }
  55% {
    font-variation-settings: "wght" 300, "wdth" 150; }
  60% {
    font-variation-settings: "wght" 300, "wdth" 150; }
  100% {
    font-variation-settings: "wght" 300, "wdth" 150; } }
@keyframes voice-moreliteral {
  0% {
    font-variation-settings: "wght" 469, "wdth" 200; }
  5% {
    font-variation-settings: "wght" 600, "wdth" 170; }
  7% {
    font-variation-settings: "wght" 400, "wdth" 150; }
  10% {
    font-variation-settings: "wght" 900, "wdth" 200; }
  20% {
    font-variation-settings: "wght" 200, "wdth" 150; }
  40% {
    font-variation-settings: "wght" 200, "wdth" 150; }
  45% {
    font-variation-settings: "wght" 100, "wdth" 50; }
  50% {
    font-variation-settings: "wght" 300, "wdth" 170; }
  55% {
    font-variation-settings: "wght" 469, "wdth" 200; }
  100% {
    font-variation-settings: "wght" 469, "wdth" 200; } }
@keyframes linearmot {
  0% {
    font-variation-settings: "wght" 469, "wdth" 200; }
  30% {
    font-variation-settings: "wght" 900, "wdth" 200; }
  70% {
    font-variation-settings: "wght" 100, "wdth" 50; }
  95% {
    font-variation-settings: "wght" 469, "wdth" 200; }
  100% {
    font-variation-settings: "wght" 469, "wdth" 200; } }
@keyframes voice-simple {
  0% {
    font-variation-settings: "wght" 300, "wdth" 150; }
  40% {
    font-variation-settings: "wght" 900, "wdth" 200; }
  80% {
    font-variation-settings: "wght" 100, "wdth" 50; }
  90% {
    font-variation-settings: "wght" 100, "wdth" 200; }
  100% {
    font-variation-settings: "wght" 300, "wdth" 150; } }
@keyframes voice-simple2 {
  0% {
    font-variation-settings: "wght" 300, "wdth" 150; }
  50% {
    font-variation-settings: "wght" 900, "wdth" 200; }
  85% {
    font-variation-settings: "wght" 100, "wdth" 50; }
  90% {
    font-variation-settings: "wght" 100, "wdth" 200; }
  100% {
    font-variation-settings: "wght" 300, "wdth" 150; } }
@keyframes voice-simple3 {
  0% {
    font-variation-settings: "wght" 300, "wdth" 150; }
  40% {
    font-variation-settings: "wght" 900, "wdth" 200; }
  80% {
    font-variation-settings: "wght" 100, "wdth" 50; }
  90% {
    font-variation-settings: "wght" 100, "wdth" 200; }
  100% {
    font-variation-settings: "wght" 300, "wdth" 150; } }
@keyframes woop-woop {
  0% {
    font-variation-settings: "wght" 300, "wdth" 150; }
  25% {
    font-variation-settings: "wght" 700, "wdth" 200; }
  50% {
    font-variation-settings: "wght" 400, "wdth" 100; }
  100% {
    font-variation-settings: "wght" 100, "wdth" 50; } }
@keyframes bounce {
  0% {
    font-variation-settings: "wght" 100, "wdth" 50; }
  100% {
    font-variation-settings: "wght" 900, "wdth" 200; } }
  .typetool #layouts {
    width: 900px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 20px;
    display: none; }
    .typetool #layouts img {
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain; }
    .typetool #layouts h2 {
      position: absolute; }

body.options-open .typetool nav .close {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex; }
body.options-open .typetool nav .options {
  display: none; }
body.options-open .typetool main {
  width: -webkit-calc(100% - var(--optionsWidth));
  width: -moz-calc(100% - var(--optionsWidth));
  width: calc(100% - var(--optionsWidth));
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }
  @media (min-width: 1700px) {
    body.options-open .typetool main {
      width: -webkit-calc(100vw - var(--optionsWidth) - -webkit-calc((100vw - 1700px) / 2) );
      width: -webkit-calc(100vw - var(--optionsWidth) - -moz-calc((100vw - 1700px) / 2) );
      width: -webkit-calc(100vw - var(--optionsWidth) - calc((100vw - 1700px) / 2) );
      width: -moz-calc(100vw - var(--optionsWidth) - -webkit-calc((100vw - 1700px) / 2) );
      width: -moz-calc(100vw - var(--optionsWidth) - -moz-calc((100vw - 1700px) / 2) );
      width: -moz-calc(100vw - var(--optionsWidth) - calc((100vw - 1700px) / 2) );
      width: calc(100vw - var(--optionsWidth) - calc((100vw - 1700px) / 2) ); } }
body.options-open .typetool #options {
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }
body.wc-logo #options .font-size,
body.wc-logo #options .text-align,
body.wc-logo #options .text-options {
  display: none; }
body.wc-other #options .tagline-check,
body.wc-other #options .font-size,
body.wc-other #options .text-align {
  display: none; }
body.wc-other #tagline {
  display: none; }
body.wc-text #options .tagline-check {
  display: none; }
body.wc-text #tagline {
  display: none; }

.with_colors {
  max-width: 1400px;
  margin: 50px auto 150px; }
  .with_colors .header {
    padding: 20px; }
  .with_colors .color_grid,
  .with_colors .gray_grid {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 0; }
    @media (max-width: 768px) {
      .with_colors .color_grid,
      .with_colors .gray_grid {
        width: 100%; } }
  .with_colors .color_grid {
    margin-bottom: 50px; }
    .with_colors .color_grid .color {
      margin: 20px;
      min-width: 250px;
      flex: 1 1 25%;
      border-radius: 2px;
      box-shadow: 0 2px 3px var(--lightgray); }
      .with_colors .color_grid .color:hover {
        transform: scale(1.02); }
  .with_colors .gray_grid {
    margin: 20px auto;
    border-radius: 2px;
    box-shadow: 0 2px 3px var(--lightgray); }
    .with_colors .gray_grid .color {
      margin: 0;
      min-width: unset;
      flex: 1 1 10%; }
      .with_colors .gray_grid .color:hover {
        flex: 1 1 12%; }
  .with_colors .color {
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
    list-style: none;
    cursor: pointer; }
    @media (max-width: 768px) {
      .with_colors .color {
        height: 150px; } }
    .with_colors .color h3 {
      margin-bottom: 0; }
    .with_colors .color h4 {
      font-weight: 400;
      user-select: text;
      cursor: pointer; }
    .with_colors .color.white {
      background-color: #ffffff; }
    .with_colors .color.gray-1 {
      background-color: #EFF2F2; }
    .with_colors .color.gray-2 {
      background-color: #D4DCE2; }
    .with_colors .color.gray-3 {
      background-color: #A4B0B6; }
    .with_colors .color.gray-4 {
      background-color: #7C868E; }
    .with_colors .color.gray-5 {
      background-color: #59636B; }
    .with_colors .color.gray-6 {
      background-color: #3F4A51; }
    .with_colors .color.dark {
      background-color: #2c2c2c; }
    .with_colors .color.pink {
      background-color: #f9b7c3; }
    .with_colors .color.yellow {
      background-color: #fcd381; }
    .with_colors .color.orange {
      background-color: #f69b83; }
    .with_colors .color.green {
      background-color: #299b85; }
    .with_colors .color.blue {
      background-color: #0075cc; }
    .with_colors .color.purple {
      background-color: #6a51b7; }
    .with_colors .color.blue h3,
    .with_colors .color.blue h4, .with_colors .color.dark h3,
    .with_colors .color.dark h4, .with_colors .color.gray-4 h3,
    .with_colors .color.gray-4 h4, .with_colors .color.gray-5 h3,
    .with_colors .color.gray-5 h4, .with_colors .color.gray-6 h3,
    .with_colors .color.gray-6 h4, .with_colors .color.green h3,
    .with_colors .color.green h4, .with_colors .color.purple h3,
    .with_colors .color.purple h4 {
      color: white; }
    .with_colors .color.copied {
      position: relative; }
      .with_colors .color.copied :after {
        content: 'Copied!';
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 40px;
        background-color: #2c2c2c;
        border-radius: 3px;
        box-shadow: 0 2px 2px var(--darkgray);
        color: white;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: 'Work Sans', 'Helvetica', sans-serif;
        line-height: 2.8;
        opacity: 0;
        animation: opacity0_1_0 1s cubic-bezier(0.77, 0, 0.175, 1) forwards; }

@keyframes opacity0_1_0 {
  0% {
    opacity: 0; }
  25% {
    opacity: 1; }
  75% {
    opacity: 1; }
  100% {
    opacity: 0; } }