:root {
  --size: 300px;
  --size-lit: 100px;
}

body {
  background-color: #000;
}

.box {
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.box__audio {
  position: absolute;
  z-index: 98;
  bottom: 20px;
  right: 50px;
  transform: translateX(-50%);
  border: 2px solid #000;
  border-radius: 50px;
  overflow: hidden;
}

.box audio {
  width: 180px;
}

.box audio::-webkit-media-controls-panel {
  background: url("../img/fire-7.gif") 0 100%/cover no-repeat;
  background-color: rgb(0, 0, 0);
}

.box audio::-webkit-media-controls-play-button {
  background: url("../img/play-solid.svg") 50%/18px 18px no-repeat;
}

.box audio::-webkit-media-controls-current-time-display, .box audio::-webkit-media-controls-time-remaining-display {
  color: #ff3c00;
}

.box audio::-webkit-media-controls-timeline, .box audio::-webkit-media-controls-volume-slider-container, .box audio::-webkit-media-controls-volume-slider, .box audio::-webkit-media-controls-mute-button, .box audio::-webkit-media-controls-seek-forward-button, .box audio::-webkit-media-controls-rewind-button, .box audio::-webkit-media-controls-toggle-closed-captions-button, .box audio::-webkit-media-controls-return-to-realtime-button, .box audio::-webkit-media-controls-seek-back-button, .box audio::-webkit-media-controls-return-to-realtime-button {
  display: none;
}

.box__container {
  position: relative;
  max-width: 1300px;
  height: 100%;
  width: 700px;
  height: 800px;
  margin: 0 auto;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.box__container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgb(0, 0, 0) 100%), linear-gradient(0deg, rgb(5, 5, 5) 0%, rgba(0, 0, 0, 0)20%, rgba(0, 0, 0, 0) 80%, rgb(0, 0, 0) 100%);
}

.box__container>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.box__body {
  width: var(--size);
  height: var(--size);
  position: relative;
  perspective: 500px;
}

.item {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
  animation: box 5s linear infinite;
}

.item__side {
  backdrop-filter: blur(1px);
  background: rgba(255, 94, 0, 0.1);
  box-shadow: inset 0 0 10px 0 rgba(255, 94, 0, 0.5), 0 0 50px 0 rgba(255, 94, 0, 0.5);
  border: 2px solid rgb(0, 0, 0);
  width: inherit;
  height: inherit;
  position: absolute;
  transition: all 0.3s ease;
}

.item:hover {
  animation-play-state: paused;
}

.item__side:hover {
  backdrop-filter: blur(0px);
}

.side-1 {
  transform: translateZ(calc(var(--size) / 2));
}

.side-2 {
  transform: rotateY(180deg) translateZ(calc(var(--size) / 2));
}

.side-3 {
  transform: rotateY(90deg) translateZ(calc(var(--size) / 2));
  background: url("../img/2.png") 0 0/contain no-repeat, rgba(255, 94, 0, 0.1);
}

.side-4 {
  transform: rotateY(-90deg) translateZ(calc(var(--size) / 2));
  background: url("../img/2.png") 0 0/contain no-repeat, rgba(255, 94, 0, 0.1);
}

.side-5 {
  transform: rotatex(90deg) translateZ(calc(var(--size) / 2));
}

.side-6 {
  transform: rotatex(-90deg) translateZ(calc(var(--size) / 2));
}

.side-center {
  border-radius: 50%;
  animation: box-back 5s linear infinite;
  backdrop-filter: none;
  width: 60%;
  height: 60%;
  left: 20%;
  top: 20%;
  background: url("../img/fire-4.webp") 50%/cover no-repeat;
  box-shadow: 0 0 10px 10px rgb(0, 0, 0), 0 0 20px 10px rgb(255, 61, 2), 0 0 50px 10px rgb(0, 0, 0);
  transform: scale(1);
}

@keyframes box {
  0% {
    transform: rotatey(360deg) rotatex(0deg);
  }

  100% {
    transform: rotatey(0deg) rotatex(360deg);
  }
}

@keyframes box-back {
  0% {
    transform: rotatey(360deg) rotatex(360deg) scale(0.5);
    box-shadow: 0 0 10px 10px rgb(0, 0, 0), 0 0 20px 10px rgb(255, 61, 2), 0 0 50px 10px rgb(0, 0, 0);
  }

  50% {
    transform: rotatey(-180deg) rotatex(0deg) scale(1.5);
    box-shadow: 0 0 10px 10px rgb(0, 0, 0), 0 0 20px 10px rgb(255, 61, 2), 0 0 50px 10px rgb(0, 0, 0);
  }

  100% {
    transform: rotatey(-360deg) rotatex(-360deg) scale(0.5);
    box-shadow: 0 0 10px 10px rgb(0, 0, 0), 0 0 20px 10px rgb(255, 61, 2), 0 0 50px 10px rgb(0, 0, 0);
  }
}

/* @keyframes box-back {
  0% {
    transform: rotatey(360deg) rotatex(360deg) scale(0.5);
  }

  50% {
    transform: rotatey(-180deg) rotatex(0deg) scale(1.5);
  }

  100% {
    transform: rotatey(-360deg) rotatex(-360deg) scale(0.5);
  }
} */

/*# sourceMappingURL=style.css.map */