:root {
  --font: "Open Sans", sans-serif;
  --heading: "Noto Sans", sans-serif;
  --text: #4f5d75;
  --heading-color: #2d3142;
  --bg: #fafbff;
  --white: #fff;
  --purple: #240973;
  --link: #3772fe;
  --container: 1170px;
  --header: 90px;
}

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

html { font-size: 16px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; transition: color .3s ease; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--heading);
  color: var(--heading-color);
  font-weight: 400;
  line-height: 1.2;
  margin: 20px 0;
}

.container {
  width: min(100% - 30px, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -40px;
  background: var(--purple);
  color: #fff;
  padding: 8px 12px;
  z-index: 10000;
}
.skip-link:focus { top: 8px; }