#play-pause-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    transition: background-color 0.3s;
  }

  #play-pause-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }

  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-image: url('/assets/blog/sisyphus/sisyphus.png');
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: -1;
  }



.demo {
	--sky: #010015;
	position: relative;
	height: 379px;
	border-radius: 10px;
	width: 100%;
	max-width: 768px;
	margin: auto;
	overflow: hidden;
	background: var(--sky);
	transition: 0.3s background ease;
	font-family: "", sans-serif;
	user-select: none;
}

@media screen and (max-width: 768px) {
	.demo {
		border-radius: 0;
	}
}

input[type="range"] {
	position: absolute;
	left: 1%;
	bottom: 10%;
	-webkit-appearance: none;
	background: transparent;
	height: 0;
	width: 80%;
	min-width: 300px;
	rotate: -90deg;
	transform-origin: left top;
	z-index: 5;
}

@media screen and (max-width: 768px) {
	input[type="range"] {
		left: 2%;
		width: 70%;
	}
}

input[type="range"]:focus-visible {
	outline: none;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
	border: 6px solid #99c8ff;
}

input[type="range"]::-webkit-slider-runnable-track {
	background: rgba(0 0 0 / 0.1);
	height: 5px;
	border-top-left-radius: 100%;
	border-bottom-right-radius: 100%;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 70px;
	height: 70px;
	margin-top: -65px;
	background: #332622;
	border: 6px solid #523e37;
	border-radius: 50%;
	cursor: grab;
	rotate: calc(var(--factor) * 0.3deg);
	box-shadow: -14px -14px 0 0px #44342e inset, -14px 14px 0 0px #3f302b inset,
		21px 0 0 0px #3a2c27 inset;
	clip-path: polygon(
		19% 91%,
		43% 99%,
		73% 94%,
		94% 75%,
		100% 47%,
		94% 22%,
		75% 5%,
		50% 1%,
		22% 8%,
		5% 27%,
		0 55%,
		4% 75%
	);
}

/* landscape */
.mountains {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 10;
	z-index: 2;
}

.mountain {
	position: absolute;
	inset: auto auto 0 var(--position);
	overflow: hidden;
	border-top-left-radius: 10px;
	width: calc(var(--size) * 1.4);
	height: calc(var(--size) * 1.4);
	transform: translate(0, 50%) rotate(45deg);
	z-index: var(--z);
	box-shadow: 2px 0 10px 0 rgba(0 0 0 / 0.4);
	transition: 0.3s box-shadow ease;
}

.mountain:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	--pike: calc(var(--size) / 18);
	--n-pike: calc(var(--size) / -12);
	box-shadow: var(--pike) var(--n-pike) 0 0 #fff,
		var(--n-pike) var(--pike) 0 0 #fff,
		calc(var(--pike) * 2) calc(var(--n-pike) * 2) 0 0 #fff,
		calc(var(--n-pike) * 2) calc(var(--pike) * 2) 0 0 #fff,
		calc(var(--pike) * 2.75) calc(var(--n-pike) * 2.75) 0 0 #fff,
		calc(var(--n-pike) * 2.75) calc(var(--pike) * 2.75) 0 0 #fff;
	width: calc(var(--size) / 4);
	height: calc(var(--size) / 4);
	z-index: 20;
	filter: drop-shadow(0 0 5px rgba(0 0 0 / 0.3));
}

.mountain:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, #ba7888 0%, #803848 100%);
	box-shadow: calc(var(--size) / 4.66) calc(var(--size) / 7) 0 0
			rgba(0 0 0 / 0.05) inset,
		calc(var(--size) / 4.66) 0 0 0 rgba(255 255 255 / 0.09) inset;
}

.mountain--1 {
	--position: 10%;
	--size: 200px;
	--z: 5;
	--scaleY: 0.5;
}

@media screen and (max-width: 768px) {
	.mountain--1 {
		--position: -20%;
		--size: 180px;
	}
}
.mountain--2 {
	--position: 35%;
	--size: 140px;
	--z: 6;
	--scaleY: 0.5;
}

@media screen and (max-width: 768px) {
	.mountain--2 {
		--position: 0%;
		--size: 120px;
	}
}
.mountain--3 {
	--position: 60%;
	--size: 360px;
	--z: 10;
	--scaleY: 0.5;
}

@media screen and (max-width: 768px) {
	.mountain--3 {
		--position: 40%;
		--size: 360px;
	}
}

.mountain--3.fake {
	overflow: visible;
}

.mountain--3.fake:before,
.mountain--3.fake:after {
	display: none;
}

.mountain--4 {
	--position: 46%;
	--size: 190px;
	--z: 3;
	--scaleY: 0.5;
}

@media screen and (max-width: 768px) {
	.mountain--4 {
		--position: 14%;
		--size: 220px;
	}
}

.sky {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.star {
	position: absolute;
	width: var(--size);
	height: var(--size);
	inset: var(--position);
	clip-path: polygon(
		33% 33%,
		0 50%,
		33% 67%,
		50% 100%,
		67% 67%,
		100% 50%,
		67% 33%,
		50% 0
	);
	background: #fff;
	z-index: 2;
	transition: 1s opacity ease;
}

.star--1 {
	--size: 50px;
	--position: 20% auto auto 66%;
	transition-delay: 0.15s;

	@media screen and (max-width: 768px) {
		--size: 13px;
		--position: 20% auto auto 62%;
	}
}
.star--2 {
	--size: 30px;
	--position: 30% auto auto 18%;
	transition-delay: 0.25s;

	@media screen and (max-width: 768px) {
		--size: 20px;
		--position: 23% auto auto 12%;
	}
}
.star--3 {
	--size: 10px;
	--position: 73% auto auto 3%;
	transition-delay: 0.1s;

	@media screen and (max-width: 768px) {
		--size: 8px;
		--position: 46% auto auto 2%;
	}
}
.star--4 {
	--size: 33px;
	--position: 10% auto auto 77%;
	transition-delay: 0.35s;

	@media screen and (max-width: 768px) {
		--size: 21px;
	}
}
.star--5 {
	--size: 16px;
	--position: 13% auto auto 6%;
	transition-delay: 0.3s;

	@media screen and (max-width: 768px) {
		--size: 11px;
	}
}
.star--6 {
	--size: 27px;
	--position: 4% auto auto 56%;
	transition-delay: 0.05s;
}
.star--7 {
	--size: 23px;
	--position: 50% auto auto 10%;
	transition-delay: 0.4s;

	@media screen and (max-width: 768px) {
		--size: 22px;
		--position: 41% auto auto 9%;
	}
}
.star--8 {
	--size: 50px;
	--position: 36% auto auto 48%;
	transition-delay: 0.45s;

	@media screen and (max-width: 768px) {
		--size: 22px;
		--position: 41% auto auto 9%;
	}
}
.star--9 {
	--size: 25px;
	--position: 53% auto auto 17%;
	transition-delay: 0.5s;

	@media screen and (max-width: 768px) {
		--size: 22px;
		--position: 41% auto auto 9%;
	}
}

.moon {
	position: absolute;
	width: 100px;
	height: 100px;
	inset: 13% auto auto 32%;
	background: var(--sky);
	border-radius: 100%;
	box-shadow: 26px 0 0 0 #fff inset;
	transform: rotate(-23deg);
	transition: 0.3s box-shadow 0.2s ease, 0.2s background ease;
}

.demo--is-day {
	--sky: #efeeff;

	.star {
		opacity: 0;
	}

}

.demo--is-day .mountain {
	box-shadow: 0 0 8px 0 rgba(0 0 0 / 0.1);
}

.demo--is-day .moon {
	background: #ee6;
	box-shadow: 0 0 0 0 #fff inset;
}

@keyframes blink {
	0%. 100% {
		opacity: 0.1;
	}
	50% {
		opacity: 0.3;
	}
}