/*==================== GOOGLE FONTS ====================*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

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

  /*========== Colors ==========*/
  /* Change favorite color */
  --hue-color: 30; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/ /* CHANGE THIS LATER IF YOU DONT LIKE  */

  /* HSL color mode */
  --first-color: hsl(var(--hue-color), 99%, 61%);  
  --first-color-second: hsl(var(--hue-color), 69%, 61%);
  --first-color-alt: hsl(var(--hue-color), 57%, 53%);
  --first-color-lighter: hsl(var(--hue-color), 65%, 55%);
  --title-color: hsl(var(--hue-color), 8%, 15%);
  --text-color: hsl(var(--hue-color), 8%, 45%);
  --text-color-light: hsl(var(--hue-color), 8%, 65%);
  --input-color: hsl(var(--hue-color), 90%, 46%);
  --body-color: hsl(var(--hue-color), 60%, 99%);
  --container-color: #fff;
  --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);

  /*========== Font and typography ==========*/
  --body-font: 'Josefin Sans', sans-serif;

    /* .5rem = 8px. 1rem = 16px, 1.5=24px... */
    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.125rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

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


  /*========== Margenes Bottom ==========*/
    /* .25rem = 4px, .5rem= 8px, .75rem= 12px... */
    --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-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
}
}


/*==================== BASE ====================*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: var(--body-font);
  } 

  

/*==================== Portfolio ====================*/

.portfolio__section{
  padding: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  margin: 10rem auto;
}

.title__portfolio{
  margin: 1rem auto;
}



/* make the li line straight */
section ul{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* box for the button */
section ul li{
  list-style: none;
  background: #eee;
  padding: 12px 20px;
  margin: 5px;
  letter-spacing: 1px;
  cursor: pointer;
}

section ul li.active{
  background: var(--first-color-alt);
  color: #fff;
}

.product{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
}

/* zi box thing */
.product .itemBox{
  position: relative;
  width: 200px;
  height: 200px;
  margin: 10px;
  display: block;
}

.product .itemBox img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:  0.2s linear;

}

.product .itemBox img:hover {
transform: scale(1.1);

}

.product .itemBox.hide{
  display: none;
}

/* FullView  */

#FullImageView{
  padding-top: 5rem;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  text-align: center;
}

#FullImage{
  padding: 24px;
  max-width: 98%;
  max-height: 98%;
}

#CloseButton{
  position: absolute;
  top: 5rem;
  right: 12px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}