/* 

--- LOGO: from Canva.com; Font used: Gagalin (Template used: Katrina Catering)

--- 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
             
- Letter spacing
-0.5px
0.75px

--- 02 COLORS
 Primary: #f5af0c;
 Background-Color: #2e302f;

 Black Background: #2c342C;

 - Primary Color Tints:

 #f6b724
 #f7bf3d
 #f8c755
 #f9cf6d
 #fad786
 #fbdf9e
 #fce7b6
 #fdefce
 #fef7e7

 - Primary Color Shades:

 #dd9e0b
 #c48c0a
 #ac7a08
 #936907
 #7b5806
 #493404
 #312302

- Background Color Tints:

#434544
#585959
#6d6e6d
#828382
#979897
#abacac
#c0c1c1
#d5d6d5
#eaeaea

-Background Color Shades:

#292b2a
#252626
#202221
#1c1d1c
#171818
#121313
#0e0e0e
#090a09
#050505


 - Accents:
- Greys: 

--- 03 IMAGES

-- https://unsplash.com/


--- 04 HEADSHOTS 

Free avatars only now below: 

-- https://www.uifaces.co/



--- 05 SHADOWS
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 28 / 32 / 48 / 64 / 80 / 96 / 128


*/

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

html {
  /* font-size: 10px; */
  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font size setting */
  /* font size of our webpage is 62.5% of the user's browser font size */
  font-size: 62.5%;
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  /* color: #555; */

  background-color: #2e302f;

  /* ONLY WORKS if there's nothing absolutely positioned in relation to body element */
  /* All elements that overflow the viewport horizontally, will be hidden */
  /* If setting below in body doesn't work, type the same line in 'html' element as well and it should work */
  overflow-x: hidden;
}

/* ************************ */
/* GENERAL REUSABLE COMPONENTS */
/* ************************ */

.container {
  /* 1140px */
  max-width: 120rem;
  /* Make sure content doesn't glue to side when shrinked viewport */
  padding: 0 3.2rem;
  /* Make sure container is centered in viewport */
  margin: 0 auto;
}

/* Reusable Generic Grid  */
.grid {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 9.6rem;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
  /* 1fr 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);
}

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

.grid--center-h {
  justify-items: center;
}

/* Make heading formats uniform across the page */
.heading-primary,
.heading-secondary,
/* .heading-tertiary, */
.heading-tertiary-sm,
.heading-tertiary-smaller {
  font-weight: 700;
  color: #f5af0c;
  /* letter-spacing: -0.5px; */
  /* OK to use px for small lengths */
}

.heading-primary {
  font-size: 6.4rem;
  line-height: 1.05;
  /* margin-bottom: 3.2rem; */
  /* margin-top: 4.8rem; */
  text-shadow: 2px 4px 4px #312302;
  /* transform: translate(-20%, -180%); */
  letter-spacing: 0.5px;
  /* background-color: #e8590c; */
}

.heading-secondary {
  font-size: 4rem;
  line-height: 1.2;
  margin-bottom: 9.6rem;
  text-shadow: 2px 1px 5px #2c342c;
  /* Make sure the heading stands out nicely, above spacing is needed */
}

/* .heading-tertiary {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 3.2rem;
} */

.heading-tertiary-sm {
  font-size: 2.6rem;
  line-height: 1.2;
  margin-bottom: 2.4rem;
}

.heading-tertiary-smaller {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1.6rem;
  color: #c48c0a;
  letter-spacing: 0.75px;
}

/* span element, change it to 'block' display */
.subheading {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #ed561e;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  letter-spacing: 0.75px;
}

/* for anchor elements -- btn--cta, btn--more & btn--recipe  */
.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  font-weight: 600;
  font-size: 2rem;
  text-decoration: none;
  border-radius: 9px;
  /* For btn, use padding left/right double space than left/right */
  padding: 1.6rem 3.2rem;
  /* box-shadow: 0 0 0 3px #eee; */

  transition: all 300ms;
}

/* more btn */
.btn--more:link,
.btn--more:visited {
  background-color: #fff;
  color: #555;
}

.btn--more:hover,
.btn--more:active {
  background-color: #eee;
}

/* sign up btn for CTA form */
.btn--cta--order {
  background-color: #f5af0c;
  color: #2e302f;
  /* Align at the bottom */
  align-self: end;
  padding: 1.2rem;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

/* transition is already set in .btn class, so no need transition here for btn--form */
.btn--cta--order:hover {
  background-color: #936907;
  color: #fef7e7;
}

/* all link anchors */
.link:link,
.link:visited {
  display: inline-block;
  color: #e8590c;
  text-decoration: none;

  /* Use border-bottom as better underline */
  /* Nice trick: use currentColor for border so it has the same color as text color */
  border-bottom: 1px solid currentColor;

  padding-bottom: 2px;
  transition: all 300ms;
}

.link:hover,
.link:active {
  color: #ba470a;
  border-bottom: 1px solid transparent;
  /* Even if border-bottom isn't set here, border will change color along with text color (as currentColor was set) */
  /* When setting border-bottom, don't set it to 'none', mess up screen, set the same border with 'transparent' color for it to disappear */
}

/* Focus is just a state like 'link','hover',etc. */
/* Here we are selecting focus on all webpage elements */
*:focus {
  outline: none;
  box-shadow: 0 0 0 0.4rem rgba(236, 100, 26, 0.463);
}

/* **********HELPER CLASSES************ */

/* Helper Class for CTA button (orange button) */
/* Good way to use specifically for a single element to add specialized format*/

.margin-right-sm {
  margin-right: 1.6rem !important;
  /* add important to make sure the property will be used over other conflicting properties! */
}

/* Reduced margin bottom for headings */
.margin-bottom-rd {
  margin-bottom: 4.8rem !important;
}

.margin-bottom-hi {
  margin-bottom: 10.8rem !important;
}

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

.margin-bottom-himd {
  margin-bottom: 7.2rem !important;
}

.margin-bottom-low {
  margin-bottom: 2.4rem !important;
}

.margin-bottom-none {
  margin-bottom: 0 !important;
}

.row-gap-more {
  row-gap: 12rem;
}

/* Change/overwrite font color of headings */
.font-color-white {
  color: #fff !important;
}

.letter-spacing {
  letter-spacing: 0.14px !important;
}

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

.font-color-white {
  color: #fff;
}

/* ///////////////////////////////////////// */
/* FOR REFERENCE: FADE IN ANIMATIONS */
/* NOTE: ONLY WORKS For when page loads, so only the animation that's present in the viewport during page load can be seen  */
/* NOTE: In this project, below is not used anymore */

/* Fade in from left */
/* .fadeInLeft {
  -webkit-animation: fadeInLeft 1.2s both;
  -moz-animation: fadeInLeft 1.2s both;
  -ms-animation: fadeInLeft 1.2s both;
  -o-animation: fadeInLeft 1.2s both;
  animation: fadeInLeft 1.2s both;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}

@-ms-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -ms-transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -ms-transform: translateX(0);
  }
}

@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
} */

/* Fade in from right */
/* .fadeInRight {
  -webkit-animation: fadeInRight 1.2s both;
  -moz-animation: fadeInRight 1.2s both;
  -ms-animation: fadeInRight 1.2s both;
  -o-animation: fadeInRight 1.2s both;
  animation: fadeInRight 1.2s both;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(50px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}

@-ms-keyframes fadeInRight {
  0% {
    opacity: 0;
    -ms-transform: translateX(50px);
  }
  100% {
    opacity: 1;
    -ms-transform: translateX(0);
  }
}

@-o-keyframes fadeInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(50px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
} */

/* Fade in from top */
/* .fadeInTop {
  -webkit-animation: fadeInTop 1.2s both;
  -moz-animation: fadeInTop 1.2s both;
  -ms-animation: fadeInTop 1.2s both;
  -o-animation: fadeInTop 1.2s both;
  animation: fadeInTop 1.2s both;
}

@-webkit-keyframes fadeInTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInTop {
  0% {
    opacity: 0;
    -moz-transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-ms-keyframes fadeInTop {
  0% {
    opacity: 0;
    -ms-transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -ms-transform: translateY(0);
  }
}

@-o-keyframes fadeInTop {
  0% {
    opacity: 0;
    -o-transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
} */

/* Fade in from bottom */
/* .fadeInBottom {
  -webkit-animation: fadeInBottom 1.2s both;
  -moz-animation: fadeInBottom 1.2s both;
  -ms-animation: fadeInBottom 1.2s both;
  -o-animation: fadeInBottom 1.2s both;
  animation: fadeInBottom 1.2s both;
}

@-webkit-keyframes fadeInBottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInBottom {
  0% {
    opacity: 0;
    -moz-transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-ms-keyframes fadeInBottom {
  0% {
    opacity: 0;
    -ms-transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -ms-transform: translateY(0);
  }
}

@-o-keyframes fadeInBottom {
  0% {
    opacity: 0;
    -o-transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
} */

/* //////////////////////////////////////////////////////////////////////////////////  */
/* Animation: Fade In effect on scrolling, Use JS to control */
/* Upon scrolling, if any element of the 'fade-in-left/right/top/bottom' come into view, 'active' class is added to that element */
/* The element with both 'fade' and 'active' classes will transform and appear on page */

.fade-in-left {
  transform: translateX(-50px);
  opacity: 0.1;
  transition: 1.2s all ease;
}

.fade-in-left.active {
  transform: translateX(0);
  opacity: 1;
}

.fade-in-right {
  transform: translateX(50px);
  opacity: 0.1;
  transition: 1.2s all ease;
}

.fade-in-right.active {
  transform: translateX(0);
  opacity: 1;
}

.fade-in-top {
  transform: translateY(-50px);
  opacity: 0.1;
  transition: 1.2s all ease;
}

.fade-in-top.active {
  transform: translateY(0);
  opacity: 1;
}

.fade-in-bottom {
  transform: translateY(50px);
  opacity: 0.1;
  transition: 1.2s all ease;
}

.fade-in-bottom.active {
  transform: translateY(0);
  opacity: 1;
}

/* No direction, just fade in */
.fade-in {
  opacity: 0.1;
  transition: 2.5s all ease;
}

.fade-in.active {
  opacity: 1;
}