/* 
1. TYPOGRAPHY
FONT WEIGHT:
500

line height:
1.5


2. COLOR:

0%	    10%	    20%	    30%	    40%	    50%	    60%	    70%	    80%	    90%	    100%
#e67e22 #cf711f #b8651b #a15818 #8a4c14 #733f11 #5c320e #45260a #2e1907 #170d03 #000000
#e67e22 #e98b38 #eb984e #eea564 #f0b27a #f3bf91 #f5cba7 #f8d8bd #fae5d3 #fdf2e9 #ffffff

tint:
#fdf2e9
#fdf2ed
#f8d8bd
#fae5d3
#f5cba7
#f3bf91

shade:
#e67e22
#cf711f
#b8651b

grey: 
#333
#444
#555
#ccc
#ddd
#eee

others
#fff
#000
#bbbbbb
rgba(0, 128, 0, 0.6)

3.
4.
5.
6.
7. */

html {
  font-size: 62.5%;

  /* this property does not work on safari */
  /* scroll-behavior: smooth; */
}

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

*:link:active,
*:link:focus {
  box-shadow: 0 0 0 0.9rem #f3bf91;
}

body {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  color: #333;
  font-size: 1.8rem;
  overflow-x: hidden;
}

.container {
  max-width: 130rem;
  padding: 6rem 6rem;
  margin: 0 auto;
}

.heading-primary {
  font-size: 5.5rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.1rem;
}

.heading-secondary {
  font-size: 4.4rem;
  font-weight: 600;
  line-height: 0.9;
}

.heading-tertiary {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 0.9;
}

.subheading {
  color: #e67e22;
  text-transform: uppercase;
  font-size: 1.8rem;
  font-weight: 500;
}

a:link,
a:visited {
  display: inline-block;
  text-decoration: none;
  color: #333;
  transition: color 0.5s;
}

a:hover,
a:active {
  color: #e67e22;
}

.btn {
  font-size: 2rem;
  padding: 1rem 2rem;
  font-weight: 600;
  background-color: #e67e22;
  color: #fff;
  border: none;
  border-radius: 1rem;
  transition: background-color 3s;
}

.btn.btn--full {
  color: #fff;
  transition: background-color 0.5s;
}

.btn:hover {
  color: #fff;
  background-color: #b8651b;
}

.btn-white {
  color: #333;
  background-color: #fff;
  margin-left: 10px;
}

.btn-white:hover {
  background-color: #fae5d3;
  color: #333;
}

.omnifood-logo {
  width: 15rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

.grid--center-v {
  align-items: center;
  justify-items: center;
}

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

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

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

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

.margin-btm-large {
  margin-bottom: 8rem;
}

.margin-btm-med {
  margin-bottom: 4rem;
}

.margin-btm-sm {
  margin-bottom: 2rem;
}

.number {
  font-size: 8.6rem;
  font-weight: 600;
  color: #ccc;
}

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

.footer-heading {
  font-size: 1.8rem;
  font-weight: 520;
}

.icon {
  color: #e67e22;
  font-size: 2.4rem;
}

.recipes-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.line-through {
  text-decoration: line-through;
}

.feature-icon {
  color: #e67e22;
  font-size: 3rem;
}

.feature-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  background-color: #fdf2e9;
}

.logo-icon {
  font-size: 2.5rem;
  margin-right: 1rem;
}