@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Itim&display=swap");
:root {
  --x: 0deg;
  --y: 0deg;
  --display: block;
  --frameWidth: 500px;
  --frameHeight: 500px;
  --frameDepth: 100px;
  --color: white;
  --frameBorderRadius: 2px;
  --opacity: 0;
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: 500px;
  background: var(--color);
  color: white;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:white;text-shadow: 0 0 4px black;font-size:24px;'><text y='50%'>⊚</text></svg>") 16 0, auto;
  touch-action: none;
  font-family: "Itim", cursive;
}

.text {
  position: absolute;
  top: 40px;
  color: #8840C1;
  filter: hue-rotate(var(--x));
  text-shadow: 0 0 5px #8840C1;
  user-select: none;
  pointer-events: none;
}

.frame {
  width: var(--frameWidth);
  height: var(--frameHeight);
  transform-style: preserve-3d;
  pointer-events: none;
  user-select: none;
  transform: /* rotateX(var(--y)) */ rotateY(var(--x));
  border-radius: var(--frameBorderRadius);
  box-shadow: 0 0 0px #000, inset 0 0 0px #000, inset 0 0 0 20px #000, 0 0 0 var(--frameBorderRadius) var(--color);
}

.side {
  width: 100%;
  height: 100%;
  background: var(--color);
  position: absolute;
  left: 0;
  top: 0;
  display: var(--display);
}

.side.left {
  transform-origin: 0 0;
  transform: rotateY(90deg);
  width: var(--frameDepth);
  border-top: 10px solid var(--color);
  border-bottom: 10px solid var(--color);
  top: -10px;
}

.side.top {
  transform-origin: 0 0;
  transform: rotateX(-90deg);
  height: var(--frameDepth);
}

.side.right {
  transform-origin: 100% 0;
  transform: rotateY(-90deg);
  width: var(--frameDepth);
  left: auto;
  right: 0;
  border-top: 10px solid var(--color);
  border-bottom: 10px solid var(--color);
  top: -10px;
}

.side.bottom {
  transform-origin: 0 100%;
  transform: rotateX(90deg);
  height: var(--frameDepth);
  top: auto;
  bottom: 0;
}

#skull {
  width: var(--frameWidth);
  height: var(--frameHeight);
  transform: translateZ(calc(-1 * var(--frameDepth))) scale(0.99);
  display: var(--display);
  background: var(--skull);
  background-size: cover;
  background-position: center;
  user-select: none;
  pointer-events: none;
/*   filter: saturate(300%);
  opacity: var(--opacity); */
  transition: opacity 1s;
}

/* .border {
  position: absolute;
  width: var(--frameWidth);
  height: var(--frameHeight);
  position: absolute;
  top: 0;
  left: 0;
   border-radius: var(--frameBorderRadius);
  filter: hue-rotate(var(--x));
  box-shadow: 0 0 0px #000, inset 0 0 0px #000, inset 0 0 0 20px #000, 0 0 0 var(--frameBorderRadius) var(--color);
} */



/* .back {
  width: var(--frameWidth);
  height: var(--frameHeight);
  position: absolute;
  background: blue;
  top: 0;
  left: 4;
  text-shadow: 0 0 10px #8840C1;
  border-radius: var(--frameBorderRadius);
  backface-visibility: hidden;
  transform: rotateY(180deg);
  font-size: 250px;
  color: #8840C1;
  overflow: hidden;
  text-align: center;
  line-height: var(--frameHeight);
  user-select: none;
  filter: hue-rotate(calc((var(--x))));
  box-shadow: 0 0 20px #8840C1, inset 0 0 20px #8840C1, inset 0 0 0 7px #8840C1, 0 0 0 var(--frameBorderRadius) var(--color);
} */
.back {
  width: var(--frameWidth);
  height: var(--frameHeight);
  position: absolute;
  background: black;
  background-image: url('back1.jpg');
  background-repeat:no-repeat;
background-size:contain;
background-position:center;
  top: 0;
  left: 4;
  text-shadow: 0 0 10px #8840C1;
  border-radius: var(--frameBorderRadius);
  backface-visibility: hidden;
  transform: rotateY(180deg);
  font-size: 250px;
  color: #8840C1;
  overflow: hidden;
  text-align: center;
  line-height: var(--frameHeight);
  user-select: none;
/*   filter: hue-rotate(calc((var(--x))));
  box-shadow: 0 0 20px #8840C1, inset 0 0 20px #8840C1, inset 0 0 0 7px #8840C1, 0 0 0 var(--frameBorderRadius) var(--color); */
}