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

@font-face {
    font-family: "Mincho";
    src: url("Mincho-Variable-Remix.ttf") format("truetype");
}

body {
  font-family: "Mincho";
  font-size: 5px;
  padding: 50px;
}

/* 1. Define the track container */
.scroll-track {
    height: 300vh;   
    view-timeline-name: --section;
    view-timeline-axis: block;
  }
  
  /* 2. Keep the element on screen during the track */
  .sticky-element {
    position: sticky;
    top: 20vh;
  }
  
  /* 3. Link the variable font to the scroll timeline */
  .animated-text {
    font-family: 'Mincho';
    font-variation-settings: 'RAIN' 0;
    
    /* Link animation timeline and range */
    animation: morph-text linear both;
    animation-timeline: --section;
  }
  
  /* 4. Interpolate your variable font axes */
  @keyframes morph-text {
    from {
      font-variation-settings: 'RAIN' 0;
      scale: 0.5;
    }
    to {
      font-variation-settings: 'RAIN' 600;
      scale: 1;
    }
  }

  .bottom {
    padding-bottom: 50px;
    font-size: 18px;
    font-variation-settings: 'RAIN' 0;

  }