:root {
   --c-white: #ffffff;
   --c-app-bg: #f5f5f5;
   --c-black: #181818;
   --c-text-light-1: #59606a;
   --c-text-light-2: #353a40;
   --c-text-dark-1: var(--c-white);
   --c-text-dark-2: #ebebeba3;
}
@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-VariableItalic.woff2") format("woff2"),
      url("/fonts/Satoshi-VariableItalic.woff") format("woff"),
      url("/fonts/Satoshi-VariableItalic.ttf") format("truetype");
   font-weight: 300 900;
   font-display: swap;
   font-style: italic;
}

@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-Light.woff2") format("woff2");
   font-weight: 300;
   font-display: swap;
   font-style: normal;
}

@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-LightItalic.woff2") format("woff2");
   font-weight: 300;
   font-display: swap;
   font-style: italic;
}

@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-Regular.woff2") format("woff2");
   font-weight: 400;
   font-display: swap;
   font-style: normal;
}

@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-Italic.woff2") format("woff2");
   font-weight: 400;
   font-display: swap;
   font-style: italic;
}

@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-Medium.woff2") format("woff2");
   font-weight: 500;
   font-display: swap;
   font-style: normal;
}

@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-MediumItalic.woff2") format("woff2");
   font-weight: 500;
   font-display: swap;
   font-style: italic;
}

@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-Bold.woff2") format("woff2");
   font-weight: 700;
   font-display: swap;
   font-style: normal;
}

@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-BoldItalic.woff2") format("woff2");
   font-weight: 700;
   font-display: swap;
   font-style: italic;
}

@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-Black.woff2") format("woff2");
   font-weight: 900;
   font-display: swap;
   font-style: normal;
}

@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-BlackItalic.woff2") format("woff2");
   font-weight: 900;
   font-display: swap;
   font-style: italic;
}
@font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi-Variable.woff2") format("woff2");
   font-weight: 300 900;
   font-display: swap;
   font-style: normal;
}

:root {
   --color-background: var(--c-app-bg);
   --color-text: var(--c-text-light-1);
}

html {
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
}

button,
input,
optgroup,
select,
textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
}

/**
 * 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;
}

/**
 * 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;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
}

template {
   display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
   display: none;
}

/* Custom styles */
*,
*::before,
*::after {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}
a {
   text-decoration: none;
   color: inherit;
}

a:visited {
   color: inherit;
}

html {
   overflow: hidden;
   height: 100%;
}

body {
   min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
   line-height: 1.5;
   font-size: 16px;
   -webkit-tap-highlight-color: transparent;
   padding: 0;
   margin: 0;
   overflow-x: hidden;
   overflow-y: auto;
   height: 100%;
   display: flex;
}
body,
input,
textarea,
* {
   letter-spacing: -0.025em;
   box-sizing: border-box;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: "Satoshi", sans-serif;
}

input:not(:disabled):-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset;
}

.app-container {
   top: 0;
   height: max-content;
   transition: all 0.5s ease;
   width: 100vw;
}
.app-container.mobile-margin {
   margin-left: calc(100vw - 100px);
}
.app-container.margin-desktop {
   margin-left: 282px;
   width: calc(100vw - 282px);
}
.app-container.margin-shrink {
   margin-left: 73px;
   width: calc(100vw - 73px);
}
.app-container > div[id*="single-spa-application:"]:not(:has(*)) {
   display: none;
}
.app-container > div[id*="single-spa-application:"]:has(*) {
   /*flex-grow: 10;*/
   width: 100%;
}
#navigation-container {
   top: 0;
   position: sticky;
   z-index: 3;
}
#navbar-container {
   width: 100%;
}
@media screen and (max-width: 640px) {
   #navbar-container {
      width: 100%;
      top: 0;
      position: sticky;
      background-color: rgba(255, 255, 255, 0.9);
      filter: blur(0.5px);
      z-index: 4;
   }
}

@media screen and (max-width: 768px) {
   input,
   .button-wrapper > button {
      font-size: 16px !important;
   }
}

#canvas-wrapper {
   width: 100vw;
   height: 100vh;
   position: absolute;
   align-items: center;
   z-index: 9999998;
   justify-content: center;
   background-color: #ffffffcf;
}

@media screen and (max-width: 768px) {
   #ruut-canvas {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 9999999;
      transform: translate(-50%, -50%);
      background: transparent;
   }
}
@media screen and (min-width: 768px) {
   #ruut-canvas {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 9999999;
      transform: translate(-50%, -50%);
      background: transparent;
   }
}