/* Haygoodies Themes: the kawaii sky, fixed behind the whole site while the Kawaii Sky skin is on.
   Day: sun with a face, rainbow, clouds, birds and butterflies. Night: moon, twinkling and shooting stars. */
html { --ks-sky1: #8fd3ff; --ks-sky2: #cdeeff; --ks-sky3: #ffe1f0; --ks-grass1: #7fd36a; --ks-grass2: #58b84f; }
html.hgt-night { --ks-sky1: #120f33; --ks-sky2: #2a1f5c; --ks-sky3: #5b3a7e; --ks-grass1: #2f6b4a; --ks-grass2: #1f4d37; }
html.hgt-night .hgt-skin { --hgt-glass: rgba(250, 244, 255, .86); --hgt-glass2: rgba(252, 248, 255, .94); --hgt-foot: rgba(250, 244, 255, .9); }
html.hgt-scene-on { background: var(--ks-sky1) !important; }
html.hgt-scene-on body { background: transparent !important; }

.hgt-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ks-grad { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ks-sky1) 0%, var(--ks-sky2) 55%, var(--ks-sky3) 100%); transition: background .8s; }
.ks-day-only, .ks-night-only { transition: opacity .9s ease; }
html.hgt-night .ks-day-only { opacity: 0; }
html:not(.hgt-night) .ks-night-only { opacity: 0; }

.ks-sun { position: absolute; top: clamp(150px, 20vh, 230px); right: 8vw; width: min(20vw, 150px); aspect-ratio: 1; }
.ks-sun-core { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fff6b8, #ffd34d 60%, #ffb92e); box-shadow: 0 0 40px 12px rgba(255, 214, 77, .55); }
.ks-sun-face { position: absolute; inset: 22%; }
.ks-sun-face i { position: absolute; top: 44%; width: 9%; height: 11%; background: #6b3b1f; border-radius: 50%; }
.ks-sun-face i:nth-child(1) { left: 30%; } .ks-sun-face i:nth-child(2) { right: 30%; }
.ks-sun-face b { position: absolute; left: 39%; top: 58%; width: 22%; height: 11%; border: 3px solid #6b3b1f; border-top: 0; border-radius: 0 0 40px 40px; }
.ks-sun-face s { position: absolute; top: 56%; width: 14%; height: 8%; background: #ff9db9; border-radius: 50%; opacity: .8; }
.ks-sun-face s:nth-of-type(1) { left: 14%; } .ks-sun-face s:nth-of-type(2) { right: 14%; }
.ks-rays { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 220, 90, .55) 0 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(circle, transparent 34%, #000 35%, #000 62%, transparent 64%); mask: radial-gradient(circle, transparent 34%, #000 35%, #000 62%, transparent 64%); animation: ks-spin 40s linear infinite; }

.ks-rainbow { position: absolute; left: -12vw; bottom: 8vh; width: 70vw; max-width: 900px; aspect-ratio: 2 / 1; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .5;
	background: radial-gradient(circle at 50% 100%, transparent 54%, #c9a7ff 54%, #c9a7ff 58%, #8fc8ff 58%, #8fc8ff 62%, #8fe3cf 62%, #8fe3cf 66%, #ffe58a 66%, #ffe58a 70%, #ffc28a 70%, #ffc28a 74%, #ff9fbe 74%, #ff9fbe 78%, transparent 78%);
	-webkit-mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }

.ks-cloud { position: absolute; width: 180px; height: 60px; background: #fff; border-radius: 60px; opacity: .92; filter: drop-shadow(0 6px 0 rgba(160, 190, 230, .35)); animation: ks-drift linear infinite; }
.ks-cloud::before, .ks-cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.ks-cloud::before { width: 80px; height: 80px; left: 28px; top: -40px; }
.ks-cloud::after { width: 64px; height: 64px; left: 88px; top: -28px; }
html.hgt-night .ks-cloud { background: #4b3b86; opacity: .55; filter: none; }
html.hgt-night .ks-cloud::before, html.hgt-night .ks-cloud::after { background: #4b3b86; }

.ks-moon { position: absolute; top: clamp(150px, 20vh, 230px); right: 10vw; width: min(14vw, 110px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe6, #ffe7a3 70%); box-shadow: 0 0 50px 14px rgba(255, 236, 170, .35); }
.ks-moon::before { content: ""; position: absolute; width: 18%; height: 18%; border-radius: 50%; background: rgba(230, 200, 120, .45); top: 52%; left: 24%; box-shadow: 30px -24px 0 -2px rgba(230, 200, 120, .35), 18px 14px 0 -5px rgba(230, 200, 120, .4); }
.ks-moon-face { position: absolute; left: 36%; top: 40%; width: 34%; height: 18%; }
.ks-moon-face::before, .ks-moon-face::after { content: ""; position: absolute; top: 0; width: 26%; height: 70%; border: 3px solid #8a6a3a; border-top: 0; border-radius: 0 0 20px 20px; }
.ks-moon-face::before { left: 0; } .ks-moon-face::after { right: 0; }
.ks-stars { position: absolute; inset: 0; width: 100%; height: 100%; }

.ks-flyer { position: absolute; left: 0; top: 0; will-change: transform; }
.ks-bird { width: 58px; height: 43px; animation: ks-fly linear forwards; }
.ks-face { display: block; width: 100%; height: 100%; }
.ks-rtl .ks-face { transform: scaleX(-1); }
.ks-bird .ks-face > * { display: block; width: 100%; height: 100%; animation: ks-bob .6s ease-in-out infinite alternate; }
.ks-bird .ks-wing { transform-origin: 20px 16px; animation: ks-flap .22s ease-in-out infinite alternate; }
.ks-butterfly { width: 40px; height: 35px; animation: ks-flutterpath ease-in-out forwards; }
.ks-butterfly .ks-bw { transform-origin: 15px 13px; animation: ks-bflap .18s ease-in-out infinite alternate; }

/* the meadow along the top of the footer */
.ks-meadow { position: relative; height: 150px; margin-top: 40px; overflow: hidden; pointer-events: none; }
.ks-meadow svg.ks-grass { position: absolute; left: 0; bottom: 0; width: 100%; height: 110px; }
.ks-flower { position: absolute; bottom: 36px; width: 34px; transform-origin: 50% 100%; animation: ks-sway 3.2s ease-in-out infinite alternate; }
.ks-flower .ks-stem { position: absolute; left: 15px; bottom: -36px; width: 4px; height: 52px; background: var(--ks-grass2); border-radius: 3px; }
.ks-flower .ks-petals { position: relative; width: 34px; height: 34px; }
.ks-flower .ks-petals i { position: absolute; width: 14px; height: 14px; border-radius: 50%; left: 10px; top: 10px; }
.ks-flower .ks-petals i:nth-child(1) { transform: translate(0, -9px); } .ks-flower .ks-petals i:nth-child(2) { transform: translate(9px, -2px); }
.ks-flower .ks-petals i:nth-child(3) { transform: translate(5px, 8px); } .ks-flower .ks-petals i:nth-child(4) { transform: translate(-5px, 8px); }
.ks-flower .ks-petals i:nth-child(5) { transform: translate(-9px, -2px); }
.ks-flower .ks-petals b { position: absolute; left: 11px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: #ffd45e; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
html.hgt-night .ks-flower .ks-petals i { filter: brightness(.8) saturate(.8); }
.ks-bee { position: absolute; left: 0; bottom: 70px; width: 30px; height: 24px; animation: ks-beego 24s linear infinite; }
.ks-bee.ks-rtl { animation-direction: reverse; }
.ks-bee .ks-face > * { display: block; width: 100%; height: 100%; animation: ks-hover 1.3s ease-in-out infinite alternate; }
.ks-bee .ks-bwing { transform-origin: 14px 9px; animation: ks-bflap .08s linear infinite alternate; }
.ks-firefly { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff9a8; box-shadow: 0 0 10px 4px rgba(255, 245, 140, .7); animation: ks-firefly 6s ease-in-out infinite; }
html:not(.hgt-night) .ks-firefly { display: none; }
html.hgt-night .ks-bee { display: none; }

/* the sun / moon switch */
.hgt-switch { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 9990; display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255, 255, 255, .92); border: 3px solid #3b2740; border-radius: 999px; padding: 5px 12px 5px 6px; box-shadow: 4px 4px 0 #c9b6ff;
	font: 600 14px/1 "Fredoka", "Nunito", system-ui, sans-serif; color: #3b2740; }
html.hgt-night .hgt-switch { background: rgba(37, 25, 70, .92); border-color: #f6d6ff; box-shadow: 4px 4px 0 #7b5cd6; color: #fdf0ff; }
.ks-toggle { position: relative; width: 74px; height: 38px; border-radius: 999px; border: 3px solid currentColor; cursor: pointer; padding: 0; flex: none;
	background: linear-gradient(90deg, #8fd3ff, #ffe1f0); transition: background .5s; }
html.hgt-night .ks-toggle { background: linear-gradient(90deg, #2a1f5c, #5b3a7e); }
.ks-toggle .ks-knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fff6b8, #ffcf3f); box-shadow: 0 0 10px rgba(255, 210, 70, .8); transition: transform .45s cubic-bezier(.5, 1.6, .5, 1), background .45s; }
html.hgt-night .ks-toggle .ks-knob { transform: translateX(36px); background: radial-gradient(circle at 35% 35%, #fffbe6, #ffe7a3); box-shadow: inset -6px -2px 0 #e9cf86, 0 0 10px rgba(255, 236, 170, .6); }
.ks-toggle .ks-tstar { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .4s; }
html.hgt-night .ks-toggle .ks-tstar { opacity: 1; }
.ks-toggle .ks-tstar:nth-child(2) { left: 12px; top: 8px; } .ks-toggle .ks-tstar:nth-child(3) { left: 22px; top: 20px; } .ks-toggle .ks-tstar:nth-child(4) { left: 9px; top: 22px; width: 3px; height: 3px; }
.ks-toggle .ks-tcloud { position: absolute; right: 8px; top: 13px; width: 22px; height: 9px; border-radius: 9px; background: #fff; transition: opacity .4s; }
html.hgt-night .ks-toggle .ks-tcloud { opacity: 0; }
.ks-toggle:focus-visible { outline: 3px solid #ff6fae; outline-offset: 3px; }

@keyframes ks-spin { to { transform: rotate(360deg); } }
@keyframes ks-drift { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 260px)); } }
@keyframes ks-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes ks-flap { from { transform: scaleY(1); } to { transform: scaleY(-.6); } }
@keyframes ks-bflap { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
@keyframes ks-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes ks-beego { from { left: -60px; } to { left: calc(100% + 60px); } }
@keyframes ks-hover { from { transform: translateY(-9px) rotate(-4deg); } to { transform: translateY(9px) rotate(4deg); } }
@keyframes ks-firefly { 0%, 100% { transform: translate(0, 0); opacity: .2; } 50% { transform: translate(30px, -40px); opacity: 1; } }
@keyframes ks-fly { from { transform: translate(var(--x0), var(--y0)); } to { transform: translate(var(--x1), var(--y1)); } }
@keyframes ks-flutterpath { 0% { transform: translate(var(--x0), var(--y0)) rotate(-8deg); } 25% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .25), calc(var(--y0) - 60px)) rotate(8deg); } 50% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .5), calc(var(--y0) + 30px)) rotate(-8deg); } 75% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .75), calc(var(--y0) - 40px)) rotate(8deg); } 100% { transform: translate(var(--x1), var(--y0)); } }
@media (prefers-reduced-motion: reduce) {
	.hgt-backdrop *, .ks-meadow *, .ks-toggle * { animation: none !important; transition: none !important; }
	.ks-flyer { display: none; }
}
@media (max-width: 700px) {
	.ks-rainbow { width: 120vw; left: -30vw; bottom: 20vh; opacity: .35; }
	.ks-cloud { transform: scale(.7); }
	.ks-sun { top: 16vh; right: 4vw; width: 96px; }
	.ks-moon { top: 16vh; right: 6vw; width: 72px; }
	.ks-meadow { height: 120px; }
}
@media print { .hgt-backdrop, .hgt-switch, .ks-meadow { display: none; } }