/* Font Imports */
 @font-face {
   font-family: "Lily Script One";
   src: url("LilyScriptOne-Regular.ttf") format("truetype");
 }

 @font-face {
   font-family: "Poppins";
   src: url("Poppins-Regular.ttf") format("truetype");
   font-weight: normal;
 }

 @font-face {
   font-family: "Poppins";
   src: url("Poppins-Bold.ttf") format("truetype");
   font-weight: bold;
 }

 /* Reset and Base Styles */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   font-family: "Poppins", sans-serif;
   background-color: #ffe0e9;
   overflow-x: hidden;
   color: #434343;
   line-height: 1.6;
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 main {
   max-width: 100vw;
 }

 section {
   padding: 40px 24px;
   position: relative;
   z-index: 1;
 }

 h1, h2 {
   font-weight: bold;
   margin-bottom: 16px;
 }

 h1 {
   font-family: "Lily Script One", cursive;
   font-size: 2rem;
 }

 h2 {
   font-size: 1.5rem;
 }

 p {
   font-size: 1rem;
 }

 /* Hero Section */
 #hero {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 100px 24px;
   height: 90vh;
   max-height: 800px;
   text-align: center;
 }

 #hero p {
   max-width: 800px;
   margin-bottom: 40px;
 }

 #hero button {
   background-color: #b9375e;
   color: white;
   padding: 10px 32px;
   border-radius: 8px;
   font-weight: bold;
   font-size: 1rem;
   transition: transform 0.3s, background-color 0.3s;
   cursor: pointer;
 }

 #hero button:hover {
   background-color: #982b4c;
   transform: scale(1.05);
 }

 /* About Section */
 #about {
   background-color: #ceddbb;
   display: flex;
   flex-direction: column;
   gap: 40px;
 }

 #about img {
   width: 100%;
   height: 300px;
   object-fit: cover;
 }

 /* Contact Section */
 #contact {
   background-color: #ffe0e9;
 }

 #contact form {
   display: flex;
   flex-direction: column;
 }

 #contact input,
 #contact textarea {
   padding: 10px;
   border: 1px solid #434343;
   border-radius: 8px;
   width: 100%;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1rem;
   margin-bottom: 16px;
 }

 #contact textarea {
   resize: vertical;
 }

 #contact button {
   background-color: #b9375e;
   color: white;
   padding: 10px;
   border-radius: 8px;
   font-weight: bold;
   cursor: pointer;
   transition: transform 0.3s, background-color 0.3s;
   width: 100%;
   font-size: 1rem;
   margin-top: 8px;
 }

 #contact button:hover {
   background-color: #982b4c;
   transform: scale(1.05);
 }

 /* Floating Balloons */
 #floating-balloons {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   pointer-events: none;
   z-index: 0;
   overflow: hidden;
 }

 .balloon {
   position: absolute;
   bottom: -200px;
   width: 50px;
   animation: floatUp 6s linear forwards;
   opacity: 0.1;
 }

 @keyframes floatUp {
   0%   { transform: translateY(0) rotate(0deg); }
   25%  { transform: translateY(-50vh) rotate(-3deg); }
   50%  { transform: translateY(-100vh) rotate(3deg); }
   75%  { transform: translateY(-150vh) rotate(-2deg); }
   100% { transform: translateY(-200vh) rotate(0deg); }
 }

 /* Balloon Styles */
 .balloon-fill {
   fill: #ff4d6d;
 }

 .balloon-stroke {
   stroke: #ff4d6d;
   stroke-width: 5px;
   fill: transparent;
 }

 /* Responsive */
 @media (min-width: 800px) {
   h1 {
     font-size: 4rem;
   }

   h2 {
     font-size: 2rem;
   }

   p, input, textarea, button {
     font-size: 1.2rem;
   }

   section {
     padding: 56px 56px;
   }

   #about {
     flex-direction: row-reverse;
     align-items: center;
   }

   #about img {
     width: auto;
     height: 100%;
   }

   #about p {
     flex: 1;
     margin-right: 24px;
   }

   #contact button {
     width: 200px;
   }
 }