:root{
      --bg:#fff6fb;
      --ink:#222;
      --stem:#2c7a4b;
      --leaf:#2f8f57;
      --shadow:0 10px 30px rgba(0,0,0,.10);
      --mult: 4 
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; display:grid; place-items:center;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      color:var(--ink); background-color: rgb(192, 235, 255);
      display: flex; align-items: center; justify-content: center;
    }

    .card{
      width:min(900px, 92vw); background:#fff; border-radius:24px; box-shadow:var(--shadow);
      position:relative; overflow:hidden; isolation:isolate;
      background: linear-gradient(rgb(0, 166, 255), rgb(203, 245, 255));
      border: 1px solid black;
    }

    .cloud{
      display: grid;
      grid-template-columns: repeat(3, auto);
      grid-template-rows: repeat(2, auto);
      place-items: center;
      row-gap: 0px;
      width: 100px;

    }

    .cloud-head{
      width: 50px;
      height: 50px;
      background-color: #222;
      border: 1px solid rgb(122, 122, 122);
      border-radius: 50px;
    }

    /* Subtle floating hearts in the background */
    .hearts{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.25; }
    .hearts span{ position:absolute; width:18px; height:18px; transform:rotate(45deg);
      background:linear-gradient(#ff6aa0, #ff85b2); border-radius:4px 4px 0 0;
      animation: float 8s linear infinite; }
    .hearts span::before,.hearts span::after{ content:""; position:absolute; width:18px; height:18px; background:inherit; border-radius:50%; }
    .hearts span::before{ left:-9px; }
    .hearts span::after{ top:-9px; }
    .hearts span:nth-child(1){ left:10%; bottom:-10%; animation-duration:10s }
    .hearts span:nth-child(2){ left:25%; bottom:-15%; animation-duration:12s }
    .hearts span:nth-child(3){ left:40%; bottom:-12%; animation-duration:9s }
    .hearts span:nth-child(4){ left:60%; bottom:-14%; animation-duration:11s }
    .hearts span:nth-child(5){ left:75%; bottom:-16%; animation-duration:13s }
    @keyframes float{ to{ transform:translateY(-120%) rotate(45deg);} }

    .headline{ position:relative; z-index:1; text-align:center;  font-size:clamp(22px, 3.2vw, 28px); font-weight:700; }
    .sub{ position:relative; z-index:1; text-align:center; margin:0 0 16px; opacity:.7 }

    .garden{ position:relative; z-index:1; display:flex; justify-content:center; gap:38px;  min-height:320px; }




    /* --- Tulip --- */
    .tulip{  width:90px; height:260px; display:grid; place-items:end center; animation:sway 6s ease-in-out infinite; transform-origin:bottom center; align-self: flex-end; z-index: 10000; }
    .tulip:nth-child(2){ animation-delay: .8s }
    .tulip:nth-child(3){ animation-delay: 1.6s }
    @keyframes sway{ 0%,100%{ transform:rotate(-1.5deg) } 50%{ transform:rotate(1.5deg) } }

    .stem{  bottom:30px; width:8px; height:170px; background:linear-gradient(#2e8b57,var(--stem)); border-radius:8px; }

    .leaf{ position:absolute; bottom:30px; width:120px; height:80px; background:var(--leaf); border-radius:0 100px 10px 100px; transform-origin:10% 90%; filter:drop-shadow(0 4px 6px rgba(0,0,0,.12)); }
    .leaf:hover{ box-shadow: 0px 0px 5px paleturquoise; }
    .leaf.left{ left:-68px; transform:rotate(-34deg) }
    .leaf.right{ right:-60px; transform:scaleX(-1) rotate(-26deg) }

    .bud{ position:absolute; bottom:155px; width:78px; height:86px; background:var(--petal-main); border-radius:50% 50% 40% 40%; transform:translateY(6px); filter:drop-shadow(0 10px 12px rgba(0,0,0,.12)); }
    .bud:hover{ box-shadow: 0px 0px 5px paleturquoise; }
    /* center petal */
    .bud::before{ content:""; position:absolute; inset:-8px -6px 5px; background:linear-gradient(var(--petal-light), var(--petal-main)); border-radius:42% 42% 36% 36%; z-index:2; clip-path:polygon(50% 0, 70% 12%, 85% 26%, 92% 44%, 92% 74%, 50% 100%, 8% 74%, 8% 44%, 15% 26%, 30% 12%); }
    /* left and right petals */
    .petal{ position:absolute; bottom:160px; width:70px; height:84px; background:var(--petal-main); border-radius:50% 50% 44% 44%; }
    .petal:hover{ box-shadow: 0px 0px 5px purple;}
    .petal.left{ left:-18px; transform:rotate(-12deg); background:linear-gradient(135deg, var(--petal-light), var(--petal-main)); }
    .petal.right{ right:-18px; transform:rotate(12deg); background:linear-gradient(45deg, var(--petal-light), var(--petal-main)); }

    /* color themes */
    .tulip[data-color="pink"]{ --petal-main:#ff6aa0; --petal-light:#ff98bf; }
    .tulip[data-color="purple"]{ --petal-main:#9b5de5; --petal-light:#c8a5ff; }
    .tulip[data-color="yellow"]{ --petal-main:#f7c948; --petal-light:#ffe27a; }
    .tulip[data-color="red"]{ --petal-main:#ef476f; --petal-light:#ff7c96; }
    .tulip[data-color="peach"]{ --petal-main:#ff8c69; --petal-light:#ffb199; }

    /* Message ribbon */
    .ribbon{ position:relative; margin:18px auto 6px; width:max-content; padding:10px 16px; background:#111; color:#fff; border-radius:999px; font-weight:600; box-shadow:0 8px 20px rgba(0,0,0,.18); }
    .ribbon small{ opacity:.8; font-weight:500; }

    .footer{ text-align:center; opacity:.6; font-size:14px; margin-top:8px }
    .footer a{ color:inherit }

    /* Responsive tweaks */
    @media (max-width: 520px){
      .garden{ gap:18px; padding-top:30px }
      .tulip{ height:230px; width:76px }
      .leaf{ width:96px; height:68px }
      .bud{ width:66px; height:72px }
      .petal{ width:60px; height:70px }
    }
    .sun{ 
      width: 100px; height: 100px; position: absolute; top: 0; right: 0;
      background-color: yellow; border-bottom-left-radius: 100px; box-shadow: 0px 0px 20px yellow;
      z-index: -21;
    }
    .grass{ width: 200%; margin-top: 0; height: 50px; background-color: green; justify-self: flex-end; }



    /* body {
	background: #00b4ff;
	color: #333;
	font: 100% Arial, Sans Serif;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
} */

#background-wrap {
  height: 20px;
	z-index: -1;
}

/* KEYFRAMES */

@-webkit-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@-moz-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

/* ANIMATIONS */

.x1 {
	-webkit-animation: animateCloud 35s linear infinite;
	-moz-animation: animateCloud 35s linear infinite;
	animation: animateCloud 35s linear infinite;
	
	-webkit-transform: scale(0.65);
	-moz-transform: scale(0.65);
	transform: scale(0.65);
}

.x2 {
	-webkit-animation: animateCloud 20s linear infinite;
	-moz-animation: animateCloud 20s linear infinite;
	animation: animateCloud 20s linear infinite;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x3 {
	-webkit-animation: animateCloud 30s linear infinite;
	-moz-animation: animateCloud 30s linear infinite;
	animation: animateCloud 30s linear infinite;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.x4 {
	-webkit-animation: animateCloud 18s linear infinite;
	-moz-animation: animateCloud 18s linear infinite;
	animation: animateCloud 18s linear infinite;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.x5 {
	-webkit-animation: animateCloud 25s linear infinite;
	-moz-animation: animateCloud 25s linear infinite;
	animation: animateCloud 25s linear infinite;
	
	-webkit-transform: scale(0.55);
	-moz-transform: scale(0.55);
	transform: scale(0.55);
}

/* OBJECTS */

.cloud {
	background: #fff;
	background: -moz-linear-gradient(top,  #fff 5%, #f1f1f1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1));
	background: -webkit-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: -o-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: -ms-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
	
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	
	-webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

	height: calc( 12px * var(--mult));
	position: relative;
	width: calc( 35px * var(--mult));
}

.cloud:after, .cloud:before {
    background: #fff;
	content: '';
	position: absolute;
	z-indeX: -1;
}

.cloud:after {
	-webkit-border-radius: calc( 10px * var(--mult));
	-moz-border-radius: calc( 10px * var(--mult));
	border-radius:calc( 10px * var(--mult));

	height: calc( 10px * var(--mult));
	left: calc( 5px * var(--mult));
	top: calc( -5px * var(--mult));
	width: calc( 10px * var(--mult));
}

.cloud:before {
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;

	width: calc(18px * var(--mult));
	height: calc(18px * var(--mult));
	right: calc(5px * var(--mult));
	top: calc( -9px * var(--mult));
}