Rearranging the css to line up with the html

HTML & CSS
1

This is the html structure:

<div class="outer">
<div class="container play1 with-curtain">
<button class="playa cover"
<div class="inner-container curtain curtain1">
<div class="ratio-keeper">
<div class="fence">
<div class="fan">
<div class="cross"></div>
<div class="off"></div>
<div class="video video-frame"
<div class="panel-left"></div>
<div class="panel-right"></div>
<button class="exit"

This was my attempt at trying to line up the css with the hml here: https://jsfiddle.net/zre8shn9/

.play1 {
  --color-a: blue;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

.play2 {
  --color-a: purple;
  --color-b: black;
  --color-c: purple;
  --color-d: black;
}

.play3 {
  --color-a: green;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}

.play4 {
  --color-a: orange;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

.play5 {
  --color-a: yellow;
  --color-b: black;
  --color-c: yellow;
  --color-d: black;
}

.play6 {
  --color-a: blue;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

.play7 {
  --color-a: red;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}

.play8 {
  --color-a: white;
  --color-b: black;
  --color-c: white;
  --color-d: black;
}

.play9 {
  --color-a: red;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}


html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
  /*  animation: fadeInBody1 0s ease forwards;*/
}

/*@keyframes fadeInBody1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}*/

/*body*/
.initial-fade {
  animation: initial-fade 500ms ease forwards;
}

@keyframes initial-fade {
  to {
    opacity: 0;
  }
}

.initial-fade,
.fadingOut {
  cursor: default;
}

.initial-fade .cover,
.initial-fade .cover * {
  pointer-events: none !important;
}

/*body*/
.bg1 {
  animation: fadeInBody 5s ease 0s forwards;
  animation-delay: 0s;
  opacity: 0;
}

@keyframes fadeInBody {
  100% {
    opacity: 1;
  }
}

/*body*/
.bg1 .with-curtain:before {
  content: "";
  position: fixed;
  /*z-index: 1;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 165px 165px;
  background-image:
    linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),

    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(90deg, var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),

    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(90deg, var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),

    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(90deg, var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),

    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(90deg, var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),

    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(90deg, var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),

    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(90deg, var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),

    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(90deg, var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),

    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(90deg, var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),

    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(90deg, var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),

    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(90deg, var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),

    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(90deg, var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),

    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(90deg, var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),

    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(90deg, var(--color-b)70px, #0000 70px 100px, var(--color-b) 100px),

    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(90deg, var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),

    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(90deg, var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),

    linear-gradient(var(--color-a), var(--color-a));
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 3s ease 0s forwards;
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.outer.isOpen {
  /*display: flex;*/
  width: auto;
  /*align-content: stretch;*/
}

.fadingOut .isOpen {
  animation: fadingOut 1s;
  animation-delay: 11.2s;
}

@keyframes fadingOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  /*z-index: 2;*/
}

.container.active {
  flex: 1 0 0;
}

.inner-container {
  display: none;
}

/* when container is active hide the cssPlay and show the inner container*/
.container.active .cover {
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curtain {
  display: block;
}


.cover {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.cover::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}

.cover:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.cover:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.played {
  border-color: green;
}

.played::before {
  border-left-color: green;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 642px;
  /*box-shadow: inset 0 -2px 0px 0px #0a0a0a;*/
  border: 20px solid black;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  border: 1px solid #333;
}

.fence {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-image: linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  filter: drop-shadow(0 0 5px #000);
  clip-path: circle(25% at center);
  animation: fade 8s linear;
}

@keyframes fade {
  0% {
    opacity: 0.9;

  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.9;
  }
}

.fence>div {
  position: absolute;
  /*top: 0;*/
  left: 0;
  right: 0;
  /*width: 100%;*/
  height: 0.55%;
  /*height: 2px;*/
  background: green;
}

.fence>div:nth-child(1) {
  top: 10%;
}

.fence>div:nth-child(2) {
  top: 20%;
}

.fence>div:nth-child(3) {
  top: 30%;
}

.fence>div:nth-child(4) {
  top: 40%;
}

.fence>div:nth-child(5) {
  top: 50%;
}

.fence>div:nth-child(6) {
  top: 60%;
}

.fence>div:nth-child(7) {
  top: 70%;
}

.fence>div:nth-child(8) {
  top: 80%;
}

.fence>div:nth-child(9) {
  top: 90%;
}

.fadingOut .fan svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
  margin: auto;
  animation: fan-spin 2.5s ease 0.8s forwards;
}

@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.cross::before,
.cross::after {
  content: "";
  background: black;
}

.cross::before {
  /*horizontal*/
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 100%;*/
  /*height: 10px;*/
  height: 2.8%;
  clip-path: circle(29% at center);
}

.cross::after {
  /*vertical*/
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 10px;*/
  width: 1.5%;
  /*height: 100%;*/
  clip-path: circle(51% at center);
}

.fadingOut .off {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  height: 100%;
  width: 100%;
  background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
  animation-name: tv-static, shutdown;
  animation-duration: 1s, 1s;
  animation-delay: 0s, 1s;
  animation-fill-mode: forwards;
}

@keyframes tv-static {
  from {
    background-size: 100% 100%;
  }

  to {
    background-size: 200% 200%;
  }
}

@keyframes shutdown {
  68% {
    width: 100%;
    height: 1px;
  }

  99% {
    width: 0px;
    height: 1px;
  }

  100% {
    width: 0px;
    height: 0px;
  }
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  user-select: none;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50% + 1px);
  /* rounding error fix */
  top: 0%;
  transition: all ease 10s;

  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain3 .panel-left::before,
.curtain3 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain4 .panel-left::before,
.curtain4 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain5 .panel-left::before,
.curtain5 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain6 .panel-left::before,
.curtain6 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain7 .panel-left::before,
.curtain7 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain8 .panel-left::before,
.curtain8 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain9 .panel-left::before,
.curtain9 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.panel-right::before {
  left: -100%;
}

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

.container.active .curtain .panel-right {
  animation: curtain2-open 8s forwards 520ms;
}

@keyframes curtain2-open {
  to {
    transform: translateX(calc(100% + 1px));
  }
}

.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-close 8s ease forwards;
  transform: translateX(calc(-100% - 1px));
  animation-delay: 3.3s;
}

@keyframes curtain1-close {
  to {
    transform: translateX(0);
  }
}

.fadingOut .container.active .curtain .panel-right {
  animation: curtain2-close 8s ease forwards;
  transform: translateX(calc(100% + 1px));
  animation-delay: 3.3s;
}

@keyframes curtain2-close {
  to {
    transform: translateX(0);
  }
}


.exit {
  position: absolute;
  top: auto;
  bottom: -47px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  animation: fadeInExit 1s forwards;
  opacity: 0;
  pointer-events: none;
}

.exit::before,
.exit::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
  transition: all 1s ease;
}

.exit::after {
  transform: rotate(-45deg);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit:hover::before,
.exit:hover::after,
.fadingOut .exit::before,
.fadingOut .exit::after {
  background: green;
}

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;
}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}

.hide {
  display: none;
}

Html

<div class="outer">
  <div class="container play1 with-curtain">
    <button class="playa cover" type="button" aria-label="Open"></button>
    <div class="inner-container curtain curtain1">
      <div class="ratio-keeper">

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="fan">
          <svg xmlns="http://www.w3.org/2000/svg" width="70%" height="70%" viewBox="76 130 381 381">
            <g id="fan">
              <title>Fan</title>
              <path fill="#000100" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
            </g>
          </svg>
        </div>
        <div class="cross"></div>

        <div class="off"></div>
        <div class="wrap">
          <div class="video video-frame" data-id="CHahce95B1g"></div>
        </div>

        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>

        </div>
      </div>
      <button class="exit" type="button" title="Exit" aria-label="Close"></button>
    </div>
  </div>
2

Are you having a problem? You did not give a question. You want the CSS of the arrows to line up, or the CSS code to line up with itself?

3

lining up the css with html here

<div class="outer">
<div class="container play1 with-curtain">
<button class="playa cover"
<div class="inner-container curtain curtain1">
<div class="ratio-keeper">
<div class="fence">
<div class="fan">
<div class="cross"></div>
<div class="off"></div>
<div class="video video-frame"
<div class="panel-left"></div>
<div class="panel-right"></div>
<button class="exit"

Am I having a problem, I don’t know.

This was my 2nd attempt: https://jsfiddle.net/jc2mn85u/

I think i did a good job here with this one, I’m not sure if some classes should be in a different spot.

.play9 {
  --color-a: red;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}


html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
  /*  animation: fadeInBody1 0s ease forwards;*/
}

/*@keyframes fadeInBody1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}*/

/*body*/
.initial-fade {
  animation: initial-fade 500ms ease forwards;
}

@keyframes initial-fade {
  to {
    opacity: 0;
  }
}

.initial-fade,
.fadingOut {
  cursor: default;
}

.initial-fade .cover,
.initial-fade .cover * {
  pointer-events: none !important;
}


.container {
  display: flex;
  justify-content: center;
  position: relative;
  /*z-index: 2;*/
}

.container.active {
  flex: 1 0 0;
}

/*body*/
.bg1 {
  animation: fadeInBody 5s ease 0s forwards;
  animation-delay: 0s;
  opacity: 0;
}

@keyframes fadeInBody {
  100% {
    opacity: 1;
  }
}

/*body*/
.bg1 .with-curtain:before {
  content: "";
  position: fixed;
  /*z-index: 1;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 165px 165px;
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 3s ease 0s forwards;
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.outer.isOpen {
  /*display: flex;*/
  width: auto;
  /*align-content: stretch;*/
}

.fadingOut .isOpen {
  animation: fadingOut 1s;
  animation-delay: 11.2s;
}

@keyframes fadingOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.inner-container {
  display: none;
}

/* when container is active hide the cssPlay and show the inner container*/
.container.active .cover {
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curtain {
  display: block;
}

.cover {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.cover::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}

.cover:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.cover:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.played {
  border-color: green;
}

.played::before {
  border-left-color: green;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 642px;
  /*box-shadow: inset 0 -2px 0px 0px #0a0a0a;*/
  border: 20px solid black;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  border: 1px solid #333;
}

.fence {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-image: linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  filter: drop-shadow(0 0 5px #000);
  clip-path: circle(25% at center);
  animation: fade 8s linear;
}

@keyframes fade {
  0% {
    opacity: 0.9;

  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.9;
  }
}

.fence>div {
  position: absolute;
  /*top: 0;*/
  left: 0;
  right: 0;
  /*width: 100%;*/
  height: 0.55%;
  /*height: 2px;*/
  background: green;
}

.fence>div:nth-child(1) {
  top: 10%;
}

.fence>div:nth-child(2) {
  top: 20%;
}

.fence>div:nth-child(3) {
  top: 30%;
}

.fence>div:nth-child(4) {
  top: 40%;
}

.fence>div:nth-child(5) {
  top: 50%;
}

.fence>div:nth-child(6) {
  top: 60%;
}

.fence>div:nth-child(7) {
  top: 70%;
}

.fence>div:nth-child(8) {
  top: 80%;
}

.fence>div:nth-child(9) {
  top: 90%;
}

.fadingOut .fan svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
  margin: auto;
  animation: fan-spin 2.5s ease 0.8s forwards;
}

@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.cross::before,
.cross::after {
  content: "";
  background: black;
}

.cross::before {
  /*horizontal*/
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 100%;*/
  /*height: 10px;*/
  height: 2.8%;
  clip-path: circle(29% at center);
}

.cross::after {
  /*vertical*/
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 10px;*/
  width: 1.5%;
  /*height: 100%;*/
  clip-path: circle(51% at center);
}

.fadingOut .off {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  height: 100%;
  width: 100%;
  background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
  animation-name: tv-static, shutdown;
  animation-duration: 1s, 1s;
  animation-delay: 0s, 1s;
  animation-fill-mode: forwards;
}

@keyframes tv-static {
  from {
    background-size: 100% 100%;
  }

  to {
    background-size: 200% 200%;
  }
}

@keyframes shutdown {
  68% {
    width: 100%;
    height: 1px;
  }

  99% {
    width: 0px;
    height: 1px;
  }

  100% {
    width: 0px;
    height: 0px;
  }
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  user-select: none;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50% + 1px);
  /* rounding error fix */
  top: 0%;
  transition: all ease 10s;

  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain3 .panel-left::before,
.curtain3 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain4 .panel-left::before,
.curtain4 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain5 .panel-left::before,
.curtain5 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain6 .panel-left::before,
.curtain6 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain7 .panel-left::before,
.curtain7 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain8 .panel-left::before,
.curtain8 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.curtain9 .panel-left::before,
.curtain9 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.panel-right::before {
  left: -100%;
}

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

.container.active .curtain .panel-right {
  animation: curtain2-open 8s forwards 520ms;
}

@keyframes curtain2-open {
  to {
    transform: translateX(calc(100% + 1px));
  }
}

.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-close 8s ease forwards;
  transform: translateX(calc(-100% - 1px));
  animation-delay: 3.3s;
}

@keyframes curtain1-close {
  to {
    transform: translateX(0);
  }
}

.fadingOut .container.active .curtain .panel-right {
  animation: curtain2-close 8s ease forwards;
  transform: translateX(calc(100% + 1px));
  animation-delay: 3.3s;
}

@keyframes curtain2-close {
  to {
    transform: translateX(0);
  }
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  animation: fadeInExit 1s forwards;
  opacity: 0;
  pointer-events: none;
}

.exit::before,
.exit::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
  transition: all 1s ease;
}

.exit::after {
  transform: rotate(-45deg);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit:hover::before,
.exit:hover::after,
.fadingOut .exit::before,
.fadingOut .exit::after {
  background: green;
}

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;
}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}

.hide {
  display: none;
}
4

Your buttons don’t have an ending >. Is that on purpose?

1 Like
5

<button class="playa cover" type="button" aria-label="Open"></button>

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.