body {
  font-family: 'Times New Roman';
  text-align:  center;
  color: white;
  background-image: 
      url("https://i.pinimg.com/originals/2b/cf/a6/2bcfa605a3756da03f9a14c613db02dd.gif");

  background-size: 
  20%;
 
  background-repeat:
  repeat;
  background-position:
  center;

}


@media screen and (min-width: 360px) and (max-width: 768px) {
  body {
    background-image: url("https://i.postimg.cc/rw168HLL/gif.gif");
    background-size: 80%;
    background-repeat: repeat;
    background-position: center;
    font-family: 'Times New Roman', times, serif;
    text-align: center;
    color: white;
  overflow-x: hidden;
    margin: 0 auto;
    

} 

}



h1 {
  
  font-size: 70px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
 background:url("https://i.postimg.cc/HkR7p9FR/Screenshot-2026-01-07-160745.png") 50% 50%;
  background-size: 47% 60%;
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin: 0 auto;
  
}




  
  @media screen and (min-width: 360px) and (max-width: 768px) {
  h1 {

    
    font-size: 45px;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
  text-align: center;
  margin: 0 auto;
    background:url("https://i.postimg.cc/zGg1v35H/Screenshot-2026-01-07-222712.png") 80% 40%;
    background-size: 95% 50%;
    -webkit-background-clip: text;


}

}


h2 {
  
  font-size: 35px;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  background:url("https://i.postimg.cc/FKfRphy5/Screenshot-2026-01-07-222717.png")
  50% 50%;
  text-align: center;
  margin: 0 auto;
  background-size: 59% 90%;
  -webkit-background-clip: text;
  
  
}
  

  @media screen and (min-width: 360px) and (max-width: 768px) { 
  h2 {  
    
  font-size: 25px;
  font-style: italic;
  -webkit-text-fill-color: transparent;
  background:url("https://i.postimg.cc/g2x76g57/rainbow-(1).jpg")
  50% 50%;
  background-size: 95%, 70%;
  margin: 0;
  -webkit-background-clip: text;
    
}

}



  
p {
  
  font-size: 25px;
  
}


#stella {
  
  
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
    justify-content: center;
  overflow-x: hidden;
  

}

@media screen and (min-width: 360px) and (max-width: 768px) {
  #stella {
    
  background-repeat: no-repeat;
  overflow-x: hidden;
  
}
 
}

#vanilla {
  
  font-size: 70px;
  -webkit-text-fill-color: transparent;
  background:url("https://i.postimg.cc/jSpLNXBd/rainbow.png") 50% 50%;
  -webkit-background-clip: text;
  font-weight: bold;
  background-size: 100% 93%;
  color: transparent;
  text-align: center;
  margin: 0 auto;
  
}

@media screen and (min-width: 360px) and (max-width: 768px) {
  #vanilla {

    
    font-size: 45px;
    -webkit-text-fill-color: transparent;
    font-style: italic;
  text-align: center;
  margin: 0 auto;
    background:url("https://i.postimg.cc/G2wRqgj4/rainbow-(1.jpg") 80% 40%;
    background-size: 100% 50%;
    -webkit-background-clip: text;
}
}

#chocolate {
  
  font-size: 70px;
  -webkit-text-fill-color: transparent;
  background:url("https://tvolimages.carrd.co/assets/images/image02.jpg?v=a665b3f4") 50% 50%;
  -webkit-background-clip: text;
  font-weight: bold;
  background-size: 100% 93%;
  color: transparent;
  text-align: center;
  margin: 0 auto;
  
}

@media screen and (min-width: 360px) and (max-width: 768px) {
  #chocolate {

    
    font-size: 45px;
    -webkit-text-fill-color: transparent;
    font-style: italic;
  text-align: center;
  margin: 0 auto;
    background:url("https://i.pinimg.com/736x/21/80/cd/2180cdd0eca387c4e18fd566073b7f6c.jpg") 80% 40%;
    background-size: 100% 50%;
    -webkit-background-clip: text;
    
  }
}

#strawberry {
  
  font-size: 70px;
  -webkit-text-fill-color: transparent;
  background:url("https://tvolimages.carrd.co/assets/images/image03.jpg?v=81273326") 50% 50%;
  -webkit-background-clip: text;
  font-weight: bold;
  background-size: 100% 93%;
  color: transparent;
  text-align: center;
  margin: 0 auto;
  
}

@media screen and (min-width: 360px) and (max-width: 768px) {
  #strawberry {

    
    font-size: 45px;
    -webkit-text-fill-color: transparent;
    font-style: italic;
  text-align: center;
  margin: 0 auto;
    background:url("https://tvolimages.carrd.co/assets/images/image04.jpg?v=81273326") 80% 40%;
    background-size: 100% 50%;
    -webkit-background-clip: text;

}
}

.lines {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 300;
	opacity: 0.2;
}
.lines:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
	background-size: 100% 4px;
	will-change: background, background-size;
	animation: scanlines 0.2s linear infinite;

}

lines::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  pointer-events: none;
  animation: scanlines 0.15s infinite;
}

@keyframes scanlines {
	from {
		background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, 0.5) 51%);
		background-size: 100% 4px;
	}
	to {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51%);
		background-size: 100% 4px;
	}
}