body {
    background-color: #000000;
    margin: 0;
    background-image: url('../images/imagePresentation.JPG');
	background-position: center;
    background-repeat: repeat-y, repeat-y, repeat-y; /* Repeat vertically for all three images */
    background-size: auto 100%; /* Maintain the original image size vertically, auto size horizontally */
}
  
.patterns {
	height: 100vh;
	position: relative;
}

.title {
	font-family: Lora;
	letter-spacing: 10px;
	stroke: #FFD700;
	font-size: 13vw;
	font-weight: 700;
	stroke-width: 3;
	animation: textAnimate 5s infinite alternate;
}

  .earlyAccess {
	font-family: Lora;
	letter-spacing: 8px;
	stroke: #FFD700;
	font-size: 5vw;
	font-weight: 250;
	stroke-width: 1;
	animation: textAnimate 5s infinite alternate;
  }

  .end {
	font-family: Lora;
	letter-spacing: 8px;
	stroke: #FFD700;
	font-size:4vw;
	font-weight: 250;
	stroke-width: 1;
	animation: textAnimate 5s infinite alternate;
  }
  
  @keyframes textAnimate {
	0% {
	  stroke-dasharray: 0 50%;
	  stroke-dashoffset: 20%;
	  fill: hsl(189, 68%, 75%);
	}
  
	100% {
	  stroke-dasharray: 50% 0;
	  stroke-dashoffset: -20%;
	  fill: hsla(189, 68%, 75%, 0%);
	}
  }
  
  /* Animation for the circle */
circle {
    animation: circleAnimation 2s infinite alternate;
}

@keyframes circleAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }

}