body{
text-align: justify;
font-family: 'ITC Avant Garde Gothic Std Extra Light';
text-align: center;
margin: auto;
font-weight: 100;
font-size: 1.5rem;
}

html {
  scroll-behavior: smooth;
}

.boton-top{
     --offset: 0px; 
  position: fixed;
  bottom: 20px;      
  margin-right:10px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgb(0, 123, 255, 0.5);
  text-align: right;
  font-size: 3rem;
  border-radius: 100px; 
  
   animation: aparecer linear;
      animation-timeline: scroll();
      animation-range: 0px 400px;
}

@keyframes aparecer {
      0% {
        opacity: 0;
        pointer-events: none;
        transform: scale(0);
      }
      100% {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
      }
    }

.boton-top:hover {
    opacity: 1;
  color: #0056b3;
  transform:scale(1.1);
   box-shadow: 2px 2px 9px rgba(0,0,0,0.5);
}

.container{
margin: auto;
}

/* TITULOS */

h1{
font-size: 3.5rem;
text-align: center;
padding: 50px 0px 0px 0px;
font-weight: 100;
font-family: 'ITC Avant Garde Gothic Std Book';
}

h2{
font-size: 2.5rem;
text-align: center;
font-weight: 500;
font-family: 'ITC Avant Garde Gothic Std Book';
}

h3{
font-size: 2rem;
text-align: center;
font-weight: 500;
font-family: 'ITC Avant Garde Gothic Std Book';
}

h4{
font-size: 1.5rem;
font-weight: 900;
font-family: 'ITC Avant Garde Gothic Std Book';
}


/* TEXTO */

p{
text-align: justify;
font-size: 1.5rem;
padding: 20px;
font-family: 'ITC Avant Garde Gothic Std Book';
}



/* ========================= */
/* ANIMACIONES */
/* ========================= */


@keyframes desvanecer {
from {
opacity: 0;
transform: translateY(200px);
}

to {
opacity: 1;
transform: translateY(0);
}
}


/* ========================= */
/* SCROLL ANIMATIONS */
/* (Chromium browsers) */
/* ========================= */


img{
view-timeline-name: --image;
view-timeline-axis: block;
animation-timeline: --image;
animation-name: fadeIn;
animation-range: entry 15% cover 30%;
animation-name: desvanecer;
animation-duration: 2s;
animation-delay: 1.5s;
animation-fill-mode: both;
}





p .animado{
view-timeline-name: --text;
view-timeline-axis: block;
animation-timeline: --text;
animation-name: textFade;
animation-range: entry 5% cover 10%;
animation-fill-mode: both;
}