:root {
    /* fuentes */
    --sm-xl: 14px;
    --sm-l: 16px;
    --sm: 18px;
    --nm: 20px;
    --lg: 22px;
    --lg-xl: 25px;
    --lg-xxl: 30px;
    --lg-xxxl: 40px;

    /* tamaños responsivos */
    --size-1: .25rem;
    --size-2: .5rem;
    --size-3: .75rem;
    --size-4: 1rem;
    --size-5: 2rem;
    --size-6: 4rem;
    --size-7: 8rem;
    --size-8: 16rem;

    /* tamaños pequeños */
    --sm-size-1: 1px;
    --sm-size-2: 2px;
    --sm-size-3: 4px;
    --sm-size-4: 5px;
    --sm-size-5: 10px;
}

/* reset */
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html,
body {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.main {
    position: relative;
    padding: var(--size-2) var(--size-6);
}

.header {
    position: sticky;
    top: 0;
    z-index: 3;
}

:target {
    animation: zoom 2s ease;
}

.img-container:has(img:target) {
    animation: resaltado 2s ease;
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes resaltado {
  0% {
    border-radius: var(--sm-size-5);
  }
  
  50% {
    border-radius: 0;
  }

  100% {
    border-radius: var(--sm-size-5);
  }
}