html {
  font-family: Courier, monospace, Times, serif;
  height: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-weight: 400;
  color: var(--antracite);
}


body {
  font-size: .8rem;
  letter-spacing: .15px;
  word-spacing: -0px;
  background: #fff;

}
a:link,
a:visited {
  text-decoration: none;
  color: inherit;

}


header {
  position: sticky;
  margin-bottom: 1rem;
  width: 100%;
  height: fit-content;
  display: block;
  top: 0.25rem;
  height: fit-content;
  z-index: 1;
  transition: all 600ms ease;

}

.info {
  width: fit-content;
  position: absolute;
  right: 15%;
  top: 0rem;
  font-size: 1rem;
}
nav {
  display: flex;
}
nav ul {
  display: inline-flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav ul li:hover,
nav ul li.active {
  opacity: 1;
  transition: width 200ms ease;
}
nav li {
  margin-right: .5rem;
}
nav li.active {
  opacity: 1 !important;
}

nav li:not(.active) {
  opacity: 0.3;

}


.logo-wrapper {
  position: relative;
  height: fit-content;
  width: fit-content;
  font-size: 0.8rem;
  margin: .25rem .5rem;
}
.logo {
  padding: 0;
  width: fit-content;
  height: fit-content;
  position: sticky;
  width: fit-content;
  z-index: 99;
  transition: opacity 300ms ease;

}
.logo a:hover,
.info a:hover {
  opacity: .8;
  transition: opacity 300ms ease;
}




nav.active #mainNav,
nav.active #menu {
  opacity: 1;
}



/* Main */

section {
  z-index: 99;
}
.nbr {
  padding: .5rem;
}
.grid {
  --columns: 12;
  --gutter: 0rem;
  display: flex !important;
  justify-content: space-evenly;
  height: 100%;
  width: fit-content;
  margin: .25rem;
}
.grid > .column {
  grid-column: span var(--span);
  height: fit-content;
  overflow: hidden;
  display: flex;
}
.blocks {
  display: flex;
  margin: auto;
  padding: 0 .25rem;
}
.block {
  display: flex;
  position: relative;
}

body {
margin: 0;
}

figure {
  margin: 0;
  display: flex;
  width: fit-content;
  width: -webkit-fit-content;
  }
  
  img {
    max-height: 85vh;
    max-width: 100%;
    display: block;
    width: auto;
    vertical-align: middle;
  }
  img[src$=".svg"] {
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
  }
  
  .slide {display: none}
  .slide.active {
    display: flex;
  }
  
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    transition: 0.6s ease;
    user-select: none;
  }
  
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  


figcaption:hover {
  opacity: .3;
  transition: opacity 300ms ease;
}
figcaption .autor {
  padding-left: 1rem;
  display: block;
}

.counter-wrap {
  position: relative;
  width: fit-content;
  line-height: 1;
  margin-top: auto;
  transition: all 300ms ease;
}
.counter {
  width: fit-content;
  margin: auto;
  font-size: .8rem;
  margin: 0;
  letter-spacing: .05rem;
  line-height: .65;
}








/* Overlay Layer */
article .txt {
  max-width: 40vw;
  margin: 0;
}

footer {
  display: grid;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: rgb(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  transition: backdrop-filter 300ms ease, background 300ms ease , opacity 300ms ease ;
  cursor: pointer;
}

footer.active {
  background:  rgb(255, 255, 255, .3);
  backdrop-filter: blur(10px);
  transition: all 200ms ease;
  opacity: 1;
  z-index: 0;
  height: 100vh;
  overflow-x: scroll;
  scrollbar-width: none;
  position: absolute;
  top: 0;
  left: 0;
}

section h2 {
  margin: .5rem .25rem;
}

article h1,
article h2 {
  font-size: 1.18rem;
  margin: .5rem 0 1rem 0px;
  font-weight: normal;
  
}


footer.active article  {
  display: block;
  transition: all 300ms ease;
}

.ft {
  margin: 1rem .5rem;
}
.ft ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .8rem;
  word-spacing: -50%;
  display: flex;
  justify-content: space-between;
  padding: 0 .15rem;
}





.about {
margin-top: 3rem;
position: absolute;
width: 50vw;
left: 50vw;
}

.txt {
  width: 100%;
display: inline-grid;
margin-bottom: 1rem;
}


.txt p, h2 {
  font: inherit;
  margin: 0;
} 

.txt p {
  margin-bottom: 1rem;
  line-height: 1.25;
  margin-top: 0;
  margin-left: .5rem;
  padding: .15rem;
}
.txt a {
  border-bottom: dotted 1px rgba(0, 0, 0, 0.6);
}

.ft p {
  font-size: .85rem;
  letter-spacing: .015rem;
  margin-top: 0rem;
  margin-bottom: 1rem;
}


/* Modal-style container for About content */

.info-button {
  position: absolute;
  font-family: inherit;
  top: 0;
  right: 25%;
  background: none;
  font-size: .8rem;
  cursor: pointer;
  color: inherit;
  padding: .25rem;
  border: 0;
  z-index: 9;
}
.info-button:hover {
  color: red;
}

.info-text {
  display: none;
  padding: .25rem;
}
.info-text {
  display: none;
  position: relative;
  width: calc(100% - .5rem);
  height: fit-content;
  z-index: 1000;
  overflow-y: hidden;
  padding: .5rem;
  transition: all 300ms ease;
}

.info-text .txt {
  max-width: 55%;
}
.info-text .txt:last-child {
margin-bottom: 0 !important;
}
.info-text p {
  padding: 0;
  margin: 0;
}
.kirby {
  width: fit-content;
  position: relative;
  bottom: 0;
  right: 0;
  margin-left: auto;
  padding: .35rem .5rem;
  font-size: .6rem;
}

#agitadas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.agitadas-letter {
  position: absolute;
  font-size: .8rem;
  opacity: 0;
  animation: fadeInOut 3s ease-in-out forwards;
  color: #fff; /* or whatever you like */
  mix-blend-mode: difference;
}

@keyframes fadeInOut {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}


@media screen and (max-width: 50rem) {
article .txt {max-width: none;}
.ft ul { display: inline; padding: 0; line-height: 1rem;}
.grid {display: inline !important;}
.counter-wrap {padding-top: .25rem;}
.info-text .txt {max-width: none;}
}