@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  list-style: none;
}

img {
  max-width: 100%;
}

:root {
  --color-brand-1: #6741D9;
  --color-brand-2: #5F3DC4;
  --color-grey-1:  #212529;
  --color-grey-2:  #343a40;
  --color-grey-3:  #dee2e6;
  --color-grey-4:  #e9ecef;
  --color-grey-5:  #f1f3f5;
  --color-grey-6:  #ffffff;
  --radius-default: 0.5rem;

  --title-1: 3rem;
  --title-2: 2.5rem;
  --title-3: 2rem;
  --title-4: 1.375rem;
  --title-5: 1.125rem;

  --text-1:  1.125rem;
  --text-2:  1rem;
  --text-3:  0.875rem;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--color-grey-5);
}

.container {
  width: 76rem;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media(max-width: 991px){
  :root {
    --title-1: calc(3rem / 1.2);
    --title-2: calc(2.5rem / 1.2);
    --title-3: calc(2rem / 1.2);
    --text-1:  calc(1.125rem / 1.2);
  }
}