:root {
  --length: 0;
}

html {
	scroll-behavior: smooth;
	}
	
/* div {
	scroll-snap-align: start;
	} */
	
.handwritten-text {
    font-family: 'Patrick Hand', cursive;
    font-size: 3rem; /* Equivalent to 48px when the root font size is 16px */
    margin: 20rem 10rem;
    opacity: 0;
    transition: opacity 3s ease-out;
    will-change: opacity;
}

.handwritten-text.visible {
    opacity: 1;
}

p {
    display: flex;
    justify-content: center;
    color: black;
}

.svg-container {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	/* min-height: 250px; */
}

.path {
  stroke-dasharray: var(--length);
  stroke-dashoffset: var(--length);
  stroke-width: 2;
}

.draw {		
  	animation: anim 3s ease-in-out forwards;
}

@keyframes anim {
  0% {
    stroke-dashoffset: var(--length);
  }

  100% {
    stroke-dashoffset: 0;
  }
}