/* DESIGN SETTINGS
--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px):
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights:
Default: 400
Medium: 500
Semi-Bold:600
Bold:700

- Line heights:
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6
Large: 1.8

- Letter spacing:
-0.5px
0.75px

--- 02 COLORS

-Primary
#e67e22

-Tints:
#fdf2e9
#fae5d3
#f8d8bd
#eb984e

-Shades:
#cf711f
#45260a

-Accents:

-Greys:
#555
#333
#6f6f6f (lighest grey allowed on #fdf2e9)
#767676 (lighest grey allowed on white)

--- 05 SHADOWS
Meal Card: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075),
    -1.2rem 0 2.4rem rgba(0, 0, 0, 0.02), 1.2rem 0 2.4rem rgba(0, 0, 0, 0.02);

--- 06 BORDER-RADIUS
Default: 9px
Meal Card: 11px;

--- 07 WHITESPACE

Spacing System (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

/* **************************************** */
/* RESET */

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

html {
  /*
  1rem -> 10px. By default this value is defined by each browser, and usually it is 16px
  font-size: 10px; -> This is not correct to do, because there are users that might have to increase the default value from 16px to something bigger,
                      and this way we are not allowing them, we are having a static value of 10px
  Instead:
  10px / 16px = 0.625 = 62.5% 
  */

  font-size: 62.5%;

  /* In the media queries, if we use propertys with rem, we then have only to change html font-size, instead of all the properties */

  /* Only works if there is nothing positioned absolutely in the body */
  overflow-x: hidden;
  /*scroll-behavior: smooth;*/ /*Works only on chrome and firefox */
}

body {
  font-family: "Inter", "Arial", sans-serif;
  background-color: #191A32;
  line-height: 1;
  font-weight: 300;
  color: white;
  overflow-x: hidden;
}

*:focus {
  outline: none;
}
/* **************************************** */

/* **************************************** */
/* GENERAL COMPONENTS */
.container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}

.grid {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 9.6rem;
}

.align-center {
  align-items: center;
}

.grid-2--cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3--cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4--cols {
  grid-template-columns: repeat(4, 1fr);
}

.grid-5--cols {
  grid-template-columns: repeat(5, 1fr);
}

.heading-primary,
.heading-secondary,
.heading-tertiary {
  font-family: "Graphik", "Arial", sans-serif;
  font-weight: 700;
  color: white;
  letter-spacing: -0.5px;
}

.heading-primary {
  font-size: 5.2rem;
  line-height: 1.05;
  margin-bottom: 3.2rem;
}

.heading-secondary {
  font-size: 4.4rem;
  line-height: 1.2;
  margin-bottom: 9.6rem;
}

.heading-tertiary {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 3.2rem;
}
.sub-heading {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #cf711f;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  letter-spacing: 0.75px;
}

.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  font-family: "Nunito Sans", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  padding: 1.6rem 3.2rem;
  border-radius: 9px;
  text-decoration: none;
  transition: all 0.3s;

  border: none;
  cursor: pointer;
}

.btn--full:link,
.btn--full:visited {
  background-color: #5454D4;
  color: #fff;
}
.btn--full:hover,
.btn--full:active {
  background-color: #3F3FD3;
}

.btn--outline:link,
.btn--outline:visited {
  background-color: #fff;
  color: #555;
}
.btn--outline:hover,
.btn--outline:active {
  background-color: #fdf2e9;

  /* border: 3px solid #fff; */ /*This moves the entire layout */
  box-shadow: inset 0 0 0 3px #fff; /*last value is scaling. This way, we have a border without moving the entire layout*/
}

.link:link,
.link:visited {
  display: inline-block;

  text-decoration: none;
  color: #3F3FD3;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.3rem;
  transition: all 0.3s;
}
.link:hover,
.link:active {
  color: #3F3FD3;
  border-bottom: 1px solid transparent;
}

.list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.list-item {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  line-height: 1.2;
}

.list-icon {
  width: 3rem;
  height: 3rem;
  color: #e67e22;
}

/* SETTINGS CLASSES */
.margin-right-sm {
  margin-right: 1.6rem !important;
}

.margin-bottom-md {
  margin-bottom: 4.8rem !important;
}

.margin-bottom-xxl {
  margin-bottom: 9.6rem !important;
}

.margin-top-md {
  margin-top: 4.8rem !important;
}

.text-center {
  text-align: center;
}

strong {
  font-weight: 500;
}

/* **************************************** */