/* styles.css */

/* Main styles */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
.text {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}
.text:nth-child(5n+1) {
  stroke: #ab5dee;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.text:nth-child(5n+2) {
  stroke:#c5c5c5;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}
.text:nth-child(5n+3) {
  stroke: #be80ff;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}
.text:nth-child(5n+4) {
  stroke: #1ddd33;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}
.text:nth-child(5n+5) {
  stroke: #1da11f;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

/* Other styles */
html,
body {
  height: 100%;
}

body {
  background: #111;
  background-size: 0.2em 100%;
  font: 5em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Style the button container */
.button-container {
  text-align: center;
  margin-top: 20px; /* Adjust the spacing between SVG and button container */
  position: relative; /* Add positioning for z-index */
  z-index: 1; /* Bring the button container to the top */
}

/* Style the button */
.button {
  display: inline-block;
  padding: 5px 20px;
  font-weight: bold;
  background-color: #ab5dee;
  color: #1ddd33; /* Corrected color value */
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  margin-top: auto; /* Push the button to the bottom */
  margin-left: auto; /* Horizontally center the button */
  margin-right: auto; /* Horizontally center the button */
}

/* Hover effect for the button */
.button:hover {
  background-color: 	#1ddd33; /* Light green color on hover */
  color: black;
}
/* Style the button2 */
.button2 {
  display: inline-block;
  padding: 5px 20px;
  font-weight: bold;
  background-color: #ab5dee;
  color: #1ddd33; /* Corrected color value */
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  margin-top: auto; /* Push the button to the bottom */
  margin-left: auto; /* Horizontally center the button */
  margin-right: auto; /* Horizontally center the button */
}

/* Hover effect for the button */
.button2:hover {
  background-color: 	#1ddd33; /* Light green color on hover */
  color: black;
}
.header{
  color: white;
  font-weight: bold;
  font-size: medium;
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ab5dee; /* Optional background color for better visibility */
  padding: 10px; /* Optional padding to add some space around the text */
}
.header:hover{
  background-color: rgb(20, 187, 20);
  
}
/* Style for .footer2 */
/* Style for .footer2 */
.footer2 {
  position:absolute;
  font-size: medium;
  bottom: 220px; /* Adjust the bottom value as needed to control its distance from the bottom */
  left: 0;
  right: 0;
  background-color: #333;
  color: white;
  text-align: center; /* Center the text horizontally */
  padding: 10px;
}


.footer{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background color */
  color: white; /* Text color */
  padding: 10px; /* Optional padding to add some space around the text */
  font-weight: bold;
  font-size: medium;
}