:root {
  --bg: #F4F5F3;
  --surface: #FFFFFF;

  --text: #171A1C;
  --muted: #687078;

  --border: #D8DDDF;

  --blue: #3155F5;
  --blue-dark: #2748DB;

  --success: #238457;
  --error: #C83D3D;

  --radius: 4px;

  --container: 1180px;
}

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

html {
  min-height: 100%;

  background: var(--bg);

  color: var(--text);

  font-family:
    Manrope,
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;

  margin: 0;

  background: var(--bg);

  color: var(--text);
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;

  text-decoration: none;
}

img {
  display: block;

  max-width: 100%;
}

.container {
  width: min(
    calc(100% - 40px),
    var(--container)
  );

  margin-inline: auto;
}

@media (max-width: 640px) {
  .container {
    width: min(
      calc(100% - 28px),
      var(--container)
    );
  }
}