/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Poppins:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 2.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(140, 40%, 48%);
  --first-color-alt: hsl(140, 40%, 44%);
  --title-color: hsl(140, 4%, 12%);
  --text-color: hsl(140, 4%, 40%);
  --text-color-light: hsl(140, 4%, 64%);
  --white-color: hsl(0, 0%, 100%);
  --body-color: hsl(0, 0%, 100%);
  --container-color: hsl(0, 0%, 95%);
  --shadow-img: drop-shadow(0 8px 12px hsla(0, 0%, 0%, .2));
  --filter-img: invert(1);
  --first-gradient: linear-gradient(90deg,
  hsl(140, 40%, 44%) 0%,
  hsl(139, 14%, 53%) 100%);
  --second-gradient: linear-gradient(90deg,
  hsl(20, 72%, 57%) 0%,
  hsl(20, 78%, 80%) 100%);
  --third-gradient: linear-gradient(90deg,
  hsl(15, 70%, 40%) 0%,
  hsl(20, 62%, 60%) 100%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --second-font:  hsl(140, 40%, 48%);
  --biggest-font-size: 3rem;
  --big-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

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

html {
  scroll-behavior: smooth;
}

body,
input,
button {
  font-family: "Poppins", sans-serif;
  font-size: .938rem;
}

body {
  background-color: white;
  color: hsl(140, 4%, 40%);
  transition: background-color .4s;
}

input,
button {
  border: none;
  outline: none;
}

.button--outline{
background: transparent;
border: 2px solid #E7D9C7;
color: #E7D9C7;
}

.button--outline:hover{
background:  hsl(140, 40%, 48%);  
color: white;
}

h1, h2, h3, h4 {
  color:  hsl(140, 40%, 48%);
  font-weight: 500;
  line-height: 100%;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}