@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap');

html { 
  font-size: 80%; 
}
@media (min-width: 498px) {
  html {
    font-size: 90%;
  }
}
@media (min-width: 798px) {
  html {
    font-size: 100%;
  }
}

:root {
  --text-size:      1rem;
  --scale:          1.25;

  --h6:             var(--text-size);
  --h5:             calc(var(--text-size)*var(--scale));
  --h4:             calc(var(--h5)*var(--scale));
  --h3:             calc(var(--h4)*var(--scale));
  --h2:             calc(var(--h3)*var(--scale));
  --h1:             calc(var(--h2)*var(--scale));
}

body {
  font-size: var(--text-size);
  font-family: Arial, Helvetica, sans-serif;
  font-family: "Playpen Sans", Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

h1, .h1, 
h2, .h2, 
h3, .h3, 
h4, .h4, 
h5, .h5, 
h6, .h6 {
  line-height: 1.2;
  color: var(--secondary-color);
}

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

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

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

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

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

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

.text-size {
  font-size: var(--text-size);
}

.large-text-size {
  font-size: var(--h5);
}

.bold {
  font-weight: bold;
}