:root {
                        --transform-value: -100%;
                        --rot-value: 0deg;
                }
                
                @keyframes outerCurtainsAnimate {
                    from {
                        transform: translateX(0)
                    }
                    to {
                        transform: translateX(var(--transform-value)) skew(var(--rot-value), 0deg);
                    }
                }

                @keyframes outerCurtainsAnimateReverse {
                    from {
			transform: translateX(var(--transform-value)) skew(var(--rot-value), 0deg)
                    }
                    to {
                        transform: translateX(0);
                    }
                }

		#curtains .c3,
		#curtains .c4 {
			z-index: 7;
                        position: fixed;
                        width: 50vw;
                        height: 100vh;
                        top: 0;
                        border: 0.2em solid black;
                        background: linear-gradient(to right,
                                #a9030a 0%, #a9030a 2%, #5b0f0f 4%,
                                #a9030a 6%, #a9030a 8%, #5b0f0f 10%,
                                #a9030a 12%,#a9030a 14%,#5b0f0f 16%,
                                #a9030a 18%,#a9030a 20%,#5b0f0f 22%,
                                #a9030a 24%,#a9030a 26%,#5b0f0f 28%,
                                #a9030a 30%,#a9030a 32%,#5b0f0f 34%,
                                #a9030a 36%,#a9030a 38%,#5b0f0f 40%,
                                #a9030a 42%,#a9030a 44%,#5b0f0f 46%,
                                #a9030a 48%,#a9030a 50%,#5b0f0f 52%,
                                #a9030a 54%,#a9030a 56%,#5b0f0f 58%,
                                #a9030a 60%,#a9030a 62%,#5b0f0f 64%,
                                #a9030a 68%,#a9030a 70%,#5b0f0f 72%,
                                #a9030a 74%,#a9030a 76%,#5b0f0f 78%,
                                #a9030a 80%,#a9030a 82%,#5b0f0f 84%,
                                #a9030a 86%,#a9030a 88%,#5b0f0f 90%,
                                #a9030a 92%,#a9030a 94%,#5b0f0f 96%,
                                #a9030a 98%);
                        }

		#curtains .c3 {
			left: 0;
			--transform-value: -150%;
			--rot-value: -23deg;
			animation: 3s ease-in 1s 1 forwards outerCurtainsAnimate;
                }
		#curtains .c4 {
			right: 0;
			--transform-value: 150%;
			--rot-value: 23deg;
			animation: 3s ease-in 1s 1 forwards outerCurtainsAnimate;
                }

                #curtains-inner > .c1,
                #curtains-inner > .c2 {
			animation-delay: 1s;
                        z-index: 5;
                        position: fixed;
                        width: 20vw;
                        height: 100vh;
                        top: 0;
                        border: 0.1em solid black;
                        background: linear-gradient(to right,
                                #a9030a 0%, #a9030a 2%, #5b0f0f 4%,
                                #a9030a 12%,#a9030a 14%,#5b0f0f 16%,
                                #a9030a 24%,#a9030a 26%,#5b0f0f 28%,
                                #a9030a 36%,#a9030a 38%,#5b0f0f 40%,
                                #a9030a 48%,#a9030a 50%,#5b0f0f 52%,
                                #a9030a 60%,#a9030a 62%,#5b0f0f 64%,
                                #a9030a 74%,#a9030a 76%,#5b0f0f 78%,
                                #a9030a 86%,#a9030a 88%,#5b0f0f 90%,
                                #a9030a 98%);
                }
                @keyframes innerCurtainsAnimate {
                    from {
                        transform: translateX(0)
                    }
                    to {
                        transform: translateX(var(--transform-value)) skew(var(--rot-value), 0deg);

                    }
                }
		@keyframes innerCurtainsAnimateReverse {
			from {
				transform: translateX(var(--transform-value))
			}
			to {
				transform: translateX(0);
			}
		}
                #curtains-inner > .c1 {
                        left:0;
                        --transform-value: -50%;
			animation: 4s ease-in 1s 1 forwards innerCurtainsAnimate;
                }
                #curtains-inner > .c2 {
                        right:0;
                        --transform-value: 50%;
			animation: 4s ease-in 1s 1 forwards innerCurtainsAnimate;
                }