/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  
  background-image: url('/goldenhour.jpg');  
  background-size: cover;                    
  background-position: center;               
  background-repeat: repeat;              
  color: white;
  font-family: Verdana;
}

.image-container {
  width: 1200px;                      
  height: 1200px;                   
  display: flex;                     
  justify-content: center;         
  align-items: center;              
  margin: 100px auto;   
  position: relative;               
}

.image-container::before {
  content: "";
  position: absolute;
  top: 00;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/clouds.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(5px) brightness(1) saturate(1.5); 
  z-index: -1;  
}

.pills {
  width: 300px;  
  height: auto;
  position: absolute;
  top: 600px;
  left: 100px;
  z-index: 2;
  transform: rotate(40deg);
}
  .pills2 {
  width: 350px;  
  height: auto;
  position: absolute;
  top: 900px;
  left: 1200px;
  z-index: 2;
  transform: rotate(-40deg);
}

 .pills3 {
  width: 250px;  
  height: auto;
  position: absolute;
  top: 300px;
  left: 1000px;
  z-index: 2;
  transform: rotate(20deg);
}

 .pills4 {
  width: 250px;  
  height: auto;
  position: absolute;
  top: 700px;
  left: 700px;
  z-index: 2;
  transform: rotate(-20deg);
}

 .pills5 {
  width: 350px;  
  height: auto;
  position: absolute;
  top: 00px;
  left: 200px;
  z-index: 2;
  transform: rotate(-50deg);
}

.pills6 {
  width: 300px;  
  height: auto;
  position: absolute;
  top: 600px;
  left: 100px;
  z-index: 2;
  transform: rotate(40deg);
  filter: blur(35px) brightness(2) saturate(4);
}
  .pills7 {
  width: 350px;  
  height: auto;
  position: absolute;
  top: 900px;
  left: 1200px;
  z-index: 2;
  transform: rotate(-40deg);
  filter: blur(35px) brightness(2) saturate(4);
}

 .pills8 {
  width: 250px;  
  height: auto;
  position: absolute;
  top: 300px;
  left: 1000px;
  z-index: 2;
  transform: rotate(20deg);
  filter: blur(35px) brightness(2) saturate(4);
}

 .pills9 {
  width: 250px;  
  height: auto;
  position: absolute;
  top: 700px;
  left: 700px;
  z-index: 2;
  transform: rotate(-20deg);
  filter: blur(35px) brightness(2) saturate(4);
}

 .pills10 {
  width: 350px;  
  height: auto;
  position: absolute;
  top: 00px;
  left: 200px;
  z-index: 2;
  transform: rotate(-50deg);
  filter: blur(35px) brightness(2) saturate(4);
}
.chrome {
  width: 1000px;
  height: auto;
  position: absolute;
  top: -100px;
  left: 100px;
  z-index: 1;
  filter: blur(0px) brightness(2) saturate(3); 
  animation: swirlUpDown 10s linear infinite;
}

.chrome2 {
  width: 1000px;
  height: auto;
  position: absolute;
  top: -100px;
  left: 100px;
  z-index: 1;
  filter: blur(15px) brightness(7) saturate(10); 
  animation: swirlUpDown 10s linear infinite;
}

.float {
  width: 550px;  
  height: auto;
  position: absolute;
  top: 650px;
  left: 900px;
  z-index: 2;
  filter: blur(0px) brightness(1.2) saturate(3); 
  animation: floatUpDown 4s linear infinite;
}

.float2 {
  width: 550px;  
  height: auto;
  position: absolute;
  top: 650px;
  left: 900px;
  z-index: 2;
  filter: blur(30px) brightness(1.2) saturate(7); 
  animation: floatUpDown 4s linear infinite;
}


.bluehibiscus {
  width: 500px; 
  height: auto;
  position: absolute;
  top: 300px;
  left: 300px;
  z-index: 1;
  filter: blur(15px) brightness(1.2) saturate(3);
    opacity: 0.7;
}

.bluehibiscus2 {
  width: 400px; 
  height: auto;
  position: absolute;
  top: 300px;
  left: 300px;
  z-index: 1;
  filter: blur(5px) brightness(1.2) saturate(3);
    opacity: 0.7;
}

.pinkhibiscus {
  width: 450px; 
  height: auto;
  position: absolute;
  top: 700px;
  left: 500px;
  z-index: 1;
  filter: blur(5px) brightness(1.2) saturate(1.5);
    opacity: 0.7;
}

.pinkhibiscus2 {
  width: 550px; 
  height: auto;
  position: absolute;
  top: 700px;
  left: 500px;
  z-index: 1;
  filter: blur(35px) brightness(2) saturate(4);
    opacity: 0.7;
}

.pinkorchid {
  width: 650px; 
  height: auto;
  position: absolute;
  top: 00px;
  left: -100px;
  z-index: 1;
  filter: blur(5px) brightness(1.2) saturate(1.5);
    opacity: 0.7;
}

.pinkorchid2 {
  width: 750px; 
  height: auto;
  position: absolute;
  top: 00px;
  left: -100px;
  z-index: 1;
  filter: blur(35px) brightness(2) saturate(4);
    opacity: 0.7;
}

.violetorchid {
  width: 550px; 
  height: auto;
  position: absolute;
  top: 900px;
  left: 900px;
  z-index: 1;
  filter: blur(5px) brightness(1.2) saturate(1.5);
    opacity: 0.7;
}
    
.violetorchid2 {
  width: 600px; 
  height: auto;
  position: absolute;
  top: 900px;
  left: 900px;
  z-index: 1;
  filter: blur(35px) brightness(2) saturate(6);
    opacity: 0.7;
}   

.heartshit {
  width: 550px; 
  height: auto;
  position: absolute;
  top: 850px;
  left: 400px;
  z-index: 1;
  filter: blur(0px) brightness(1) saturate(10);
    opacity: 1;
      animation: heartFloat 3s linear infinite;
    
}

.heartshit2 {
  width: 550px; 
  height: auto;
  position: absolute;
  top: 850px;
  left: 400px;
  z-index: 1;
  filter: blur(10px) brightness(2) saturate(20);
    opacity: 1;
      animation: heartFloat 3s linear infinite;
}


.whitelily {
  width: 650px; 
  height: auto;
  position: absolute;
  top: 950px;
  left: -100px;
  z-index: 1;
  filter: blur(5px) brightness(1.2) saturate(1.5);
    opacity: 0.7;
}

.whitelily2 {
  width: 750px; 
  height: auto;
  position: absolute;
  top: 950px;
  left: -100px;
  z-index: 1;
  filter: blur(35px) brightness(2) saturate(7);
    opacity: 0.7;
}

.blender {
  width: 750px; 
  height: auto;
  position: absolute;
  top: 450px;
  left: 00px;
  z-index: 1;
  filter: blur(3px) brightness(1.2) saturate(1.5);
    opacity: 0.7;
}
    
.gay {
  width: 1250px; 
  height: auto;
  position: absolute;
  top: -300px;
  left: 300px;
  z-index: 1;
  filter: blur(0px) brightness(1) saturate(1);
    opacity: 1;
}

@keyframes floatUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-100px); }
  100% { transform: translateY(0); }
}
@keyframes swirlUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-200px); }
  100% { transform: translateY(0); }
}
@keyframes pillsUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-400px); }
  100% { transform: translateY(0); }
}


@keyframes heartFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}