@charset "utf-8";

@font-face {
  font-family: "Heebo-light";
  src: url("../fonts/Heebo-light.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins-regular";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
}

:root {
  --header-height: 80px;
  --footer-height: 60px;
  --color-white: #fff;
  --color-black: #000;
  --color-primary: #0061d5;
  --color-primary-light: #daebff;

  --color-title: #111;
  --color-text: #333;
  --color-text-base: #666;
  --color-text-light: #999;
  --color-text-dark: #202020;

  --color-bg: var(--color-white);
  --color-bg-page: #f4f4f4;
  --color-bg-dark: #393e4d;

  --color-border-input: #e6e7e9;
  --color-border-light: rgba(97, 104, 118, 0.16);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Heebo-light", sans-serif;
}

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

html,
body {
  height: 100%;
}

body {
  font-size: 14px;
  color: var(--color-text);
  font-family: "Poppins-regular", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

input,
button,
textarea,
select {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}