:root {
    --side-length: 30vw;
    --side-length-neg: -30vw;
    --side-length-half: calc(var(--side-length) / 2);
    --side-length-half-neg: calc(var(--side-length-neg) / 2);
    --colour-bg-main: #d4c3a3;
    --colour-bg-secondary: #4a4a4a;
    --colour-primary: #f6e8d4;
    --colour-text-main: #fff;
    --colour-cube-1: #dd4814;
    --colour-cube-2: #0497aa;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/montserrat/Montserrat-Medium.otf) format("truetype");
}

html {
    font-family: Montserrat, Verdana, Tahoma;
    color: var(--colour-text-main);
    background-color: var(--colour-bg-main);
    font-size: 16px;
    color: var(--colour-primary);
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header, footer {
    padding: 0 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--colour-bg-secondary);
    height: 4rem;
}

header {
    font-size: 2rem;
    justify-content: flex-end;
}

footer {
    height: 2.5rem;
}

main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrap {
    transition: opacity linear 3s;
	perspective: 250vw;
    perspective-origin: 500% 50vw;
    width: var(--side-length);
    height: var(--side-length);
}

.cube {
    transform-style: preserve-3d;
    width: var(--side-length);
    height: var(--side-length);
	animation: spin 50s infinite ease-in-out;
}

.wrap:hover {
    opacity: 0.1;
}

.cube div {
	position: absolute;
    width: var(--side-length);
    height: var(--side-length);
    display: flex;
    justify-content: center;
    align-items: center;
}
.cube div div {
    opacity: 0.8;
    background-color: var(--colour-bg-secondary);
    width: 90%;
    height: 90%;
}
.cube div div:hover {
    opacity: 0.2;
}

.front div, .back div {
	animation: fb 50s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
}

.left div, .right div {
	animation: rl 50s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
}

.top div, .bottom div {
	animation: tb 50s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
}

.back {
	transform: translateZ(var(--side-length-half-neg)) rotateY(180deg);
}
.right {
	transform: rotateY(-270deg) translateX(var(--side-length-half));
	transform-origin: top right;
}
.left {
	transform: rotateY(270deg) translateX(var(--side-length-half-neg));
	transform-origin: center left;
}
.top {
	transform: rotateX(-90deg) translateY(var(--side-length-half-neg));
	transform-origin: top center;
}
.bottom {
	transform: rotateX(90deg) translateY(var(--side-length-half));
	transform-origin: bottom center;
}

.front {
	transform: translateZ(var(--side-length-half));
}
.cube .front div {
    opacity: 0.9;
	transform: translateZ(var(--side-length-half));
    background-color: #a39494;
}
.cube .bottom div {
    background-color: #7d7d7d;
}

@keyframes spin {
	0%, 10% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
	11%, 20% { transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg); }
	21%, 35% { transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg); }
	36%, 50% { transform: rotateX(90deg) rotateY(90deg) rotateZ(180deg); }
	51%, 65% { transform: rotateX(90deg) rotateY(90deg) rotateZ(360deg); }
	66%, 80% { transform: rotateX(180deg) rotateY(90deg) rotateZ(360deg); }
	81%, 99% { transform: rotateX(180deg) rotateY(360deg) rotateZ(360deg); }
	100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

@keyframes fb {
	0%, 9% { border-radius: 0; }
	10%, 11% { border-radius: 50% }
	12%, 49% { border-radius: 0; }
	50%, 51% { border-radius: 50%; }
	52%, 64% { border-radius: 0; }
	65%, 66% { border-radius: 50%; }
	67%, 100% { border-radius: 0; }
}

@keyframes rl {
	0%, 19% { border-radius: 0; }
	20%, 21% { border-radius: 50%; }
	22%, 98% { border-radius: 0; }
	99%, 100% { border-radius: 50% }
}

@keyframes tb {
	0%, 34% { border-radius: 0; }
	35%, 36% { border-radius: 50%; }
	37%, 79% { border-radius: 0; }
	80%, 81% { border-radius: 50%; }
	82%, 100% { border-radius: 0; }
}