html {
  font-size: 16px; /* 1rem = 16px */
}


body {
    background-color:#FEF7E5;
    margin: 0;
    display: flex;
    flex-direction: column;  /* Stack SVGs vertically */
    justify-content: flex-start;  /* Align items from the top */
    align-items: center; /* Center horizontally */
    height: 100vh;
    overflow-y: auto;  /* Allow scrolling if necessary */
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.svg-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;   /* Full viewport width */
  height: 100vh;  /* Full viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-container svg {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
}

/* Animation */
@keyframes rotatePath {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating-path {
  transition: transform 1s ease; /* Optional if you want smooth transition */
}

/* Heart */

.svg-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;   /* Full viewport width */
  height: 100vh;  /* Full viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-container svg {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.1);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

/* Petals */

.svg-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;   /* Full viewport width */
  height: 100vh;  /* Full viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-container svg {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
}

@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Dash */

path {
  transition: visibility 0.1s ease-in-out, opacity 0.1s ease-in-out;
  opacity: 1;
}

path[style*="visibility: hidden"] {
  opacity: 0;
}

/* Carnival */

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

#carnival {
  transform-origin: center;
}

/* Blink */

#blink {
  transform-origin: center;
  animation: blink-animation 3s infinite ease-in-out;
}

@keyframes blink-animation {
  0%, 100% {
    /* Eyelid fully open (initial shape) */
    d: path("M1404.5 382.5C1404.5 382.5 1304.05 276 1133.5 276C955 276 861 382.5 861 382.5C861 382.5 938.14 267 1133.5 267C1328.86 267 1404.5 382.5 1404.5 382.5Z");
  }

  5%, 10% {
    /* Eyelid fully closed (down position for 0.15 seconds) */
    d: path("M1407.18 384.37C1407.18 384.37 1329 501.63 1133.56 501.63C938.12 501.63 859.94 384.37 859.94 384.37C859.94 384.37 938.12 267.1 1133.56 267.1C1329 267.1 1407.18 384.37 1407.18 384.37Z");
  }

  15%, 95% {
    /* Eyelid quickly back to open position (return immediately) */
    d: path("M1404.5 382.5C1404.5 382.5 1304.05 276 1133.5 276C955 276 861 382.5 861 382.5C861 382.5 938.14 267 1133.5 267C1328.86 267 1404.5 382.5 1404.5 382.5Z");
  }
}

/* Sway */

#sway {
  animation: sway-animation 2s ease-in-out infinite;
}

@keyframes sway-animation {
  0%, 100% {
    transform: rotate(-5deg);  /* Counterclockwise -5 degrees */
  }

  50% {
    transform: rotate(5deg);   /* Clockwise 5 degrees */
  }
}