/* You can either copy the below and paste it between style tags on your HTML page, OR you can copy this to a file and name it .css and link it from your HTML page. */
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bonbon&family=Snowburst+One&display=swap');
@import url('../fuentes/stylesheet.css');
@import url('https://fonts.googleapis.com/css2?family=Gaegu&family=Gamja+Flower&family=Goudy+Bookletter+1911&family=Pangolin&display=swap');

:root {
    --carbon-black: #171B0C;
    --dark-spruce: #2f3d20;
    --olive-leaf: #505F24;
    --dry-sage: #BCB382;
    --sand-dune: #e7DFC6;

    --space-xs: 0.5rem;
    --space-sm: 0.875rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;

   /*tipografia*/
    --fs-h0:5rem;
    --fs-h1: 3rem;
    --fs-h2: 2.2rem;
    --fs-h3: 1.8rem;
    --fs-h4: 1.4rem;
    --fs-h5: 1.3rem;
    --fs-h6: 1.3rem;
    --fs-body: 1.1rem;
    --fs-small: 0.85rem;
    
    --Doto: "Doto", sans-serif;
    --grotesque: 'terminal_grotesque', sans-serif;
    --SnowburstOne: "Snowburst One";
    --Gaegu: "Gaegu";
    --GamjaFlower: "Gamja Flower";
}
h1 { 
  font-size: var(--fs-h1); 
  font-family: var(--SnowburstOne);
  line-height: 3rem;
  
}
h2 { 
  font-size: var(--fs-h2);
  font-family: var(--SnowburstOne);
  line-height: 2rem;
}
h3 { 
  font-size: var(--fs-h3); 
  font-family: var(--SnowburstOne);
}
h4 { 
  font-size: var(--fs-h4); 
  font-family: var(--SnowburstOne);
}
h5 { 
  font-size: var(--fs-h5); 
  font-family: var(--SnowburstOne);
  margin: 0;
  color: var(--sand-dune);
}
h6 { 
  font-size: var(--fs-h6); 
  font-family: var(--GamjaFlower);
  margin-top: var(--space-md);
  margin: 0;
}
p  { 
  font-size: var(--fs-body); 
  font-family: var(--GamjaFlower);
}
small { 
  font-family: var(--GamjaFlower);
  font-size: var(--fs-small); 
}
span {
  font-family: var(--GamjaFlower);
  font-size: var(--fs-body); 
}
li {
  font-family: var(--GamjaFlower);
  font-size: var(--fs-h6); 
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  margin-top: 0;
  color: var(--dry-sage);
  text-decoration: none;
  font-size: var(--fs-h6);
}

*{
  box-sizing:border-box;
}

html, body {
  margin:0;
  font-size:0.85em;
}
body {
  background-image: url(/img/assets/fondo-mosaico.png);
  background-repeat: repeat;
}
#container {
    border-radius: 8px;
  background-color:var(--sand-dune);
  width:70%;
  border-left:100px solid var(--dark-spruce);
  position:relative;
  color: var(--dark-spruce);
  background-image: url(/img/assets/textura-boxes.png);

}
#outer {
  border-left:6px dotted var(--dry-sage);
  margin-left:100px;
  border-radius: 8px;
}
img {
    width: 80%;
    display: block;
    clip-path: polygon(
    2% 0%,6% 2%,12% 0%,18% 3%,24% 1%,30% 3%,36% 1%,42% 3%,48% 0%,
    54% 3%,60% 1%,66% 3%,72% 1%,78% 3%,84% 0%,90% 3%,96% 1%,100% 4%,
    98% 10%,100% 16%,97% 22%,100% 28%,97% 34%,100% 40%,97% 46%,100% 52%,
    97% 58%,100% 64%,97% 70%,100% 76%,97% 82%,100% 88%,98% 94%,96% 100%,
    90% 97%,84% 100%,78% 97%,72% 100%,66% 97%,60% 100%,54% 97%,48% 100%,
    42% 97%,36% 100%,30% 97%,24% 100%,18% 97%,12% 100%,6% 97%,0% 94%,
    3% 88%,0% 82%,3% 76%,0% 70%,3% 64%,0% 58%,3% 52%,0% 46%,3% 40%,
    0% 34%,3% 28%,0% 22%,3% 16%,0% 10%,2% 4%
    );

}
.nav-wrapper {
  position: absolute;
  top: 100px;
  left: 50px;
  z-index: 9;
  justify-content: center;
}
nav {
  gap: var(--space-xs);
  justify-content: center;
  background-color: var(--dark-spruce);
  position: relative;
  width: min-content;
  background-image: url(/img/assets/textura-boxes.png);
  clip-path: polygon(
    2% 0%,6% 2%,12% 0%,18% 3%,24% 1%,30% 3%,36% 1%,42% 3%,48% 0%,
    54% 3%,60% 1%,66% 3%,72% 1%,78% 3%,84% 0%,90% 3%,96% 1%,100% 4%,
    98% 10%,100% 16%,97% 22%,100% 28%,97% 34%,100% 40%,97% 46%,100% 52%,
    97% 58%,100% 64%,97% 70%,100% 76%,97% 82%,100% 88%,98% 94%,96% 100%,
    90% 97%,84% 100%,78% 97%,72% 100%,66% 97%,60% 100%,54% 97%,48% 100%,
    42% 97%,36% 100%,30% 97%,24% 100%,18% 97%,12% 100%,6% 97%,0% 94%,
    3% 88%,0% 82%,3% 76%,0% 70%,3% 64%,0% 58%,3% 52%,0% 46%,3% 40%,
    0% 34%,3% 28%,0% 22%,3% 16%,0% 10%,2% 4%
  );
  height: min-content;
  padding: var(--space-md);
  color: var(--sand-dune);
  z-index: 10;
}

#navfloat {
    position: fixed;
    top: 630px;
    left: 49px;
    z-index: 0;
    width: 200px;
}



article { 
    padding:50px;
  line-height:1.7em;
  
}

nav > ul {
  margin:20px;
  padding:var(--space-md);
  border-radius: 8px;
}
nav > ul > li :hover {
    transform: translateY(-3px);  
    color: var(--olive-leaf);   
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

nav > ul > li {
  border-bottom:1px solid var(--sand-dune);
  text-align:center;
  box-sizing: border-box;
  width: 100%;
  display: block;
  border-bottom:1px solid var(--sand-dune);
}
nav > ul > li:last-child {
  border-bottom:none;
  text-align:center;
}


nav > ul > li > a {
    font-size: var(--fs-body);
  padding: var(--space-xs);
  display:block;
  color: var(--sand-dune);
}

.disposicion_Gifs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  width: 100%;
}
.disposicion_Gifs img {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.disposicion_Gifs img:hover {
  transform: translateY(-3px); 
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.etiquetas{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content:center;
}
.etiquetas img {
  height: 20px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}
.etiquetas img:hover {
  transform: translateY(-3px); 
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media only screen and (max-width: 850px) {
  .disposicion_Gifs img {
    height: 29px;
  }
   nav {
     left:0;
     position: fixed;
     width: 140px;
   }
   #container {
     width:100%;
     margin-left:0;
   }
   #outer {
     margin-left:0;
   }
    #navfloat {
        left: 0px;
        width: 160px;
    }
}