$unit: 1vw;
//
$bg-1: darken(#30beff, 8);
$bg-2: darken(#259bfd, 6);
$bg-3: darken(#1d7ce8, 4);
$blue-1: #32c8fe;
$blue-2: #27a2fe;
$blue-3: #1d88fe;
$blue-4: #0f55d7;
$blue-5: #042f7f;
$black-1: #363636;
$black-2: #1a1919;
$black-3: #0a0a0a;
$neon: #6bffff;
/***********************/
@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); }
        }
        @for $var from 1 to 20 {
            &:nth-of-type(#{$var}){ background-color: darken($color, $var * .5); }
        }
        @for $var from 1 to 20 {
            &:nth-last-of-type(#{$var}){ background-color: darken($color, $var * .5); }
        }
    }
    &__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);
}
/***********************/
/***********************/
*, *::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: 'Press Start 2P', cursive;
}
/***********************/
/***********************/
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;

    color: $blue-3;
    font-weight: bolder;
    overflow: hidden;
    background-image: linear-gradient(to bottom, $bg-3, $bg-2, $bg-1, darken($bg-1, 5));
}
.face{ position: absolute; }
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.svg-icon{
    position: absolute;
    left: 50%;
    bottom: 50px;
    width: 50px;
    height: 50px;

    z-index: 1;
    opacity: .65;
    transform: translateX(-50%);
    cursor: pointer;

    &:hover{ opacity: .9; }
    @media (max-height: 400px) { left: 50px; }

}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
	fill: white;
}
.svg-icon circle {
	stroke: white;
	stroke-width: 1;
}
/***********************/
/***********************/
.main{
    position: absolute;
    width: 24 * $unit;
    height: 25 * $unit;
    transform:
        perspective(300 * $unit)
        rotateX(60deg)
        rotateZ(30deg)
        translateZ(-8 * $unit)
    ;
    transition: transform 550ms ease-out;

    &-rotate{
        position: absolute;
        width: 100%;
        height: 100%;
    }
}
.wrapper-c1,
.wrapper-c2{
    width: 100%;
    height: 100%;
    position: absolute;
}
.wrapper-a{
    position:absolute;
    width: 100%;
    height: 100%;
    transform: translateZ(1 * $unit);

}
.wrapper-b{
    position:absolute;
    left: 50%;
    width: 9.5 * $unit;
    height: 100%;
    transform: translateX(-50%) translateZ(2 * $unit);
}
.shadows{
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(.85 * $unit);
}
.shadow{
    position: absolute;
    top: 0;
    border-radius: 2 * $unit;
    box-shadow: 0 0 2 * $unit lighten($blue-4, 10);
    background-image: radial-gradient(rgba(darken($blue-5, 3), .8) 40%, rgba(darken($blue-4, 3), .8) 70%);
}
.shadow-1,
.shadow-2{
    width: 8 * $unit;
    height: 17 * $unit;
}
.shadow-1{ left: -.5 * $unit; }
.shadow-2{ right: -.5 * $unit; }
.shadow-3{
    top: 4 * $unit;
    left: 50%;
    width: 11 * $unit;
    height: 20 * $unit;
    transform: translateX(-50%);
}
.shadow-4{
    top: 4 * $unit;
    width: 100%;
    height: 12 * $unit;
}
.shadow-5{
    top: 5 * $unit;
    left: -15%;
    width: 130%;
    height: 4 * $unit;
}
.light-1,
.light-2,
.light-3,
.light-4,{
    top: 14 * $unit;
    width: 5 * $unit;
    height: 24 * $unit;
    border-radius: 50%;
    box-shadow: 0 0 .5 * $unit lighten($neon, 10);
    background-image: linear-gradient(to bottom, rgba($neon, .185), rgba($neon, .4) 20%, rgba($neon, .25) 60%, rgba($neon, .05) );
}
.light-1{ left: 0; }
.light-2{ right: 0; }

.light-3,
.light-4{
    top: -10 * $unit;
    width: 7 * $unit;
    height: 16 * $unit;
}
.light-3{ left: 0; }
.light-4{ right: 0; }

.wave{
    position: absolute;
    border-radius: 50%;
}
// ==========================
.a{
    $width-el: 7 * $unit;
    $height-el: 7 * $unit;
    $depth-el: 8 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;

    &__front,
    &__back{
        background-position:
            0 0,
            0 100%,
            100% 0,
            100% 100%,
            49% 0
        ;
        background-size:
            10% 50%,
            10% 50%,
            10% 50%,
            10% 50%,
            82% 100%
        ;
        background-repeat: no-repeat;
    }
    &__back{
        box-shadow:  inset 0 0 0 .25 * $unit $neon;
        border-radius: 1.15 * $unit;
    }
    &__top,
    &__bottom{
        &::before,
        &::after{
            content: '';
            position: absolute;
            width: 1.1 * $unit;
            height: 100%;
        }
        &::before{
            left: 89%;
            transform-origin: left;
            transform: rotateY(45deg);
        }
        &::after{
            right: 89%;
            transform-origin: right;
            transform: rotateY(-45deg);
        }
    }
    &__bottom{ background-image: linear-gradient(to right, transparent 10%, $blue-4 10%, darken($blue-4, 4) 90%, transparent 90% ); }

    &:nth-of-type(1){
        left: 0;
        .a__front{
            background-image:
                linear-gradient(-45deg, $blue-2 2.4125 * $unit, transparent 2.4125 * $unit),
                linear-gradient(45deg, transparent .525 * $unit, darken($blue-3, 10) .525 * $unit, $blue-2),
                linear-gradient(45deg, $blue-2 2.4125 * $unit, transparent 2.4125 * $unit),
                linear-gradient(-45deg, transparent .525 * $unit, darken($blue-3, 10) .525 * $unit, $blue-2),
                linear-gradient(to bottom, $blue-2 50%, darken($blue-3, 10))
            ;
        }
        .a__back{
            background-image:
                linear-gradient(-45deg, $blue-3  2.4125 * $unit, transparent 2.4125 * $unit),
                linear-gradient(45deg, transparent .525 * $unit, darken($blue-3, 5) .525 * $unit, $blue-3),
                linear-gradient(45deg, $blue-3 2.4125 * $unit, transparent 2.4125 * $unit),
                linear-gradient(-45deg, transparent .525 * $unit, darken($blue-3, 5) .525 * $unit, $blue-3),
                linear-gradient(to bottom, $blue-3 50%, darken($blue-3, 5))
            ;
        }
        .a__top{
            background-image: linear-gradient(to right,  transparent 10%, lighten($blue-1, 4) 10%, darken($blue-1, 4) 90%, transparent 90% );
            &::before{ background-color: lighten($blue-2, 1); }
            &::after{ background-color: lighten($blue-1, 5); }

            &-shadow{
                top: 2.75 * $unit;
                right: 1 * $unit;
                width: 3 * $unit;
                height: 9 * $unit;

                transform-origin: bottom right;
                transform: skewY(-40deg) translateZ(1px);
                background-image: linear-gradient(to left, rgba($blue-1, .6), rgba($neon, .4), rgba($neon, .2) );
                filter: blur(.45 * $unit);
            }

            &-neon{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: .5 * $unit;
                height: 100%;

                background-color: lighten($neon, 5);
                box-shadow: inset 0 0 .15 * $unit $blue-5;
            }
        }
        .a__right{ background-image: linear-gradient(to bottom, transparent 10%, darken($blue-3, 10) 10%, darken($blue-3, 16) 90%, transparent 90%); }
        .a__left{
            background-image: linear-gradient(to bottom, transparent 10%, lighten($blue-1, 3) 10%, darken($blue-1, 6) 90%, transparent 90%);

            &::before{
                content: '';
                position: absolute;
                bottom: 10%;
                right: 7 * $unit;
                width: 4 * $unit;
                height: 2.5 * $unit;

                transform-origin: top left;
                transform: skewX(20deg);
                background-image: linear-gradient(to bottom, darken($blue-2, 2), rgba($blue-2,.2));
                filter: blur(.15 * $unit);
            }
        }
        .a__bottom{
            &::before{ background-color: $blue-3; }
            &::after{ background-color: $blue-4; }
        }
    }
    &:nth-of-type(2){
        right: 0;
        .a__front{
            background-image:
                linear-gradient(-45deg, darken($blue-2, 6) 2.4125 * $unit, transparent 2.4125 * $unit),
                linear-gradient(45deg, transparent .525 * $unit, darken($blue-3, 14) .525 * $unit, $blue-2),
                linear-gradient(45deg, darken($blue-2, 6) 2.4125 * $unit, transparent 2.4125 * $unit),
                linear-gradient(-45deg, transparent .525 * $unit, darken($blue-3, 14) .525 * $unit, darken($blue-2, 6)),
                linear-gradient(to bottom, darken($blue-2, 6) 50%, darken($blue-3, 14))
            ;
        }
        .a__back{
            background-image:
                linear-gradient(-45deg, darken($blue-3, 3)  2.4125 * $unit, transparent 2.4125 * $unit),
                linear-gradient(45deg, transparent .525 * $unit, darken($blue-3, 6) .525 * $unit, $blue-3),
                linear-gradient(45deg, darken($blue-3, 3) 2.4125 * $unit, transparent 2.4125 * $unit),
                linear-gradient(-45deg, transparent .525 * $unit, darken($blue-3, 6) .525 * $unit, $blue-3),
                linear-gradient(to bottom, darken($blue-3, 3) 50%, darken($blue-3, 6))
            ;
        }
        .a__top{
            background-image:
                linear-gradient(60deg, rgba($blue-2, .8), rgba($blue-2, .45) 48%, transparent 50% ),
                linear-gradient(to right, transparent 10%, $blue-1 10%, darken($blue-1, 4) 90%, transparent 90% )
            ;
            background-size:
                80% 100%,
                100% 100%
            ;
            background-position:
                52% 0,
                0 0
            ;
            background-repeat: no-repeat;

            &::before{ background-image: linear-gradient(to right, $blue-2, $blue-3); }
            &::after{ background-image: linear-gradient(to left, darken($blue-1, 5), $blue-3); }

            &-shadow{
                top: 2.75 * $unit;
                left: 1.5 * $unit;
                width: 3 * $unit;
                height: 9 * $unit;

                transform-origin: bottom left;
                transform: skewY(40deg) translateZ(1px);
                background-image: linear-gradient(to right, rgba($neon, .1), rgba($neon, .315), rgba($neon, .215) );
                filter: blur(.5 * $unit);
            }
            &-neon{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: .5 * $unit;
                height: 100%;

                background-color: $neon;
                box-shadow: inset 0 0 .15 * $unit $blue-5;
            }
        }
        .a__right{
            background-image: linear-gradient(to bottom, transparent 10%, darken($blue-3, 3) 10%, darken($blue-3, 13) 90%, transparent 90%);
            &::before{
                content: '';
                position: absolute;
                bottom: 10%;
                left: 7 * $unit;

                width: 4 * $unit;
                height: 2.5 * $unit;
                transform-origin: top left;
                transform: skewX(-20deg);
                background-image: linear-gradient(to bottom, rgba($blue-4,.9), rgba($blue-4,.2));
                filter: blur(.15 * $unit);
            }
        }
        .a__left{ background-image: linear-gradient(to bottom, transparent 10%, darken($blue-3, 2) 10%, darken($blue-3, 15) 90%, transparent 90%); }
        .a__bottom{
            &::before{ background-color: $blue-4; }
            &::after{ background-color: $blue-4; }
        }
    }
}

.b{
    $width-el: 9.5 * $unit;
    $height-el: 10 * $unit;
    $depth-el: 5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
    top: 2.1 * $unit;

    &__front{ background-color: $blue-5; }
    &__back{
        background-image: linear-gradient(to bottom, lighten($blue-3, 4), $blue-3 20% ,darken($blue-3, 12));

        &::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: .75 * $unit;

            background-image:
                radial-gradient(rgba($neon, .2) 20%, transparent 21%),
                radial-gradient(rgba($neon, .2) 20%, transparent 21%)
            ;
            background-size: .75 * $unit .75 * $unit;
            background-repeat: repeat;
            background-clip: content-box;
        }
    }
    &__left,
    &__right{
        padding: .6 * $unit;
        &::before{
            content: '';
            display: block;
            width: 100%;
            height: 2 * $unit;
        }
    }
    &__left{
        background-image: linear-gradient(to bottom, lighten($blue-1, 4), $blue-1 30%, $blue-4 );

        &::before{
            background-image: linear-gradient(to bottom, lighten($neon, 5), $neon);
            box-shadow:
                0 0 .95 * $unit lighten($neon, 5),
                inset 0 0 .5 * $unit lighten($neon, 5);
        }
    }
    &__right{
        background-image: linear-gradient(to bottom, $blue-3, darken($blue-3, 5) 30%, darken($blue-3, 20) );

        &::before{
            background-image: linear-gradient(to top, darken($neon, 5), $neon);
            box-shadow:
                0 0 .95 * $unit darken($neon, 5),
                inset 0 0 .5 * $unit darken($neon, 10);
        }
    }
    &__top{ background-image: linear-gradient(to right, darken($blue-1, 1) , darken($blue-1, 10) ); }
    &__bottom{ background-color: $blue-4; }
}
.c{
    $width-el: 9.5 * $unit;
    $height-el: 10 * $unit;
    $depth-el: 2.5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
    top: 12.25 * $unit;

    &__front{
        background-color: $blue-2;

        &-l{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom, transparent 15%, rgba($neon, .3) 15%, rgba($neon, .4));
        }
    }
    &__back{ background-color: $blue-5; }
    &__left{ background-image: linear-gradient(to bottom, lighten($blue-1, 4), $blue-1 30%, $blue-4 );}
    &__right{ background-image: linear-gradient(to bottom, $blue-3, darken($blue-3, 5) 30%, darken($blue-3, 20) ); }
    &__top{ background-image: linear-gradient(to right, darken($blue-1, 1) , darken($blue-1, 10) ); }
    &__bottom{ background-color: $blue-4; }
}

.d{
    $width-el: 9.5 * $unit;
    $height-el: .6 * $unit;
    $depth-el: 2.875 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;

    &__left{ background-image: linear-gradient(to right, darken($blue-3, 5), $blue-1); }
    &__right{ background-image: linear-gradient(to left, darken($blue-3, 10), $blue-3 ); }
    &__top{
        background-image: linear-gradient(to bottom, darken($blue-3, 14), darken($blue-3, 8) 40%, darken($blue-3, 3));

        &-l{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to right, rgba($neon, .3), rgba($neon, .4));
        }
    }
    &__bottom{ background-color: $blue-4; }

    bottom: 2 * $unit;
}
.e{
    $width-el: 9.5 * $unit;
    $height-el: 8.5 * $unit;
    $depth-el: .3 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
    bottom: 1.4 * $unit;

    &__front{
        background-color: $blue-2;
        padding: .6 * $unit;

        &-i{
            width: 100%;
            height: 2 * $unit;

            background-image: linear-gradient(to bottom, $neon, darken($neon, 2));
            box-shadow:
                0 0 .95 * $unit darken($neon, 5),
                inset 0 0 .25 * $unit darken($neon, 10);
            overflow: hidden;

            &::before{
                content: '';
                position: absolute;
                width: 3 * $unit;
                height: 100%;
                left: 0;

                transform-origin: top left;
                transform: skewX(20deg);
                background-image: linear-gradient(to right, rgba($neon, .075), transparent) ;
                filter: blur(.2 * $unit);
            }
        }
        &-t{
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 1 * $unit;
        }
    }
    &__back{ background-color: $blue-1; }
    &__left{ background-image: linear-gradient(to bottom, lighten($blue-1, 4), $blue-1 ); }
    &__right{ background-color:  $blue-3; }
    &__bottom{ background-color: $blue-4; }
}
.f{
    $width-el: 9.5 * $unit;
    $height-el: .6 * $unit;
    $depth-el: 3.15 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;

    bottom: 1.5 * $unit;
    transform: translateZ(8.5 * $unit);

    &__front{
        &-i{
            position: absolute;
            bottom: 0;

            width: 100%;
            height: 2.8 * $unit;
            transform-origin: bottom;
            transform: rotateX(78deg);
            background-image: linear-gradient(to right, darken($blue-1, 1) , darken($blue-1, 10) );

        }
    }
    &__left{
        background-image: linear-gradient(12deg, lighten($blue-1, 4) 70%, transparent 70%);
        &::before{
            content: '';
            position: absolute;
            top: 100%;
            right: .5 * $unit;
            width: 40%;
            height: 200%;
            background-image: linear-gradient(12deg, transparent 70%, lighten($blue-1, 5) 70%);
        }
    }
    &__right{
        background-image: linear-gradient(-12deg, $blue-3 70%, transparent 70%);
        &::before{
            content: '';
            position: absolute;
            top: 100%;
            left: .5 * $unit;
            width: 40%;
            height: 200%;
            background-image: linear-gradient(-12deg, transparent 70%, $blue-3 70%);
        }
    }
    &__top{
        background-image: linear-gradient(to bottom, $blue-1 60%, transparent 60%);

        &::after{
            content: '';
            position: absolute;
            top: 0;
            width: 100%;
            height: 60%;
            background-image: linear-gradient(to right, darken($blue-1, 1) , darken($blue-1, 10) );
        }
    }
    &__bottom{ background-color: $blue-1;  }
}

.g{
    $width-el: 9.5 * $unit;
    $height-el: 5 * $unit;
    $depth-el: .5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
    bottom: .5 * $unit;

    &__front{
        background-image: linear-gradient(to top, darken($blue-2, 5) 3.9 * $unit, transparent 3.9 * $unit);

        &::before{
            content: '';
            position: absolute;
            bottom: 1.75 * $unit;
            height: .5 * $unit;
            width: 100%;
            background-color: $neon;
            box-shadow:
                inset 0 0 .15 * $unit $blue-5,
                0 0 .15 * $unit $neon
            ;
        }

    }
    &__left{ background-image: linear-gradient(45deg, $blue-1 3.55 * $unit, transparent 3.55 * $unit); }
    &__right{ background-image: linear-gradient(-45deg, $blue-3 3.55 * $unit, transparent 3.55 * $unit); }
    &__top{
        &::before{
            content: '';
            display: block;
            height: 1.5 * $unit;
            transform-origin: top left;
            transform: rotateX(-46deg);
            background-image: linear-gradient(to right, $blue-1, darken($blue-1, 3));
        }

    }
    &__bottom{ background-color: $blue-4; }
}
.h{
    $width-el: .425 * $unit;
    $height-el: 1 * $unit;
    $depth-el: 6.35 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;

    position: absolute;
    transform: translateX(-50%) translateZ(10.1 * $unit);
    left: 50%;
    bottom: 9 * $unit;

    &__front{ background-color: $blue-2; }
    &__back{ background-image: linear-gradient(to bottom, $blue-3, darken($blue-3, 5) 80%); }
    &__left{ background-image: linear-gradient(to bottom, lighten($blue-1, 5), lighten($blue-1, 2) ); }
    &__right{ background-image: linear-gradient(to bottom, $blue-3, darken($blue-3, 4)); }
    &__top{
        background-color: $neon;
        box-shadow: 0 0 .5 * $unit lighten($neon, 5);
    }
    &__bottom{
        background-color: $blue-3;

        &::before{
            content: '';
            position: absolute;
            right: 0%;
            width: 2.25 * $unit;
            height: 100%;

            background-image: linear-gradient(to right, rgba($blue-2, .5) 10%, darken($blue-2, 10));
            transform-origin: right bottom;
            transform: skewY(-20deg);
            filter: blur(.2 * $unit);
        }
    }
}
.i{
    $width-el: 9 * $unit;
    $height-el: 8  * $unit;
    $depth-el: 2.85 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
    bottom: 2 * $unit;
    left: .25 * $unit;
    transform:  translateZ(.6 * $unit);


    &__left{
        background-image: linear-gradient(to bottom, lighten($neon, 5), $neon);
        box-shadow:inset 0 0 .5 * $unit lighten($neon, 5);
    }
    &__right{
        background-image: linear-gradient(to top, darken($neon, 10), $neon);
        box-shadow: inset 0 0 .5 * $unit darken($neon, 10);
    }
}
.wing{
    $width-el: 4 * $unit;
    $height-el: .5 * $unit;
    $depth-el: 2 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;

    position: absolute;
    top: 5 * $unit;

    transform: translateZ(3 * $unit);

    &:nth-of-type(1){
        left: 100%;
        .wing__front{
            &::before{
                content: '';
                position: absolute;
                left: 0;
                width: 145%;
                height: 100%;
                transform-origin: bottom left;
                transform: rotateY(45deg);
                background-image: linear-gradient(to right, $blue-3, $blue-2);
            }
        }
        .wing__back{ background-image: linear-gradient(to bottom, darken($blue-3, 2) 50%,darken($blue-3, 10)); }
        .wing__left{ background-image: linear-gradient(to bottom, lighten($blue-1, 4), $blue-1 ); }
        .wing__top{ background-image: linear-gradient(-45deg, transparent 50%, $blue-1 50%, darken($blue-2, 1) ); }
        .wing__bottom{ background-image: linear-gradient(45deg, transparent 50%, $blue-4 50%); }

    }
    &:nth-of-type(2){
        right: 100%;
        .wing__front{

            &::before{
                content: '';
                position: absolute;
                right: 0;
                width: 145%;
                height: 100%;
                transform-origin:  bottom right;
                transform: rotateY(-45deg);
                background-image: linear-gradient(to right, $blue-2, darken($blue-2, 5));
            }
        }
        .wing__back{ background-image: linear-gradient(to bottom, darken($blue-3, 2) 50%,darken($blue-3, 10));}
        // .wing__left{ background-image: linear-gradient(to bottom, lighten($blue-1, 4), $blue-1 ); }
        .wing__right{ background-image: linear-gradient(to bottom, $blue-3, darken($blue-3, 4)); }
        .wing__top{ background-image: linear-gradient(45deg, transparent 50%, lighten($blue-1, 3) 50%, $blue-1 ); }
        .wing__bottom{ background-image: linear-gradient(-45deg, transparent 50%, $blue-4 50%); }
    }
}
/*---------------------*/
.turbo{
    position: absolute;
    width: 5.5 * $unit;
    height: 5.5 * $unit;
}
.circle{
    $sides: 36;
    $degree: 360deg;
    $width: 1 * $unit;

    width: 5.5 * $unit;
    height: 5.5 * $unit;
    position: absolute;

    &-a{
        $base: 5.5 * $unit;
        $pi: 3.5;

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

        @include cylinder($base, $sides, $degree, $pi, $width, lighten($black-2, 4));
        &__bottom{
            border: .115 * $unit solid $neon;
            background-image: radial-gradient(circle, transparent 50%, $black-3 50%);

        }
        &__top{
            outline: .2 * $unit solid rgba($blue-3, .9);
            box-shadow:  0 0 1 * $unit darken($neon, 10);
        }
    }
    &-b{
        $base: 4 * $unit;
        $pi: 3.5;

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

        @include cylinder($base, $sides, $degree, $pi, $width, darken($neon, 40));
        &__bottom{
            background-image: radial-gradient(circle, $neon 30%, darken($neon, 20));
            box-shadow:
                inset 0 0 1 * $unit .25 * $unit lighten($neon, 15),
                0 0 1 * $unit .5 * $unit $blue-5
            ;
            transform: rotateY(90deg) translateZ( .45 * $unit );
        }
    }
}
.turbo-back{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: .25 * $unit;
    justify-items: center;
    align-items: center;

    width: 85%;
    height: 85%;

    &__item{
        width: 2.5 * $unit;
        height: 2.5 * $unit;

        background-color: $neon;
        border-radius: 50%;
        box-shadow:
            inset 0 0 .5 * $unit .125 * $unit rgba($black-1, .25),
            0 0 .5 * $unit .25 * $unit rgba($blue-4, .125),
            0 0 .5 * $unit darken($neon, 10)

        ;
    }
}