:root {
  --cube: 3.3vw;
  --main: #900;
  --cube_main: rgba(153, 0, 0, 0.15);
  --black: #000;
  --white: #fff;
  --blue: #00f;
  --red: #f00;
  --green: #008600;
  --cube_green: rgba(0, 134, 0, 0.25);
}

.header_text {
	margin: 1% auto 0%;
	width: fit-content;
	height: fit-content;
	position: relative;
	padding: 1% 2%;
	background-color: var(--main);
	color: var(--white);
	font-size: 2.044vw;
	outline: 3px solid var(--main);
	outline-offset: 3px;
	border-radius: 10px;
	z-index: 10;
}
	
#cube-wrap {
	perspective: 1000px;
	perspective-origin: 50% var(--cube);
	max-height: 100vh;
	max-width: 30vw;
	display: grid;
	align-content: center;
	cursor: grab;
	text-align:left;
	top: -6px;
	position: relative;
}

#cube-wrap:active {
	cursor: grabbing;
}

.cube {
	position: relative;
	width: var(--cube);
	height: var(--cube);
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(45deg);
	margin: 48% 50%;
	user-select: none;
	cursor: none;
}

.inner-wrap {
  position: relative;
  width: var(--cube);
  height: var(--cube);
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
  margin: 0 auto;
  user-select: none;
}

.cube .face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front {
  transform: rotateY(0deg) translateZ(calc(var(--cube) * 0.5));
}

.back {
  transform: rotateY(180deg) translateZ(calc(var(--cube) * 0.5));
}

.left {
  transform: rotateY(-90deg) translateZ(calc(var(--cube) * 0.5));
}

.right {
  transform: rotateY(90deg) translateZ(calc(var(--cube) * 0.5));
}

.top {
  transform: rotateX(90deg) translateY(calc(var(--cube) * -0.5));
  transform-origin: top left;
}

.bottom {
  transform: rotateX(-90deg) translateY(calc(var(--cube) * 0.5));
  transform-origin: bottom left;
}

.inner1 {
  transform: rotateX(0) rotateY(90deg) translateY(0px);
}

.inner2 {
  transform: rotateX(90deg) translateY(0px);
}

.inner3 {
}

.cube .inner {
  border: 0.146vw solid var(--main);
  backface-visibility: visible !important;
  border-radius: 100%;
}

@keyframes spin {
  from {
    transform: rotateX(0) rotateY(0);
  }

  to {
    transform: rotateX(1turn) rotateY(1turn);
  }
}