$black-5: #000000;
$black-4: lighten($black-5, 2);
$black-3: lighten($black-5, 5);
$black-2: lighten($black-5, 7);
$black-1: lighten($black-5, 9);

$white-1: #ffffff;
$white-2: darken($white-1, 3);
$white-3: darken($white-2, 5);
$white-4: darken($white-3, 8);
$white-5: darken($white-4, 10);

$cyan-1: #00ffff;
$cyan-2: darken($cyan-1, 10);
$cyan-3: darken($cyan-1, 20);
$cyan-4: darken($cyan-1, 30);

$green-1: #00ff62;
$green-2: darken($green-1, 10);
$green-3: darken($green-1, 20);
$green-4: darken($green-1, 30);

$pink-1: #ff00c8;
$pink-2: darken($pink-1, 10);
$pink-3: darken($pink-1, 20);
$pink-4: darken($pink-1, 30);

$bg-1: #6E68d8;
$bg-2: darken($bg-1, 5);

/***********************/
@mixin cylinder($base, $sides, $degree, $pi, $width, $color) {
    display: flex;
    justify-content: center;
    align-items: center;
	position: absolute;

    &__side{
        position: absolute;
        height: ( 2 * $pi * ($base / 2) ) / $sides ;
        width: $width;
        background-color: darken($color, 15);

    
        @for $var from 1 to ($sides + 1) {
            &:nth-of-type(#{$var}){
                transform: rotateX( $var * $degree / $sides ) translateZ($base / 2);
            }
        }
    }
    &__top,
    &__bottom{
        position: absolute;
        width: $base;
        height: $base;
        border-radius: 50%;
        transform: rotateY(90deg) translateZ( $width / 2 );
    }
    &__bottom{ transform: rotateY(90deg) translateZ( $width / -2 );}
}
@mixin cube($width, $height, $depth) {
    &__front{ @include cube-front($width, $height, $depth); }
    &__back{ @include cube-back($width, $height, $depth); }
    &__right{ @include cube-right($width, $height, $depth); }
    &__left{ @include cube-left($width, $height, $depth); }
    &__top{ @include cube-top($width, $height, $depth);}
    &__bottom{ @include cube-bottom($width, $height, $depth); }
}
//----------------------
@mixin cube-front($width, $height, $depth) {
    width: $width;
    height: $height;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ( -($height - ($depth * 2) ) );
}
@mixin cube-back($width, $height, $depth) {
    width: $width;
    height: $height;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-$width) translateY(-$height) ;
}
@mixin cube-right($width, $height, $depth) {
    width: $depth * 2;
    height: $height;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ($width) translateX(-$depth * 2) translateY(-$height);
}
@mixin cube-left($width, $height, $depth) {
    width: $depth * 2;
    height: $height;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
}
@mixin cube-top($width, $height, $depth) {
    width: $width;
    height: $depth * 2;
    transform-origin: top left;
    transform: translateZ($height) ;
}
@mixin cube-bottom($width, $height, $depth) {
    width: $width;
    height: $depth * 2;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-$width);
}
@mixin face-ani($animation, $time, $side, $width-el, $height-el, $depth-el) {

    animation: #{$animation} #{$time} infinite ease;

    @keyframes #{$animation} {
        0%, 15%, 45%, 60%, 62%, 68%{
            @if $side == "cube-front" { @include cube-front($width-el, $height-el, $depth-el); }
            @else if $side == "cube-back" { @include cube-back($width-el, $height-el, $depth-el); }
            @else if $side == "cube-right" { @include cube-right($width-el, $height-el, $depth-el); }
            @else if $side == "cube-left" { @include cube-left($width-el, $height-el, $depth-el); }
            @else if $side == "cube-top" { @include cube-top($width-el, $height-el, $depth-el); }
            @else if $side == "cube-bottom" { @include cube-bottom($width-el, $height-el, $depth-el); }

        }
        20%, 40%, 58%, 64%, 70%, 100%{
            @if $side == "cube-front" { @include cube-front($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-back" { @include cube-back($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-right" { @include cube-right($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-left" { @include cube-left($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-top" { @include cube-top($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-bottom" { @include cube-bottom($width-el, $height-el, $depth-el); }
        }
    }
}
@mixin cube-color($color) {
    &__front{ background-color: darken($color, 5); }
    &__back{ background-color: darken($color, 10) }
    &__right{ background-color: darken($color, 10) }
    &__left{ background-color: darken($color, 20); }
    &__top{ background-color: $color; }
    &__bottom{ background-color: darken($color, 20);}
}
/***********************/
/***********************/
*, *::after, *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    transform-style: preserve-3d;
    
	user-select: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    font-family: 'Wallpoet', cursive;
}
/***********************/
/***********************/
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;

    overflow: hidden;
	cursor: pointer;
    background-color: $bg-1;
}
.face{ position: absolute; }
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
/***********************/
/***********************/
.main{
    position: absolute;
    width: 61.25vw;
    height: 25vw;
    transform:
        perspective(20000px)
        rotateX(60deg)
        rotateZ(30deg)
        translateZ(-6vw)
    ;
    transition: transform 50ms linear;
}
.shadow{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: $bg-2;
    transform: translateZ(-8vw);
}
.g{
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top;
    transform: translateZ(10vw) rotateX(-90deg);
    font-size: 3vw;
    text-transform: uppercase;
    color: $white-1;
    opacity: 0;
}
/*---------------------*/
.bls{
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateZ(-.75vw);
}
    .bl{
        $width-el: 4vw;
        $height-el: .875vw;
        $depth-el: 2vw;
        
        @include cube($width-el, $height-el, $depth-el);
        width: $width-el;
        height: $depth-el * 2;

        position: absolute;

        &__front{ background-color: $black-3; }
        &__back{ background-color: $black-5; }
        &__right{ background-color: $black-5; }
        &__left{ background-color: $black-3; }
        &__top{ background-color: $black-5; }
        &__bottom{  background-color: $black-5; }

        &:nth-of-type(1){ left: 2vw; bottom: 2vw; }
        &:nth-of-type(2){ right: 2vw; bottom: 2vw; }
        &:nth-of-type(3){ left: 2vw; top: 2vw; }
        &:nth-of-type(4){ right: 2vw; top: 2vw; }
    }
.a{
    $width-el: 61.25vw;
    $height-el: 2vw;
    $depth-el: 12.5vw;
    
    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;

    &__front{ background-color: $black-3; }
    &__back{ background-color: $black-5; }
    &__right{ background-color: $black-4; }
    &__left{ background-color: $black-1; }
    &__top{ background-color: $black-2; }
    &__bottom{  background-color: $black-5; }
}
.b-left{
    $width-el: 18vw;
    $height-el: 3vw;
    $depth-el: 12.5vw;
    
    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    
    position: absolute;
    top: 0;
    left: 0;
    transform: translateZ(2vw);

    &__front{ background-color: $black-3; }
    &__back{ background-color: $black-5; }
    &__right{ background-color: $black-4; }
    &__left{ background-color: $black-1; }
    &__top{ background-color: $black-2; }
    // &__bottom{  background-color: $black-5; }
    &__plug{
        position: absolute;
        right: 6vw;
        top: calc(50% + .5vw);
        width: 1vw;
        height: 1vw;
        border-radius: 50%;
        border: .2vw solid rgba($white-1, 1);
    }
}
.b-right{
    $width-el: 2vw;
    $height-el: 3vw;
    $depth-el: 12.5vw;
    
    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    
    position: absolute;
    top: 0;
    right: 0;
    transform: translateZ(2vw);

    &__front{ background-color: $black-3; }
    &__back{ background-color: $black-5; }
    &__right{ background-color: $black-4; }
    &__left{ background-color: $black-1; }
    &__top{ background-color: $black-2; }
    // &__bottom{  background-color: $black-5; }
}
.b-top{
    $width-el: 41.25vw;
    $height-el: 3vw;
    $depth-el: 2vw;
    
    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    
    position: absolute;
    top: 0;
    left: 18vw;
    transform: translateZ(2vw);

    &__front{ background-color: $black-4; }
    &__back{ 
        background-color: $black-5;
        padding-top: .75vw;
    }
    // &__right{ background-color: $black-4; }
    // &__left{ background-color: $black-1; }
    &__top{ 
        background-color: $black-2; 
        display: flex;
        justify-content: flex-end;
        padding-top: 1vw;
    }
    // &__bottom{  background-color: $black-5; }
}
.keys{
    width: 41.25vw;
    height: 20.25vw;
    position: absolute;
    left: 18vw;
    top: 4vw;
    transform: translateZ(2vw);

    &--b{ transform: translateZ(4.5vw);}
}
    .key-w{
        $width-el: 2.7vw;
        $height-el: 2.4vw;
        $depth-el: 10.125vw;
        
        @include cube($width-el, $height-el, $depth-el);
        width: $width-el;
        height: $depth-el * 2;
        
        position: absolute;
        top: 0;
        left: 0;
        transition: transform 50ms linear;

        &__front{ background-color: $white-4; }
        &__back{ background-color: $white-5; }
        &__right{ background-color: $white-5; }
        &__left{ background-color: $white-5; }
        &__top{ background-color: $white-2; }
        &__bottom{  background-color: $white-5; }

        @for $var from 0 to 15 {
            &:nth-of-type(#{$var + 1}){ left: 2.75vw * $var; }
        }
    }

    .key-b{
        $width-el: 1.5vw;
        $height-el: .6vw;
        $depth-el: 6vw;
        
        @include cube($width-el, $height-el, $depth-el);
        width: $width-el;
        height: $depth-el * 2;
        
        position: absolute;
        top: 0;
        left: 0;

        &__front{ 
            &::before{
                content: '';
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 1.5vw;
                transform-origin: bottom;
                transform: rotateX(70deg);
                background-color: $black-2;
            }
        }
        &__back{ background-color: $black-5; }
        &__right{ background-image: linear-gradient(-25deg, $black-4 5.1vw, transparent 5.1vw); }
        &__left{ background-image: linear-gradient(25deg, $black-1  5.1vw, transparent 5.1vw); }
        &__top{ background-image: linear-gradient(to bottom, $black-2 10.75vw, transparent 10.75vw); }
        &__bottom{  background-color: $black-5; }

        &:nth-of-type(1){ left: 2vw;}
        &:nth-of-type(2){ left: 4.75vw;}
        &:nth-of-type(3){ left: 10.25vw;}
        &:nth-of-type(4){ left: 13vw;}
        &:nth-of-type(5){ left: 15.75vw;}
        &:nth-of-type(6){ left: 21.25vw;}
        &:nth-of-type(7){ left: 24vw;}
        &:nth-of-type(8){ left: 29.5vw;}
        &:nth-of-type(9){ left: 32.25vw;}
        &:nth-of-type(10){ left: 35vw;}
    }
.controls{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: .5vw;
    width: 18vw;
    height: 25vw;
    position: absolute;
    top: 0;
    left: 0;
    padding: 1.5vw;
    transform: translateZ(5.01vw);
}
    .slots{
        display: grid;
        grid-template-columns: repeat(4, 3.5vw);
        grid-template-rows: repeat(2, 3.5vw);
        grid-gap: .4vw;
    }
        .slot{
            $width-el: 3.4vw;
            $height-el: .4vw;
            $depth-el: 1.75vw;
            
            @include cube($width-el, $height-el, $depth-el);
            width: $width-el;
            height: $depth-el * 2;
       
            &:nth-of-type(1),
            &:nth-of-type(6){

                .slot__front{ background-color: $white-2; }
                .slot__back{ background-color: $white-4; }
                .slot__right{ background-color: $white-3; }
                .slot__left{ background-color: $white-1; }
                .slot__top{ 
                    background-color: $black-4; 
                    border: .15vw solid $white-1;
                }
                .slot__bottom{  background-color: $white-4; }
                box-shadow:
                    .125vw .125vw .35vw rgba($white-1, .15),
                    -.125vw .125vw .35vw rgba($white-1, .15),
                    .125vw -.125vw .35vw rgba($white-1, .15),
                    -.125vw -.125vw .35vw rgba($white-1, .15)
                ;
            }
            &:nth-of-type(4){
                .slot__front{ background-color: $green-2; }
                .slot__back{ background-color: $green-4; }
                .slot__right{ background-color: $green-3; }
                .slot__left{ background-color: $green-1; }
                .slot__top{ 
                    background-color: $black-4; 
                    border: .15vw solid $green-1;
                }
                .slot__bottom{  background-color: $green-4; }
                box-shadow:
                    .25vw .25vw .25vw rgba($green-1, .1),
                    -.25vw .25vw .25vw rgba($green-1, .1),
                    .25vw -.25vw .25vw rgba($green-1, .1),
                    -.25vw -.25vw .25vw rgba($green-1, .1)
                ;
            }
        }
        .slot,
        .button{
            &__front{ background-color: $cyan-2; }
            &__back{ background-color: $cyan-4; }
            &__right{ background-color: $cyan-3; }
            &__left{ background-color: $cyan-1; }
            &__top{ 
                background-color: $black-4; 
                border: .15vw solid $cyan-1;
            }
            &__bottom{  background-color: $cyan-4; }
            box-shadow:
                .125vw .125vw .35vw rgba($cyan-1, .075),
                -.125vw .125vw .35vw rgba($cyan-1, .075),
                .125vw -.125vw .35vw rgba($cyan-1, .075),
                -.125vw -.125vw .35vw rgba($cyan-1, .075)
            ;
        }
    .buttons{
        display: grid;
        grid-template-columns: repeat(2, 2vw);
        grid-template-rows: repeat(3, 2vw);
        grid-gap: .4vw;
    }
        .button{
            $width-el: 2vw;
            $height-el: .4vw;
            $depth-el: 1vw;
            
            @include cube($width-el, $height-el, $depth-el);
            width: $width-el;
            height: $depth-el * 2;
           
            &:nth-of-type(1){
                .button__front{ background-color: $white-2; }
                .button__back{ background-color: $white-4; }
                .button__right{ background-color: $white-3; }
                .button__left{ background-color: $white-1; }
                .button__top{ 
                    background-color: $black-4; 
                    border: .15vw solid $white-1;
                }
                .button__bottom{  background-color: $white-4; }
                box-shadow:
                    .25vw .25vw .125vw rgba($white-1, .1),
                    -.25vw .25vw .125vw rgba($white-1, .1),
                    .25vw -.25vw .125vw rgba($white-1, .1),
                    -.25vw -.25vw .125vw rgba($white-1, .1)
                ;
            }
            &:nth-of-type(4){
                .button__front{ background-color: $green-2; }
                .button__back{ background-color: $green-4; }
                .button__right{ background-color: $green-3; }
                .button__left{ background-color: $green-1; }
                .button__top{ 
                    background-color: $black-4; 
                    border: .15vw solid $green-1;
                }
                .button__bottom{  background-color: $green-4; }
                box-shadow:
                    .25vw .25vw .125vw rgba($green-1, .1),
                    -.25vw .25vw .125vw rgba($green-1, .1),
                    .25vw -.25vw .125vw rgba($green-1, .1),
                    -.25vw -.25vw .125vw rgba($green-1, .1)
                ;
            }
        }
    .equ{
        display: grid;
        grid-template-columns: repeat(6, 2vw);
        grid-gap: .65vw;

        &__item{
            display: grid;
            grid-template-columns: 1fr;
            place-content: center;
            
            &:nth-of-type(1) .circle{ animation: equ-1 linear 1000ms infinite;}
            &:nth-of-type(2) .circle{ animation: equ-2 linear 1000ms infinite;}
            &:nth-of-type(4) .circle{ animation: equ-3 linear 1000ms infinite;}
            &:nth-of-type(5) .circle{ animation: equ-4 linear 1000ms infinite;}
            &:nth-of-type(6) .circle{ animation: equ-5 linear 1000ms infinite;}

        }
            &__title{ 
                width: 100%; 
                text-align: center;
                color: $white-2;
                font-size: .75vw;
            }
    }
        .circle{   
            $sides: 36;
            $degree: 360deg;
            $width: 1.5vw;   
            
            width: 2vw;
            height: 2vw;
            border: .25vw solid rgba($cyan-1, .8);
            border-radius: 50%;
            
            &-a{
                $base: 1.5vw;
                $pi: 3.5;

                position: absolute;
                width: $width;
                height: $base;
                transform: rotateY(90deg) translateX(-50%);

                @include cylinder($base, $sides, $degree, $pi, $width, $black-1);

                &__bottom{ 
                    background-color: $black-1; 

                    &::before{
                        content: '';
                        position: absolute;
                        top: 0;
                        left: calc(50% - .075vw);
                        width: .15vw;
                        height: 60%;
                        background-color: $cyan-1;
                    }
                }
            }

        
        }
/***********************/
/***********************/
.is-key-down{ 
    // transform-origin: top;
    transform: translateZ(-.5vw) rotateX(-3deg);
    transition: transform 50ms linear;

    .key-w__top{ background-color: lighten($pink-1, 45);}
}
.is-main-playing{ animation: main 500ms infinite; }
.is-text-visible{ animation: g linear 500ms infinite; }

@keyframes main {
    0%, 90%, 100%{
        transform:
            perspective(20000px)
            rotateX(60deg)
            rotateZ(30deg)
            translateZ(-6vw)
        ;
    }
    60%{
        transform:
            perspective(10000px)
            rotateX(62deg)
            rotateZ(32deg)
            translateZ(-6vw)
        ;
    }
}
@keyframes key-w { to{ transform: translateZ(-.5vw) rotateX(-3deg);} }
@keyframes g { to{opacity: 1;} }
@keyframes equ-1 {
    0%, 30%, 90%, 100%{ transform: rotateZ(-20);}
    50%, 70%{ transform: rotateZ(60deg);}
}
@keyframes equ-2 {
    to{ transform: rotateZ(1turn);}
}
@keyframes equ-3 {
    0%, 20%, 50%, 90%, 100%{ transform: rotateZ(-60);}
    30%, 40%, 60%, 80%{ transform: rotateZ(40deg);}
}
@keyframes equ-4 {
    0%, 20%, 50%, 90%, 100%{ transform: rotateZ(50deg);}
    30%, 40%, 60%, 80%{ transform: rotateZ(80deg);}
}
@keyframes equ-5 {
    0%, 20%, 40%, 60%, 80%, 100%{ transform: rotateZ(70deg);}
    10%, 30%, 50%, 70%, 90%{ transform: rotateZ(120deg);}
}