:root {
  --text-primary: #09103F;
  --text-secondary: #747479;
  --text-action: #1E56DA;
  --text-negative: #E03A07;
  --text-disabled: #ACB8FB;
  --text-primary-inverse: #FFFFFF;
  --icon-primary: #09103F;
  --border-primary: #9D9DA1;
  --border-secondary: #DFDFE1;
  --border-action: #1E56DA;
  --border-disabled: #ACB8FB;
  --surface-disabled: #E7EAFE;
  --surface-action: #1E56DA;
  --surface-action-dark: #0F348B;
  --surface-action-light: #E7EAFE;
  --surface-page: #F0F3F7;
  --surface-primary: #FFF;
  --surface-secondary: #D8E0EB;
  --surface-tertiary: #F0F3F7;
  --surface-mono-selected: #9D9DA1;
}

/*Global resets*/
html {
  box-sizing: border-box;
}

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

html, body {
  height: 100%;
}

/*Custom scrollbars*/
body ::-webkit-scrollbar {
  width: 14px;
}

body ::-webkit-scrollbar-track {
  background-color: transparent;
}

body ::-webkit-scrollbar-thumb {
  background-color: var(--surface-mono-selected);
  border: 4px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
  min-height: 100px;
}

/*App styles*/
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Rubik', sans-serif;

  background-color: var(--surface-page);
}

.app {
  position: relative;
  padding: 16px;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.app > .ytree-logo {
  margin-bottom: 25px;
}

@media screen and (min-width: 1024px) {
  .app {
    padding: 40px;
  }
}