body {
  background-color: #f0f0f0;
  background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.sticky-note {
  background-color: #fefcde;
  background-size: 100% 1.2em;
  position: relative;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.sticky-note:hover {
  transform: scale(1.05) rotate(-2deg);
}

.sticky-note:hover::after {
  transform: rotate(-10deg) translate(2px, -2px);
}

@keyframes stickNote {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fallOff {
  0% {
    transform: rotate(var(--rotation)) translateY(0);
  }
  100% {
    transform: translateY(100vh) rotate(20deg);
    opacity: 0;
  }
}

.sticky-note-enter {
  animation: stickNote 0.5s ease-out forwards,
    curlCorner 0.3s 0.5s ease-out forwards;
}

.fall-off {
  animation: fallOff 1s ease-in forwards;
  pointer-events: none;
}

.page-tilt {
  transform: rotate(-1deg);
}

.sticky-note-container {
  perspective: 1000px;
}

.sticky-note-wrapper {
  perspective: 1000px;
  transition: transform 0.3s ease;
  transform-origin: center center;
  transform: rotate(2deg);
}

.sticky-note-wrapper:hover {
  transform: rotate(0) scale(1.05);
}

.sticky-note {
  transition: box-shadow 0.3s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

.sticky-note-wrapper:hover .sticky-note {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@keyframes wobble {
  0%,
  100% {
    transform: rotate(var(--rotation));
  }
  25% {
    transform: rotate(calc(var(--rotation) - 2deg));
  }
  75% {
    transform: rotate(calc(var(--rotation) + 2deg));
  }
}

.wobble {
  animation: wobble 0.5s ease-in-out;
}

.rotate-1 {
  --rotation: 4deg;
}
.rotate-2 {
  --rotation: 6deg;
}
.rotate-3 {
  --rotation: 8deg;
}
.rotate-4 {
  --rotation: 10deg;
}

.sticky-note-wrapper {
  transition: transform 0.3s ease;
}

.sticky-note-wrapper .sticky-note {
  transition: transform 0.3s ease;
}

.sticky-note-wrapper:hover .sticky-note,
.sticky-note-wrapper .sticky-note.wobble {
  transform: rotate(var(--rotation, 2deg));
}

.hand-drawn-bullet {
  position: relative;
  padding-left: 1.5em;
}

.hand-drawn-bullet::before {
  content: '';
  position: absolute;
  left: 0.2em;
  top: 0.5em;
  width: 0.4em;
  height: 0.4em;
  background-color: #4a5568;
  border: 1px solid rgba(74, 85, 104, 0.3);
  border-radius: 50%;
}

#easter-egg {
  background-color: #2ecc71;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transform: rotate(-5deg);
  animation: popIn 0.5s cubic-bezier(0.26, 0.53, 0.74, 1.48);
}

#easter-egg p {
  color: #ffffff;
  font-size: 1.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

#easter-egg::before {
  content: "🍃";
  font-size: 2rem;
  position: absolute;
  top: -1rem;
  left: -1rem;
  animation: float 3s ease-in-out infinite;
}

#easter-egg::after {
  content: "🍃";
  font-size: 2rem;
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  animation: float 3s ease-in-out infinite 1.5s;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-5deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(10deg);
  }
}

#easter-egg:hover {
  transform: rotate(5deg) scale(1.05);
  transition: transform 0.3s ease;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}