Christmas patterns

<svg class="library" width="0" viewBox="0 0 100 100">
	<defs>
		<symbol id="rhombus">
			<path
				d="M69.044 69.538c-33.734 31.579-5.65 32.163-37.978-.79-32.328-32.952-32.926-5.518.808-37.098 33.734-31.579 5.65-32.162 37.978.79s32.926 5.519-.808 37.098z"
			/>
		</symbol>
		<symbol id="flake" x="0">
			<path
				d="m244.95 145.29h-7.9003l6.0512-6.2512c1.9401-2.0047 1.8882-5.202-0.11583-7.1414-2.0054-1.9407-5.2027-1.8889-7.1414 0.11583l-12.853 13.277h-9.3724l5.9542-6.2936c1.9172-2.0263 1.8283-5.2229-0.19798-7.1394-2.0269-1.9158-5.2222-1.8296-7.1394 0.19798l-12.523 13.235h-8.6552l11.183-12.131c0.90033-0.97644 1.3367-2.2128 1.3313-3.4438 6.7e-4 -0.031 5e-3 -0.0606 5e-3 -0.0916 0.0209-2.7892-2.2222-4.9468-5.0114-4.969l-15.462-0.13535 5.4916-5.4923h17.972c2.7899 0 5.0505-2.2606 5.0505-5.0505s-2.2606-5.0505-5.0505-5.0505h-7.8694l6.734-6.734h17.97c2.7899 0 5.0505-2.2606 5.0505-5.0505s-2.2606-5.0505-5.0505-5.0505h-7.8694l5.4175-5.4175c1.9724-1.9731 1.9724-5.1704 0-7.1428-1.9724-1.971-5.1697-1.9724-7.1428 0l-5.5852 5.5852-0.14277-8.8148c-0.0444-2.7609-2.297-5.0855-5.0478-5.0855h-0.0842c-2.7892 0-5.0128 2.4902-4.9677 5.2795l0.29899 18.564-6.6276 6.6276-0.23906-8.6593c-0.0768-2.7886-2.396-4.9663-5.1879-4.9091-2.7886 0.07677-4.9859 2.4007-4.9091 5.1879l0.50371 18.213-5.8 5.8-0.16229-15.09c0.17104-1.404-0.24108-2.8714-1.2653-4.0013-1.8741-2.068-5.1791-2.2249-7.2458-0.35354l-12.853 11.54v-9.4592l13.347-12.522c2.0263-1.9172 2.171-5.1138 0.25387-7.1401-1.9178-2.0269-5.1986-2.1152-7.2236-0.19798l-6.3778 5.9542v-9.3731l13.389-12.853c2.004-1.9401 2.1118-5.1374 0.17172-7.1414-1.9387-2.0034-5.2202-2.0572-7.2256-0.11582l-6.3354 6.0512v-7.5636c0-2.7899-2.2606-5.0505-5.0505-5.0505s-5.0505 2.2606-5.0505 5.0505v7.0896l-5.4074-5.5192c-1.9724-1.9731-5.1138-1.9724-7.0862-6.73e-4 -1.9731 1.9724-2.0572 5.1704-0.0848 7.1421l12.578 12.663v9.2835l-5.4074-5.5192c-1.9724-1.9731-5.1138-1.9724-7.0862-6.73e-4 -1.9731 1.9724-2.0572 5.1704-0.0848 7.1421l12.578 12.663v8.7677l-11.253-10.989c-2.0061-1.9401-5.1475-1.8862-7.0848 0.12054-1.1165 1.1542-1.5401 2.7037-1.3434 4.1798l-0.47407 14.697-5.433-5.3354v-18.001c0-2.7899-2.2606-5.0505-5.0505-5.0505s-5.0505 2.2606-5.0505 5.0505v7.899l-6.734-6.734v-18c0-2.7899-2.2606-5.0505-5.0505-5.0505s-5.0505 2.2606-5.0505 5.0505v7.899l-5.3037-5.4162c-1.9724-1.971-5.1131-1.9724-7.0869 0-1.9724 1.9731-1.9441 5.1704 0.02828 7.1428l5.4761 5.462-8.5677 0.19663c-2.7892 0.04512-5.0094 2.4801-4.9643 5.268 0.04444 2.7609 2.3003 5.0364 5.0519 5.0364h0.0835l18.502-0.40741 6.6007 6.6007-8.6593 0.23973c-2.7886 0.0768-4.9859 2.4-4.9091 5.1879 0.07542 2.7407 2.3212 4.9111 5.0458 4.9111 0.04714 0 0.09495-6.7e-4 0.14209-2e-3l18.213-0.50437 6.3522 6.3529-15.651 0.35017c-1.3825 0.0384-3.0754 0.39596-4.2249 1.4896-2.0222 1.9219-2.103 5.1185-0.18114 7.1401l0.1037 0.10909c0.10774 0.12525 0.2202 0.2431 0.33872 0.35623l10.717 11.275h-9.0195l-12.523-13.235c-1.9178-2.0276-5.1145-2.1152-7.1401-0.19798-2.0263 1.9172-2.1152 5.1138-0.19798 7.1394l5.9542 6.2936h-9.3724l-12.853-13.277c-1.9387-2.004-5.136-2.0572-7.1414-0.11582-2.004 1.9401-2.0559 5.1374-0.11582 7.1414l6.0512 6.2512h-7.5636c-2.7899 0-5.0505 2.2606-5.0505 5.0505s2.2606 5.0505 5.0505 5.0505h7.0896l-5.5192 5.5192c-1.9731 1.9724-1.9731 5.1704-6.73e-4 7.1421 0.98653 0.98653 2.2788 1.4795 3.5717 1.4795 1.2923 0 2.5852-0.49293 3.571-1.4788l12.663-12.661h9.2835l-5.5192 5.5192c-1.9731 1.9724-1.9731 5.1704-6.73e-4 7.1421 0.98653 0.98654 2.2788 1.4795 3.5717 1.4795 1.2923 0 2.5852-0.49293 3.571-1.4788l12.663-12.662h8.8808l-10.945 11.379c-1.9333 2.0101-1.8714 5.2074 0.13872 7.1407 0.93737 0.90101 2.1306 1.3636 3.3347 1.4027 0.0256 1e-3 0.0492 5e-3 0.0747 6e-3l16.12 0.41886-6.3212 6.3212-18.213-0.50437c-2.7919-0.0572-5.1118 2.1205-5.1886 4.9084-0.07744 2.7886 2.1205 5.1118 4.9084 5.1886l8.6599 0.23974-6.7744 6.7744-18.33-0.17845h-0.0835c-2.7515 0-5.004 2.0572-5.0485 4.8175-0.04512 2.7892 2.1785 4.936 4.9677 4.9818l8.7441 0.12795-5.3933 5.3933c-1.9724 1.9731-1.9724 5.1704 0 7.1428 0.98653 0.98586 2.2795 1.4788 3.5717 1.4788s2.4727-0.49293 3.4593-1.4788l4.6316-4.7441v7.8707c0 2.7899 2.2606 5.0505 5.0505 5.0505s5.0505-2.2606 5.0505-5.0505v-17.97l6.734-6.734v7.8694c0 2.7899 2.2606 5.0505 5.0505 5.0505s5.0505-2.2606 5.0505-5.0505v-17.97l6.5259-6.4141 0.39865 15.296c-0.12592 1.4209 0.37374 2.9986 1.4519 4.0963 0.98855 1.0074 2.3239 1.6249 3.6316 1.6249h0.0317c1.5232 0.0256 2.895-1.0162 3.7199-1.9784l10.502-10.434v8.2088l-12.55 12.663c-1.9724 1.9724-1.9158 5.1704 0.0566 7.1421 0.98586 0.98586 2.3064 1.4788 3.5986 1.4788 1.2923 0 2.4869-0.49293 3.4734-1.4795l5.4216-5.5192v9.2835l-12.55 12.663c-1.9724 1.9724-1.9158 5.1704 0.0566 7.1421 0.98586 0.98586 2.3064 1.4788 3.5987 1.4788 1.2922 0 2.4869-0.49293 3.4734-1.4795l5.4216-5.5192v7.4276c0 2.7899 2.2606 5.0505 5.0505 5.0505s5.0505-2.2606 5.0505-5.0505v-7.9003l6.3636 6.0512c0.98114 0.94949 2.303 1.4216 3.5684 1.4216 1.3199 0 2.6673-0.51448 3.6572-1.5374 1.9401-2.0047 1.7899-5.202-0.21414-7.1414l-13.375-12.853v-9.3731l6.4054 5.9542c0.97643 0.9239 2.2801 1.3818 3.5266 1.3818 1.3394 0 2.7037-0.5293 3.6976-1.5798 1.9172-2.0263 1.73-5.2229-0.29629-7.1394l-13.333-12.522v-8.8168l11.672 10.998c1.2801 1.1098 2.5077 1.9784 4.204 1.9784h0.035c2.7731 0 5.031-2.3044 5.0498-5.0822l0.11179-16.531 6.4949 6.495-0.50438 18.213c-0.0774 2.7886 2.1199 5.1118 4.9084 5.1886 0.0478 1e-3 0.0956 2e-3 0.14277 2e-3 2.7246 0 4.9704-2.1704 5.0458-4.9104l0.23973-8.6599 6.6296 6.6296-0.30168 18.457c-0.0451 2.7892 2.1784 5.1145 4.9677 5.1145h0.0835c2.7515 0 5.004-2.1192 5.0485-4.8795l0.14276-8.7508 5.3468 5.3468c0.98654 0.98586 2.2795 1.4788 3.5717 1.4788 1.2923 0 2.5852-0.49292 3.5717-1.4788 1.9724-1.9731 1.9724-5.1704 0-7.1428l-4.7758-4.7758h7.899c2.7899 0 5.0505-2.2606 5.0505-5.0505s-2.2606-5.0505-5.0505-5.0505h-18l-6.734-6.734h7.899c2.7899 0 5.0505-2.2606 5.0505-5.0505s-2.2606-5.0505-5.0505-5.0505h-18l-6.1158-6.1158 15.484-0.6761c1.3091-0.0545 2.6337-0.65252 3.4498-1.4492 1.996-1.9488 2.0337-5.1461 0.0855-7.1414l-10.62-10.88h8.1488l12.663 12.663c0.98586 0.98586 2.2788 1.4788 3.571 1.4788s2.5852-0.49293 3.5717-1.4795c1.9724-1.9724 1.9724-5.1704-6.8e-4 -7.1421l-5.5192-5.5192h9.2835l12.663 12.663c0.98586 0.98585 2.2788 1.4788 3.5711 1.4788 1.2922 0 2.5852-0.49293 3.5717-1.4795 1.9724-1.9724 1.9724-5.1704-6.7e-4 -7.1421l-5.5192-5.5192h7.4249c2.7899 0 5.0505-2.2606 5.0505-5.0505s-2.2606-5.0519-5.0505-5.0519zm-117.27-10.914 10.914 10.914h-15.681l-9.8586-10.37zm-0.22896 31.515-14.298-0.37172 9.7428-10.129h15.055zm16.943 11.418-9.5448 9.4808-0.36565-13.813 9.9111-9.967v14.299zm0-40.281-10.291-10.403 0.28957-13.534 10.001 9.7232v14.213zm10.101-13.987 11.267-10.102 0.099 14.374-11.366 11.31zm10.827 64.032-10.827-9.9737v-15.684l10.871 10.815zm8.1185-21.223-10.459-10.459h14.427l9.6323 9.8646zm3.8815-20.56h-14.985l10.844-10.844 14.102 0.0391z"
			/>
		</symbol>
		<symbol id="cocktail">
			<path
				d="m23.301 6.4824 24.699 43.313v46.205h4v-46.473l24.99-42.76-53.689-0.28516z"
				stroke-width=".7303"
			/>
			<rect x="35" y="95.562" width="30" height="3" />
		</symbol>
	</defs>
</svg>
<div class="container">
	<div class="candy-cane"></div>
	<svg class="rhombus-green" viewBox="0 0 100 100">
		<use href="#rhombus" />
	</svg>
	<div class="stripes-horizontal-green-red"></div>
	<div class="white-ball"></div>
	<svg class="snowflake" viewBox="0 0 300 300">
		<use class="flake" href="#flake" x="0" />
	</svg>
	<svg class="rhombus-red" viewBox="0 0 100 100">
		<use href="#rhombus" />
		<use href="#rhombus" />
		<use href="#rhombus" />
	</svg>
	<svg class="polka-dots" viewBox="0 0 1200 100">
		<defs>
			<pattern
				id="polka"
				x="0"
				y="0"
				width="100"
				height="100"
				patternUnits="userSpaceOnUse"
			>
				<circle fill="white" cx="50" cy="50" r="20"></circle>
			</pattern>
		</defs>
		<rect width="100%" height="100%" fill="var(--cgreener)"></rect>
		<rect width="100%" height="100%" fill="url(#polka)"></rect>
	</svg>
	<svg class="pacman" viewBox="0 0 100 100">
		<rect width="100%" height="100%" fill="var(--cgreen)" />
		<circle cx="50" cy="50" r="45" fill="var(--cyellow)" />
		<path
			class="mouth"
			d="m96.57 17.359a68 45 0 0 1 21.129 34.548 68 45 0 0 1-25.474 33.24l-42.465-35.147z"
			fill="var(--cgreen)"
		/>
	</svg>
	<div class="pudding"></div>
	<svg class="mistletoe" viewBox="0 0 100 100">
		<g class="plant">
			<path
				class="leave"
				d="m13.536 18.459c-3.0312-2.3789 1.6952-8.0058 4.5001-10.648 1.644-1.5485 4.1376-2.0619 6.3873-2.2598 5.1238-0.45088 10.309 1.0058 15.222 2.5272 5.0642 1.568 14.416 6.7167 14.416 6.7167 3.4047 5.2028 2.8407 11.059 3.7382 16.847-17.092 17.691-26.771-0.10736-44.264-13.183z"
				fill="var(--cgreen)"
			/>
			<circle
				cx="32.173"
				cy="50.339"
				r="12.5"
				fill="white"
				stroke-width="2.7855"
			/>
			<path
				d="m89.754-12.752c-13.662 15.711-32.05 44.561-39.25 59.887-8.8132 18.758-12.713 49.803-13.319 74.054"
				fill="none"
				stroke="var(--cbrown)"
				stroke-width="6"
			/>
			<path
				class="leave"
				d="m54.236 41.001s18.521-15.308 29.013-13.435c2.7729 0.49517 3.3861 4.8531 5.9653 5.9854 0.8261 0.36266 2.2077-0.64416 2.7044 0.10897 0.86031 1.3043-0.77577 3.0988-1.6705 4.3798-5.1675 7.3987-20.429 17.767-20.429 17.767l-9.5331 7.9952c-6.1729 2.0014-9.6022 2.3457-15.091-0.35 2.2032-10.647 2.2417-14.794 9.0406-22.452z"
				fill="var(--cgreen)"
			/>
		</g>
	</svg>
	<div class="stripes-vertical-green-white"></div>
	<div class="stripes-diagonal-green-greener"></div>
	<svg class="star" viewBox="0 0 512 512">
		<path
			d="m256.51 94.585-52.816 105.91-117.19 16.534 84.407 82.961-20.489 116.56 104.98-54.64 104.53 55.507-19.524-116.72 85.091-82.259-117.05-17.503z"
			fill="var(--cyellow)"
		/>
	</svg>
	<div class="dancing-balls"></div>
	<div class="dancing-balls dancing-balls-reverse"></div>
	<svg
		class="lips"
		viewBox="0 0 100 100"
		preserveAspectRatio="xMaxYMid meet"
	>
		<path
			d="m2.443 52.865h95.113c-14.481 22.914-33.451 22.916-47.556 22.916-14.106 0-33.075-2e-3 -47.557-22.916zm64.741-28.646c-11.977 0-17.245 7.9-17.245 7.9s-4.996-7.9-17.125-7.9c-8.619 0-17.605 4.007-32.812 22.917h99.998c-15.205-18.909-24.194-22.917-32.816-22.917z"
		/>
		<ellipse cx="50" cy="50" rx="23.748" ry="11.863" fill="var(--cgreen)" />
	</svg>
	<svg class="trees" viewBox="0 0 600 100">
		<defs>
			<pattern
				id="tree"
				x="0"
				y="0"
				width="100"
				height="100"
				patternUnits="userSpaceOnUse"
			>
				<path d="m0 100 50-100 50 100z" />
			</pattern>
		</defs>
		<rect width="100%" height="100%" fill="url(#tree)"></rect>
	</svg>
	<div class="open-present"></div>
	<svg class="snowflake2" viewBox="0 0 600 300">
		<use class="flake" href="#flake" x="20" />
		<use class="flake" href="#flake" x="200" y="300" />
		<use class="flake" href="#flake" x="-200" y="-200" />
		<use class="flake" href="#flake" x="-100" y="-300" />
		<use class="flake" href="#flake" x="400" y="-350" />
		<use class="flake" href="#flake" x="600" y="400" />
		<use class="flake" href="#flake" x="500" y="100" />
		<use class="flake" href="#flake" x="100" y="-500" />
	</svg>
	<svg
		class="cocktails"
		version="1.1"
		viewBox="0 0 400 100"
		xmlns="http://www.w3.org/2000/svg"
	>
		<use href="#cocktail" />
		<use x="33.3%" href="#cocktail" />
		<use x="66.6%" href="#cocktail" />
	</svg>
	<svg class="furry-lining" viewBox="0 0 600 100">
		<defs>
			<pattern
				id="furry"
				x="0"
				y="0"
				width="100"
				height="100"
				patternUnits="userSpaceOnUse"
			>
				<rect height="60" width="100" fill="white" />
				<circle fill="white" cx="0" cy="50" r="20" />
				<circle fill="white" cx="20" cy="50" r="20" />
				<circle fill="white" cx="40" cy="50" r="20" />
				<circle fill="white" cx="60" cy="50" r="20" />
				<circle fill="white" cx="80" cy="50" r="20" />
				<circle fill="white" cx="100" cy="50" r="20" />
			</pattern>
		</defs>
		<rect width="100%" height="100%" fill="red"></rect>
		<rect width="100%" height="100%" fill="url(#furry)"></rect>
	</svg>
</div>

:root {
  --cgreen: hsl(157, 100%, 33%);
  --cred: hsl(355, 80%, 50%);
  --cyellow: hsl(60, 80%, 60%);
  --cbrown: hsl(0, 19%, 35%);

  --cgreener: hsl(120, 80%, 25%);
  --credder: hsl(0, 80%, 50%);
  --cbrowner: hsl(0, 19%, 21%);

  --clightred: hsl(355, 80%, 70%);
  --clightestred: hsl(355, 90%, 90%);
  --clightgreen: hsl(157, 60%, 73%);

  --z-mid: 50;
  --z-high: 100;
  --z-higher: 200;
  --z-top: 300;
}

body {
  height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;

  background-color: var(--cred);
}

.library {
  display: none;
}

.container {
  --frame-width: 1.2rem;
  --width: 300px;

  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
  grid-template-rows: repeat(7, 50px) 1fr;

  width: var(--width);
  height: calc(var(--width) * 1.5);

  margin: 1rem 0;
  overflow: hidden;
  background-color: white;

  border-style: solid;
  border-width: var(--frame-width);
  border-block-start-color: hsl(0, 0%, 95%);
  border-block-end-color: hsl(0, 0%, 86%);
  border-inline-start-color: hsl(0, 0%, 88%);
  border-inline-end-color: hsl(0, 0%, 90%);

  box-shadow: 0 14px 8px -4px rgba(0, 0, 0, 0.5),
    8px 24px 10px -4px rgba(0, 0, 0, 0.2), 0 0 4px 2px rgba(0, 0, 0, 0.2),
    0 0 12px 4px rgba(0, 0, 0, 0.1);
}

.candy-cane {
  --size: 6%;

  grid-row: 1 / span 2;

  background: repeating-linear-gradient(
    -53deg,
    white 0 var(--size),
    var(--cred) var(--size) calc(var(--size) * 2)
  );

  height: 200%;

  animation: rolling-cane 1s linear infinite;
}

@keyframes rolling-cane {
  to {
    transform: translateY(-50%);
  }
}

.stripes-horizontal-green-red {
  --size: 10%;

  background: repeating-linear-gradient(
    0,
    var(--cgreen) 0 var(--size),
    var(--cred) var(--size) calc(var(--size) * 2)
  );

  height: 160%;

  grid-row: 1 / span 2;
  grid-column: 3 / span 2;

  animation: rolling-stripe 0.4s linear infinite;
}

@keyframes rolling-stripe {
  to {
    transform: translateY(-20%);
  }
}

.white-ball {
  grid-column: 2;
  grid-row: 1;

  background-color: red;
  position: relative;
}

.white-ball::after {
  content: "";
  --size: 35%;
  display: block;
  position: relative;
  top: calc((100% - var(--size)) / 2);
  left: calc((100% - var(--size)) / 2);
  border-radius: 50%;

  background-color: whitesmoke;
  width: var(--size);
  height: var(--size);

  animation: expanding 0.75s infinite alternate;
  animation-timing-function: ease-in-out;
  transform-origin: 50%;
}

@keyframes expanding {
  to {
    transform: scale(2);
  }
}

.rhombus-green {
  grid-row: 2;
  grid-column: 2;
  fill: var(--cgreener);
  animation: spinning 2s linear infinite;
  transform-origin: center;
}

@keyframes spinning {
  to {
    transform: rotate(360deg);
  }
}

.snowflake {
  background-color: var(--cred);
  grid-row: 2;
  grid-column: 5;
}

.flake {
  fill: white;

  transform-origin: 50%;
  animation: drift 2s infinite;
}

@keyframes drift {
  from {
    transform: scale(0.7) translate(0px, -100px);
  }
  20% {
    transform: scale(0.7) translate(-10px, 0px);
  }

  40% {
    transform: scale(0.7) translate(0px, 100px);
  }

  60% {
    transform: scale(0.7) translate(10px, 200px);
  }

  80% {
    transform: scale(0.7) translate(0px, 300px);
  }

  100% {
    transform: scale(0.7) translate(-10px, 400px);
  }
}

.star {
  grid-row: 5;
  grid-column: 4;
  background-color: var(--cgreen);
  z-index: var(--z-mid);
}

.star path {
  transform-origin: center;
  transform: scale(0);

  animation: starry 1s infinite;
}

@keyframes starry {
  to {
    transform: scale(1) rotate(1turn);
  }
}

.dancing-balls {
  grid-row: 5;
  grid-column: 5;
  background-color: white;
  position: relative;
}

.dancing-balls::before,
.dancing-balls::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  width: 65%;
  height: 65%;
  left: 25%;
  top: 17.5%;
  background-color: var(--cred);

  transform: translateX(-200%);

  animation: dancing-ball 1.25s infinite;
  animation-timing-function: cubic-bezier(0.2, 0.67, 0.94, 0.6);
}

@keyframes dancing-ball {
  to {
    transform: translateX(200%);
  }
}

.dancing-balls::after {
  animation-delay: 0.6s;
}

.dancing-balls-reverse {
  grid-row: 6;
  grid-column: 5;
}

@keyframes dancing-ball-reverse {
  to {
    transform: translateX(-200%);
  }
}

.dancing-balls-reverse::before,
.dancing-balls-reverse::after {
  transform: translateX(200%);
  animation: dancing-ball-reverse 1.25s infinite;
  animation-timing-function: cubic-bezier(0.2, 0.67, 0.94, 0.6);
}

.dancing-balls-reverse::after {
  animation-delay: 0.6s;
}

.polka-dots {
  z-index: var(--z-mid);
  grid-row: 3;
  grid-column: 1 / -1;

  width: 200%;
  height: 100%;
  transform: translateX(-50%);
  animation: polka-move 1.5s infinite linear;
}

@keyframes polka-move {
  to {
    transform: translateX(0%);
  }
}

.pacman {
  grid-row: 4;
  grid-column: 1;
  z-index: var(--z-high);
  align-self: center;
}

.pacman .mouth {
  animation: chew 0.25s linear infinite alternate;
  transform-origin: 0 50%;
}

@keyframes chew {
  to {
    transform: scaleY(0.5);
  }
}

.pudding {
  grid-row: 4;
  grid-column: 2 / -1;
  background-color: var(--cbrown);
  z-index: var(--z-mid);

  width: 200%;
  animation: gobble-pudding 1.25s infinite linear;
}

@keyframes gobble-pudding {
  to {
    transform: translateX(-40%);
  }
}

/* https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/ */
.pudding::after {
  content: "";
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  --mask: radial-gradient(10.2px at 50% calc(100% - 12px), #000 99%, #0000 101%)
      calc(50% - 20px) 0/40px 100%,
    radial-gradient(10.2px at 50% calc(100% + 2px), #0000 99%, #000 101%) 50%
      calc(100% - 10px) / 40px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);

  background-color: white;
}

.mistletoe {
  grid-row: 5;
  grid-column: 1;
  background-color: var(--cred);
  z-index: 99;
}

.mistletoe .plant {
  transform-origin: 50% 50%;
  animation: jiggle 0.5s infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: ease-in-out;
}

@keyframes jiggle {
  to {
    transform: rotate(8deg);
  }
}

.stripes-vertical-green-white {
  --size: 0.4rem;

  background-image: repeating-linear-gradient(
    90deg,
    var(--cgreen) 0 var(--size),
    white var(--size) calc(var(--size) * 2)
  );

  grid-row: 5;
  grid-column: 1 / span 2;
  animation: stripes-vertical-green-white-move 0.5s infinite;
  animation-duration: linear;
}

@keyframes stripes-vertical-green-white-move {
  to {
    transform: translateX(50%);
  }
}

.stripes-diagonal-green-greener {
  --size: 0.75rem;
  background: repeating-linear-gradient(
    43deg,
    var(--cgreen) 0 var(--size),
    var(--cgreener) var(--size) calc(var(--size) * 2)
  );

  height: 400%;

  animation-name: stripes-diagonal-green-greener-move;
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes stripes-diagonal-green-greener-move {
  to {
    transform: translateY(-33.3%);
  }
}

.rhombus-red {
  grid-row: 1;
  grid-column: 5;
}

.rhombus-red use {
  transform-origin: center;
  animation-name: rhombus-red-grow;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}

.rhombus-red use:nth-child(1) {
  fill: var(--cred);
}

.rhombus-red use:nth-child(2) {
  fill: var(--clightred);
  transform-origin: center;
  transform: scale(0.5);
  animation-delay: 0.1s;
}

.rhombus-red use:nth-child(3) {
  fill: var(--clightestred);
  transform-origin: center;
  transform: scale(0.1);
  animation-delay: 0.2s;
}

@keyframes rhombus-red-grow {
  to {
    transform: scale(5);
  }
}

.lips {
  grid-row: 6 / span 2;
  grid-column: 1 / span 2;
  background-color: var(--cgreen);
  fill: var(--credder);
  z-index: var(--z-high);
}

.lips path,
.lips ellipse {
  transform-origin: center;
  transform: scale(0.25);
  animation: kiss 1.5s infinite;
  animation-timing-function: ease-in-out;
}

@keyframes kiss {
  to {
    transform: scale(5);
  }
}

.trees {
  grid-row: 7;
  grid-column: 3 / span 2;
  fill: var(--cgreener);
  background-color: var(--clightgreen);
  width: 300%;
  z-index: var(--z-mid);
  animation: trees-move 1s infinite;
  animation-timing-function: linear;
}

@keyframes trees-move {
  to {
    transform: translateX(-50%);
  }
}

.open-present {
  grid-row: 6;
  grid-column: 4;
  background-color: var(--clightestred);
  z-index: var(--z-high);

  perspective: 400px;
  perspective-origin: center;
  position: relative;
}

.open-present::after,
.open-present::before {
  content: "";
  position: absolute;
  width: 30%;
  height: 30%;
  top: 35%;
  left: 35%;
}

.open-present::after {
  transform: translateY(10%) rotateX(-180deg);
  transform-origin: bottom center;
  background-image: linear-gradient(
      90deg,
      transparent 0 40%,
      var(--cgreen) 40% 60%,
      transparent 60% 100%
    ),
    linear-gradient(
      var(--cred) 0 40%,
      var(--cgreen) 40% 60%,
      var(--cred) 60% 100%
    );

  animation: open 1.5s infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.open-present::before {
  background-color: var(--clightred);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) inset,
    0 0 10px rgba(0, 0, 0, 0.1) inset;
}

@keyframes open {
  to {
    transform: translate(0) rotateX(0);
  }
}

.snowflake2 {
  grid-row: 8;
  grid-column: 1 / span 2;
  background-color: var(--cgreener);
  z-index: var(--z-high);
  height: 100%;
}

.snowflake2 .flake {
  fill: white;
}

.snowflake2 .flake:nth-child(odd) {
  animation-name: drift2;
}

.snowflake2 .flake:nth-child(even) {
  animation-name: drift3;
}

@keyframes drift2 {
  from {
    transform: scale(0.7) translate(0px, -200px);
  }
  20% {
    transform: scale(0.7) translate(-10px, 0px);
  }

  40% {
    transform: scale(0.7) translate(0px, 150px);
  }

  60% {
    transform: scale(0.7) translate(10px, 350px);
  }

  80% {
    transform: scale(0.7) translate(0px, 500px);
  }

  100% {
    transform: scale(0.7) translate(-10px, 700px);
  }
}

@keyframes drift3 {
  from {
    transform: scale(0.5) translate(0px, -200px);
  }
  20% {
    transform: scale(0.5) translate(-10px, 0px);
  }

  40% {
    transform: scale(0.5) translate(0px, 250px);
  }

  60% {
    transform: scale(0.5) translate(10px, 500px);
  }

  80% {
    transform: scale(0.5) translate(0px, 700px);
  }

  100% {
    transform: scale(0.5) translate(-10px, 900px);
  }
}

.cocktails {
  grid-row: 8;
  grid-column: 3 / span 3;
  background-color: var(--cred);
  fill: var(--cgreener);
  z-index: var(--z-mid);
}

.cocktails use:nth-child(1),
.cocktails use:nth-child(3) {
  animation: cocktails 2s infinite;
  transform-origin: center;
}

.cocktails use:nth-child(2) {
  animation: cocktails-reverse 2s infinite;
  transform-origin: center;
}

@keyframes cocktails {
  to {
    transform: skewX(90deg);
  }
}

@keyframes cocktails-reverse {
  to {
    transform: skewX(-90deg);
  }
}

.furry-lining {
  grid-row: 9;
  grid-column: 1 / -1;
}