:root {
  --r-background-color: #111;
  --r-main-font-size: 31px;
  --r-main-color: #fff;
  --r-heading-color: #7CFF6B;
  --r-link-color: #55FF99;
  --r-font-strong-color: #FFB000;
}

.reveal{
    background:
        radial-gradient(
            ellipse at center,
            #222 0%,
            #111 55%,
            #050505 100%
        );
    position:relative;
}

.reveal::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:999;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.035) 0px,
            rgba(255,255,255,.035) 1px,
            transparent 2px,
            transparent 5px
        );
}

.reveal::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:998;
    background:
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0,0,0,.65) 100%
        );
}

h2 {
  color: var(--r-heading-color);
}

blockquote{
    position:relative;

    margin:2rem 0;
    text-wrap:pretty;
    padding:1rem;
    background:#151515;

    color:#e8e8d8;

    border:3px solid #777;

    box-shadow:
        4px 4px 0 #000,
        inset 0 0 0 2px #333;
    font-size:1em;
    line-height: 1.2em;
}


/* esquina estilo pixel */
blockquote::before{

    content:"👾";

    position:absolute;

    top:-18px;

    left:12px;

    padding:0 8px 3px 8px;

    background:#151515;

    color:#7cff6b;

    border:2px solid #777;

    font-size:1.2rem;

}

blockquote .typewriter-text{
    display:inline;
    overflow:hidden;
    border-right:3px solid #7CFF6B;
    animation:cursor-blink .8s infinite;
}

@keyframes cursor-blink{
    50%{
        border-color:transparent;
    }

}


.reveal strong {
  color: var(--r-font-strong-colo);
}

/* LINKS */
.reveal a {
  color: var(--r-link-color);
    text-shadow:
        0 0 4px rgba(85,255,153,.4);
  text-decoration: none;
  transition: color 0.15s ease;
}

.reveal a:hover{
  color:#7CFF6B;
}

/* CONTROLS */
.controls-arrow {
  color: var(--r-link-color);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}

.gallery-item{
  position:relative;
  margin:0;
  padding:.35rem;
  overflow:visible;

  background:#1a1a1a;
  border:4px solid #3d3d3d;
  outline:2px solid #111;

  box-shadow:
    0 0 0 2px #6d6d6d inset,
    4px 4px 0 #000,
    0 0 12px rgba(90,255,120,.12);

  transition:
    transform .12s steps(2),
    box-shadow .12s steps(2),
    filter .12s steps(2);
}

.gallery-item:hover{
  transform:translate(-3px,-3px);

  box-shadow:
    0 0 0 2px #8cff8c inset,
    7px 7px 0 #000,
    0 0 18px rgba(120,255,120,.35);

  filter:brightness(1.08);
}

.gallery-item img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;

  border:2px solid #7aff7a;

  image-rendering:pixelated;

  filter:
    contrast(1.15)
    saturate(.9)
    brightness(.95);
}

.num-badge{
  position:absolute;
  top:-12px;
  left:-12px;

  width:2.2rem;
  height:2.2rem;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#0d2d12;
  color:#8cff8c;

  border:3px solid #8cff8c;
  outline:2px solid #000;

  box-shadow:
    3px 3px 0 #000,
    inset 2px 2px 0 rgba(255,255,255,.12);

  line-height:1;
  user-select:none;
  z-index:10;
}

.gallery-item:hover .num-badge{
  animation:badgePulse .45s steps(2) infinite alternate;
}

@keyframes badgePulse{
  from{
    transform:scale(1);
  }
  to{
    transform:scale(1.12);
  }
}