:root {  
  --text: #0f0f0f;
  --background: #f5f9ff;
  --background-alt: #d1d4d9;
  --background-accent: #efefef;
}

*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Ysabeau Office';
  font-weight: 400;
  background-color: var(--background);
  color: var(--text);
  width: 100vw;
  overflow-x: hidden;
}

body a {
  color: var(--text);
}

h1, h2, h3, h4, h5 {
  font-family: 'Ysabeau Office';
  font-weight: 700;
}

button {
  font-family: 'Ysabeau Office';
}

html {font-size: 100%;} /* 16px */

h1 {font-size: 4.5rem;}

h2 {font-size: 3.997rem; /* 64px */}

h3 {font-size: 2.827rem; /* 45.28px */}

h4 {font-size: 1.999rem; /* 32px */}

h5 {font-size: 1.414rem; /* 22.56px */}

small {font-size: 0.707rem; /* 11.36px */}

p {font-size: 1.25rem;}

span.highlight {
  font-weight: bold;
  font-size: 1.5rem;
}

span.break-word {
  overflow-wrap: anywhere;
  display: inline-block;
  width: 100%;
}

.title__section {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 9rem;
}

.title__section h1 {
  padding-bottom: 2rem;
  text-align: center;
  display: inline-block;
  overflow-wrap: anywhere;
}

.title__section a {
  margin-top: 3rem;
}

.paragraph-padding {
  padding: 0 4ch;
}