mark {
    --color1: #3aafdc;
    --color2: #3aafdc;
    --bg-height: 90%;
      
    all: unset;
    background-image: linear-gradient(var(--color1), var(--color2));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 var(--bg-height);
    animation: highlight 800ms 1 ease-out;
    animation-fill-mode: forwards;
    animation-play-state: paused;
  }
  
  
  @keyframes highlight {
    to {
      background-size: 100% var(--bg-height);
    }
  }

  #textContainer{
    margin: auto;
    width: 40%;
    padding: 10px;
    font-size: 30px;
  }

#title{
  font-family: "RansomNote", "Trattatello", "Times New Roman";
}

body{
  background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/beanstalk.png");
}