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

:root{
     --hue-color: 236;
     --first-color: hsl(var(--hue-color), 69%, 61%); /** Este es para el color general de la tarjeta de presentación;**/
     --first-color-second: hsl(var(--hue-color), 69%, 61%); /** Este es para el color general de la tarjeta de presentación;**/
     --first-color-alt: hsl(var(--hue-color), 57%, 53%);
     --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
     --title-color-second: hsl(var(--hue-color), 8%, 15%);
     --title-color: hsl(var(--hue-color), 8%, 15%);
     --text-color: hsl(var(--hue-color), 8%, 30%);
     --text-color-light: hsl(var(--hue-color), 8%, 65%);
     --input-color: hsl(var(--hue-color), 70%, 96%);
     --body-color-second: hsl(var(--hue-color), 31%, 98%);
     --body-color: hsl(var(--hue-color), 60%, 100%);
     --container-color: #fff;
     --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
     --scroll-thumb-color: hsl(var(--hue-color), 60%, 80%);

      /** font **/
    --body-font: 'Poppins', sans-serif;
    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-fonr-size: 1.25rem;
    --h3-fonr-size: 1.125rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem; 
    --font-medium: 500;
    --font-semi-bold: 600;

      /** 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;
      --mb-3: 3rem;
  
      /** z index **/
  
      --z-tooltip: 10;
      --z-fixed: 100;
      --z-modal: 1000;
}
/** Font size for Large devices **/
@media screen and (min-width: 968px) {
    :root{
        --big-font-size: 3rem;
        --h1-font-size: 2.25rem;
        --h2-fonr-size: 1.5rem;
        --h3-fonr-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem; 
    }
}

body.dark-theme{
    /** HSL color mode **/ 
    --first-color-second: hsl(var(--hue-color), 30%, 8%); /** Este es para el color general de la tarjeta de presentación;**/
    --title-color: hsl(var(--hue-color), 8%, 95%);
    --text-color: hsl(var(--hue-color), 8%, 80%);
    --input-color: hsl(var(--hue-color), 29%, 16%);
    --body-color: hsl(var(--hue-color), 28%, 12%);
    --body-color-second: hsl(var(--hue-color), 31%, 20%);
    --container-color: hsl(var(--hue-color), 29%, 16%);
    --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
    --scroll-thumb-color: hsl(var(--hue-color), 60%, 36%);
  }

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}

html{
    scroll-behavior: smooth;

}
h1, h2, h3, h4{
    color: var(--text-color);
    font-weight: var(--font-semi-bold);
}
ul{
    list-style: none;
}

a{
    text-decoration: none;
    --webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

img{
    max-width: 100%;
    height: auto;
}
table{
    font-size: 0.9em;
}
/*Scroll bar color*/
::-webkit-scrollbar{
    width: .60rem;
    background-color: var(--scroll-bar-color);
    border-radius: .5rem;
}
::-webkit-scrollbar-thumb{
    background-color: var(--scroll-thumb-color);
    border-radius: .5rem;
}
::-webkit-scrollbar-thumb:hover{
    background-color: var(--text-color-light);
}
@keyframes bounce {
    0%,
    100%,
    20%,
    50%,
    80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    }
    40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    }
    60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    }
}
.home__scroll-button:hover{
transform: translateY(.25rem);
}
.home__scroll-mouse{
font-size: 2rem;
}
.home__scroll-name{
font-size: var(--small-font-size);
color: var(--title-color);
font-weight: var(--font-medium);
margin-right: var(--mb-0-25);
}
.home__scroll-arrow{
font-size:1.25rem;
}
/** Buttons**/
.button{
    display: inline-block;
    background-color: var(--first-color);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: .5rem;
    font-weight: var(--font-medium);
}

.button:hover{
    background-color: var(--first-color-alt);
}

.button__icon{
    font-size: 1.25rem;
    margin-left: var(--mb-0-5);
    transition: .3s;
}

.button--flex{
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.button-long{
    width: 80%;
}