@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

:root {

  /* Colors */

  --grey-lighter: #ffffff;
  --grey-light: #f2f2f2;
  --grey-mid: #b3b3b3;
  --grey: #979797;
  --grey-dark: #333333;
  --red: #f93941;
  --green: #5c9256;
  --blue: #3a7fc9;

  --money-score-green: #5d9158;
  --fish-blue: #3a7fc9;
  --values-mapping-red: #f93941;

  --worth: #04b8ef;
  --talk: #f6931d;
  --change: #a39ecf;

  --huge-font-size: 48px;
  --large-font-size: 32px;
  --medium-font-size: 24px;
  --normal-font-size: 18px;
  --small-font-size: 13px;
  --tiny-font-size: 11px;

  --se-accent: var(--red);
}

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
  background: var(--grey-light);
  color: var(--grey-dark);
}

p, a, span, button, li {
  font-family: 'Lexend', sans-serif;
}

p, li {
  font-weight: 400;
  font-size: var(--normal-font-size);
  line-height: 1.4em;
}

ul, li {
  padding-left: 0;
  margin-left: 0;
}

li {
  margin-left: 16px;
}

button {
  font-weight: 400;
  font-size: var(--normal-font-size);
  color: inherit;
}

a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  padding: 0;
  margin: 1em 0 0.8em 0;
  text-align: left;
  font-family: 'Lexend', sans-serif;
  font-weight: 500;
  line-height: 1.4em;
}

h1, h2 {
  font-size: var(--large-font-size);
}

h3, h4 {
  font-size: var(--medium-font-size);
}

h5, h6 {
  font-size: var(--normal-font-size);
}

h1:first-child, 
h2:first-child, 
h3:first-child, 
h4:first-child, 
h5:first-child, 
h6:first-child,
p:first-child {
  padding-top: 0;
  margin-top: 0;
}

h1 + h2,
h1 + h3,
h1 + h4,
h1 + h5,
h1 + h6 {
  margin-top: 0;
}

h2 + h3,
h2 + h4, 
h2 + h5,
h2 + h6 {
  margin-top: 0;
}

h4 + h1 {
  margin-top: 0;
}

h1:has(+ h2),
h1:has(+ h2),
h1:has(+ h3),
h2:has(+ h2),
h2:has(+ h2),
h2:has(+ h3),
h4:has(+ h1) {
  margin-bottom: 0;
}

p + h2,
p + h3,
p + h4 {
  margin-top: 2em;
}

::selection {
  background: var(--red);
  color: white;
}

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

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

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