:root {
        --width: 100px;
        --depth: 100px;
        --height: 40px;
}

.grammer{
        transform-style:preserve-3d;
        transform: rotate3d(-1, -1, 0, 45deg)perspective(var(--perspective));
        width: var(--width);
        height: var(--height);
        position: relative;
	animation-name: gramspin;
	animation-duration: 6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
        transform-origin: 50% 50% calc(var(--width)/-2);
}

.grammer > div{
        transform-origin: 50% 50% calc(var(--width)/-2);
        position: absolute;
        top: 0px;
        left: 0px;
}

.grammer img{
        position: absolute;
        top: 0px;
        left: 0px;
}

.grammer > .F{
        width: var(--width);
        height: var(--height);
        background-image: url("../assets/images/wood.jpg");
}

.grammer > .R{
        width: var(--depth);
        height: var(--height);
        transform: rotateY(90deg);
        transform-style:preserve-3d;
        background-image: url("../assets/images/wood.jpg");
}
.grammer > .L{
        width: var(--depth);
        height: var(--height);
        transform: rotateY(-90deg);
        background-image: url("../assets/images/wood.jpg");
}

.grammer > .B{
        transform-origin: 50% 0px 0px;
        width: var(--width);
        height: var(--depth);
        transform: translateY(var(--height)) rotateX(-90deg);
        background-image: url("../assets/images/wood.jpg");
}

.grammer > .BK{
        width: var(--width);
        height: var(--height);
        transform: rotateY(180deg);
        background-image: url("../assets/images/wood.jpg");
}

.grammer > .T{
        transform-style:preserve-3d;
        transform-origin: 50% 0px 0px;
        width: var(--width);
        height: var(--depth);
        transform: rotateX(-90deg);
        background-image: url("../assets/images/wood.jpg");
}

.grammer .record{
        width: 100%;
        height: 100%;
	animation-name: spinning;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

}

.grammer .crank{
        width: 100%;
        height: 80%;
        transform: translateY(-10px) rotateY(-90deg);
	animation-name: cranking;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
        transform-origin: 50% calc(100% - 2px);
}

.grammer .cone{
        width: 100%;
        transform: rotateX(90deg) rotateY(45deg);
        transform-origin: 100% 100%;
}

@keyframes cranking{
  0% {transform: translateY(-10px) rotateY(-90deg) rotateX(0deg);}
  100% {transform: translateY(-10px) rotateY(-90deg) rotateX(360deg);}
}
@keyframes spinning{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@keyframes gramspin{
  0% {transform: rotateX(-15deg) rotateY(0deg)  perspective(var(--perspective));}
  100% {transform: rotateX(-15deg) rotateY(360deg)  perspective(var(--perspective));}
}