@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  background: beige;
}
h1{
  padding: 20px;
}
h2{
  padding: 10px;
}
h1, h2{
  text-align: center;
}
.wrapper{
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  margin-bottom: 500px;
  padding: .5rem;
  text-align: center;
}
.wrapper p{
  margin-bottom: 60px;
  font-size: 1.3rem;
  text-align: start;
  text-indent: 1rem;
}
.marker {
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background: linear-gradient(transparent 0%, #ff66ff8f 80%);
  background-position: 0;
  background-size: 0;
  background-repeat: no-repeat;
  transition: background 3s;
}
.marker.active {
  background-size: 100% ;
}

@media (max-width: 480px) {
  .wrapper p{
    font-size: 1.1rem;
  }
}