/* color palette from <https://github.com/vuejs/theme> */
:root {
  --mv-white: #ffffff;
  --mv-white-soft: #f8f8f8;
  --mv-white-mute: #f2f2f2;

  --mv-gray: #F2F2F0;
  --mv-strong-gray: #5e5e5ab2;

  --mv-black: #181818;
  --mv-black-soft: #222222;
  --mv-black-mute: #282828;

  --mv-light-purple: #D671D5;
  --mv-purple: #A471D6;
  --mv-light-green: #ace7e7;
  --mv-green: #71D5D6;
  --mv-light-brown: #d6a571;
  --mv-brown: #a18d6c;

  --mv-text-light-1: var(--mr-green);
  --mv-text-light-2: rgba(60, 60, 60, 0.66);
  --mv-text-dark-1: var(--mr-white);
  --mv-text-dark-2: rgba(235, 235, 235, 0.64);

  --header-height: 3.5rem;

  /*========== Font and typography ==========*/
  --body-font: 'PlusJakartaSans', sans-serif;
  --biggest-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;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-black: 900;

  /*========== Margenes Bottom ==========*/
  --mb-0-25: .25rem;
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;

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

/* semantic color variables for this project */
:root {
  --color-background: var(--mv-white);
  --color-background-soft: var(--mv-white-soft);
  --color-background-mute: var(--mv-white-mute);

  --color-border: var(--mv-green);
  --color-border-hover: var(--mv-light-green);

  --color-heading: var(--mv-text-light-1);
  --color-text: var(--mv-text-light-1);

  --section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--mv-black);
    --color-background-soft: var(--mv-black-soft);
    --color-background-mute: var(--mv-black-mute);

    --color-heading: var(--mv-text-dark-1);
    --color-text: var(--mv-text-dark-2);
  }
}

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

html {
  scroll-padding-top: 3.5rem;
  scroll-behavior: smooth;
}

body {
  margin: 0 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--mv-white);
  color: var(--mv-black);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

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

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

button {
  cursor: pointer;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

/*=============== REUSABLE CSS CLASSES ===============*/
.section{
  padding: 4.5rem 0 2rem;
}

.section__title{
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
  text-align: center;
}

/*=============== LAYOUT ===============*/
.container{
  max-width: 968px;
  padding-left: var(--mb-1-5);
  padding-right: var(--mb-1-5);
}

.grid{
  display: grid;
}

.main{
  overflow: hidden; /*For animation*/
}

/*=============== HEADER ===============*/

.show-scroll {
  bottom: 3rem;
}

.section__title{
  font-family: 'PlusJakartaSansBold';
}
 /*=============== KEYFRAMES ===============*/
 @keyframes floating {
  0% { transform: translate(0,  0px); }
  50%  { transform: translate(0, 15px); }
  100%   { transform: translate(0, -0px); }   
}


/*===============  BREAKPOINTS ===============*/
/* 
  @media screen and (max-width: 320px){

  }
  @media screen and (min-width: 576px){
  }
  @media screen and (min-width: 767px){

  }
  @media only screen and (min-width: 767px) and (max-width: 850px) {
 
  }
  @media screen and (min-width: 992px){
  
  }
  @media screen and (min-width: 1200px){
  } */