.html, body {
  overflow-x: hidden;
  font-family: poppins-italic, Arial;
  margin: 0;
  padding: 0;
  background-color: rgb(48, 18, 18);
  animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 1s;
}

html {
  scroll-behavior: smooth;
}

.container {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

.container p:hover {
  color: #ffffff;
  transform: scale(1.01);
  transition: all 0.7s ease; 
  text-shadow: 2px 2px 5px rgb(255, 255, 255);
}

.welcome-text, .name-text, .description-text {
  font-family: 'Poppins', sans-serif;
  opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
  transition: 0.7s ease;
}

.glow {
  color: #fff;
  text-shadow: none;
  animation: glowPulse 8s infinite;
}

@keyframes glowPulse {
  0% {
    text-shadow: none;
  }
  40% {
    text-shadow: 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 4px #fff;
  }
  60% {
    text-shadow: 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 4px #fff;
  }
  100% {
    text-shadow: none;
  }
}


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

.welcome-text {
  justify-content: left;
  align-items: center;
  grid-column: 2 / 2;
  grid-row: 4;
  font-size: clamp(15px, 2.8vw ,35px);
  color: rgb(216 206 206);
  z-index: 0;
  text-wrap: nowrap;
  font-weight: bold;
  animation-duration: 2s;
  margin-top: 60px;
}
.name-text {
  font-weight: bold;
  justify-content: center;
  align-items: center;
  grid-column: 2 / 2;
  grid-row: 4/6;
  font-size: clamp(20px, 5.2vw ,70px);
  color: rgb(216 206 206);
  z-index: 0;
  text-wrap: nowrap;
  margin-top: clamp(87px, 6vw ,80px);
  animation-duration: 2.5s;

}
.description-text {
  margin-top: clamp(30px ,3vw ,35px);
  justify-content: left;
  align-items: center;
  grid-column: 2 / 2;
  grid-row: 5/6;
  font-size: clamp(10px, 1.8vw ,25px);
  color: rgb(216 206 206);
  z-index: 0;
  text-wrap: nowrap;
  animation-duration: 3s;

}


@media (max-width: 600px) {
  .description-text {
    margin-top: 20px
  }
  .welcome-text {
    margin-top: 40px;
  }
  .name-text {
    margin-top: 60px;
  }
}



.silver-rose, .vines, .wire {
  position: absolute;
  display: flex;
  filter: contrast(10%);
  filter: brightness(10);
}


.silver-rose {
  left: 0;
  top: -4vw;
  width: clamp(200px, 28vw, 380px);
  grid-column: 2 / 2;
  grid-row: 1 / 2;
  transform: rotate(120deg);
  z-index: -1;
  opacity: 0.8;
}

@media (max-width: 600px) {
  .silver-rose {
    width: 200px;
  }
}

.vines {
  top: 2vw;
  bottom: 10px;  
  width: clamp(200px, 35vw, 800px);
  z-index: -1;
  opacity: 0.77;
  right: 0;

}

.wire {
  top: clamp(900px , 80vw, 1000px);
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 0.9;
  height: clamp(200px, 39vw, 760px);
}


@media (max-width: 1100px) {
  .wire
  {
    top: 100vw
  }
}


@media (max-width: 800px)
{
  .wire
  {
    top: clamp(900px ,120vw ,2000px)
  }
}

@media (max-width: 600px) {
  .wire {
    top: 100vw;
  }
}

@media (max-width: 500px) {
  .wire {
    top: 150vw;
  }
}


/* example
.vines {
opacity: 0.2;
filter: brightness(10);
contrast(10%);

This makes a background like png with a neutral color
} */