:root {
  --primary: #0a665d;
  --primary-hover: #084f48;
  --accent: #3ec1aa;
  --secondary: #3b405d;
  --supporting-blue: #25526e;
  --slate: #5b6278;
  --background: #f7f8f5;
  --white: #fff;
  --dark-text: #172a2a;
  --border: #e5e7eb;
  --mint: #eff9f7;
  --shadow: 0 10px 28px rgba(23, 42, 42, .08);
  --radius: 16px;
}

body {
  color: var(--dark-text);
  font-family: Lexend, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

body h1,
body h2,
body h3,
body h4 {
  font-family: Fredoka, Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dark-text);
}

body p,
body li {
  overflow-wrap: break-word;
}

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

body a:hover {
  color: var(--primary-hover);
}

body :focus-visible {
  outline: 3px solid var(--supporting-blue);
  outline-offset: 3px;
}