Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                mixin link
	div(class!=attributes.class)
		div(class!=attributes.class+'__front face')
			if block
				block
		div(class!=attributes.class+'__back face')
		div(class!=attributes.class+'__right face')
		div(class!=attributes.class+'__left face')
		div(class!=attributes.class+'__top face')
		div(class!=attributes.class+'__bottom face')

audio#a
	source(
		src="https://rawcdn.githack.com/ricardoolivaalonso/Codepen/a7164cf6992d98ab75ca79465024dcd182dd1bdf/Walkman/audio.mp3",
		type="audio/mpeg"
	)

#h.main
	.shadows
	.waves
		- var i = 0;
		while i < 7
			.wave
			- i++;

	+link.a
	+link.b01
	+link.b02
	+link.b03
	+link.b04
	+link.cs

	.sphere.flex
		.circle
		- var i = 1;
		while i < 10
			div(class='sphere-item' + i)
				- var f = 0;
				while f < 12
					div(class='sphere-item' + i + '__side')
					- f++;
			- i++;
	.sphere2.flex
		.circle
		- var i = 1;
		while i < 10
			div(class='sphere-item' + i)
				- var f = 0;
				while f < 12
					div(class='sphere-item' + i + '__side')
					- f++;
			- i++;

	+link.c
		div
			svg.sony(height="448", width="2500", viewBox="0.996 1 498.004 87.678")
				path(
					d="M178.416 88.677c-18.04 0-34.786-5.41-45.964-15.443-8.445-7.58-12.503-17.876-12.503-28.473 0-10.468 4.233-20.835 12.502-28.375C142.832 6.925 161.16 1 178.416 1c19.096 0 34.38 4.81 46.064 15.412 8.313 7.544 12.332 17.865 12.332 28.35 0 10.163-4.265 20.986-12.332 28.472-10.88 10.098-27.978 15.443-46.064 15.443V77.113c9.575 0 18.457-3.306 24.66-9.478 6.16-6.13 9.03-13.665 9.03-22.874 0-8.822-3.096-17.07-9.03-22.92-6.12-6.028-15.214-9.42-24.66-9.42-9.475 0-18.575 3.357-24.7 9.42-5.902 5.848-9.006 14.12-9.006 22.92 0 8.773 3.14 17.04 9.006 22.875 6.13 6.098 15.198 9.478 24.7 9.478v11.564zM46.562 1.042c-9.65 0-20.613 1.805-29.928 5.965C8.037 10.843 1 17.047 1 27.332.996 36.595 6.883 42.02 6.723 41.87c2.504 2.305 6.535 6.23 17.074 8.535 4.71 1.03 14.78 2.612 24.808 3.66 9.954 1.05 19.75 2.048 23.74 3.058 3.17.807 8.495 1.906 8.495 7.88 0 5.95-5.61 7.766-6.585 8.16-.974.385-7.704 3.473-19.802 3.473-8.932 0-19.67-2.686-23.584-4.086-4.512-1.606-9.245-3.73-13.66-9.123-1.098-1.337-2.83-5.014-2.83-8.655H3.43v30.68H15.6v-4.145c0-.472.59-2.413 2.633-1.49 2.542 1.155 10.004 4.126 17.806 5.755 6.397 1.338 10.522 2.297 18.475 2.297 12.976 0 19.947-2.114 24.766-3.49 4.54-1.3 10.15-3.634 14.707-7.268 2.468-1.965 7.88-7.002 7.88-16.145 0-8.776-4.71-14.223-6.367-15.88-2.257-2.258-5.014-4.008-7.887-5.357-2.503-1.178-6.453-2.593-9.685-3.384-6.273-1.54-20.457-3.44-27.24-4.15-7.113-.743-19.452-1.765-24.38-3.29-1.494-.463-4.54-1.914-4.54-5.45 0-2.515 1.393-4.647 4.146-6.37 4.37-2.738 13.197-4.44 22.398-4.44 10.878-.04 20.09 2.447 25.95 5.067 1.993.89 4.325 2.168 6.177 3.68 2.09 1.704 5.024 5.245 6.085 10.184h9.83V4.87H85.378v3.104c0 1.002-1.035 2.304-2.992 1.228-4.912-2.577-18.8-8.137-35.826-8.16m240.536 4.853l53.542 48.32-.55-32.533c-.054-4.266-.84-6.047-5.454-6.047h-10.067V5.903h45.78v9.732h-9.82c-4.706 0-5.003 1.505-5.06 6.047l.83 62.163h-15.678l-61.67-55.04.013 39.062c.054 4.246.253 6.246 4.628 6.246h10.995v9.728h-44.96v-9.727h10.51c3.926 0 3.77-3.743 3.77-6.468V22.052c0-2.943-.413-6.41-6.577-6.41H248.8V5.895zm135.564 68.2c.43 0 2.34-.055 2.71-.168a3.358 3.358 0 0 0 2.106-1.87c.14-.33.21-1.79.21-2.107l.008-15.38c0-.37-.027-.53-.655-1.354-.69-.9-28.045-31.9-29.297-33.265-1.555-1.695-4.285-4.315-8.433-4.315h-9.513V5.9h53.687v9.724h-6.472c-1.497 0-2.492 1.42-1.213 2.998 0 0 18.063 21.607 18.234 21.833.168.23.312.285.542.075.226-.215 18.516-21.71 18.66-21.88.87-1.042.28-3.015-1.595-3.015H455V5.9h44v9.735h-9.83c-3.566 0-5.017.66-7.7 3.693-1.227 1.388-28.874 32.945-29.626 33.8-.394.447-.36 1.07-.36 1.44v15.378c0 .312.07 1.774.21 2.102a3.349 3.349 0 0 0 2.11 1.87c.37.114 2.254.17 2.683.17h10.055v9.734h-53.41v-9.735l9.53.008z"
				)

			svg.name(width="200", height="120", viewBox="0 0 192.756 192.756")
				g(fill-rule="evenodd", clip-rule="evenodd")
					path(fill="transparent", d="M0 0h192.756v192.756H0V0z")
					path(
						d="M166.887 93.083v17.648h6.256l-.016-17.689c0-2.913 2.344-5.317 5.258-5.317s5.277 2.404 5.277 5.317l.004 17.699h6.256l-.01-17.68c0-6.351-5.176-11.522-11.527-11.522s-11.498 5.192-11.498 11.544c0 .029 0-.03 0 0zM89.271 81.915l-6.24-.009.002 28.885h6.255l-.017-28.876zM39.224 93.013l.001 17.772h6.256l-.018-17.812c0-2.914 2.345-5.318 5.259-5.318S56 90.059 56 92.973l.003 17.812h6.255l-.008-17.794c0-6.351-5.176-11.522-11.527-11.522-6.351 0-11.499 5.193-11.499 11.544 0 .029-.001-.029 0 0z"
					)
					path(
						d="M50.706 101.586a4.445 4.445 0 1 0 0-8.89 4.445 4.445 0 0 0 0 8.89zM125.385 91.396c0-2.095 1.748-3.768 3.844-3.768s3.775 1.698 3.775 3.793l.01 19.371h6.143l.002-19.437c0-5.5-4.459-9.958-9.957-9.958-2.629 0-4.973 1.195-6.764 2.911a9.899 9.899 0 0 0-7.002-2.897c-5.5 0-10.082 4.458-10.082 9.958l-.023 19.431h6.293l-.01-19.365c0-2.096 1.754-3.794 3.85-3.794s3.775 1.698 3.775 3.794l.01 19.353h6.143l-.007-19.392zM81.341 104.592l-9.659-.01c-.311 0-.604-.24-.604-.553l-.023-22.116-6.246-.003.005 22.109c0 3.732 3.125 6.773 6.857 6.773l9.668.02.002-6.22zM141.697 93.005l.002 17.772h6.254l-.016-17.813c0-2.913 2.344-5.317 5.258-5.317s5.277 2.404 5.277 5.317l.004 17.813h6.256l-.01-17.793c0-6.352-5.176-11.523-11.527-11.523s-11.498 5.193-11.498 11.544c0 .03 0-.029 0 0z"
					)
					path(
						d="M153.178 101.578a4.445 4.445 0 1 0-4.445-4.445 4.445 4.445 0 0 0 4.445 4.445zM22.89 101.361c0 2.094 1.748 3.768 3.843 3.768s3.789-1.699 3.789-3.795l.01-19.371h6.128l.002 19.438c0 5.5-4.458 9.959-9.958 9.959-2.627 0-4.971-1.195-6.762-2.912a9.904 9.904 0 0 1-7.003 2.898c-5.499 0-10.081-4.459-10.081-9.959l-.024-19.43h6.294l-.01 19.363c0 2.096 1.755 3.793 3.85 3.793s3.774-1.697 3.774-3.793l.01-19.353h6.143l-.005 19.394zM89.267 92.988l3.04.017c2.67 0 4.828-2.393 4.828-5.063l-.01-6.042 5.799-.005-.006 5.751c-.105 3.332-1.795 6.353-4.332 8.284 2.51 1.934 4.178 4.934 4.281 8.242l.006 6.549-5.805.01.008-6.854c0-2.672-2.157-5.064-4.827-5.064l-2.95.016-.012 11.963h-6.255l-.002-28.885 6.24.009.007 11.071-.01.001z"
					)

	+link.d01
	+link.d02
	+link.d03
	+link.d04
	+link.d05
	+link.d06
	+link.line
	+link.button
	+link.button2
	+link.button3
	+link.button4
	+link.button5
	+link.button6
	+link.button7

              
            
!

CSS

              
                $unit: 1.75vmin;
//
$bg-1: #b7ecff;
$bg-2: #639cb5;

$walkman-a-01: #73a5d6;
$walkman-a-02: darken(#73a5d6, 4);
$walkman-a-03: darken(#73a5d6, 10);
$walkman-a-04: darken(#73a5d6, 15);
$walkman-a-black: darken(#73a5d6, 50);

$walkman-b-01: #ffffff;
$walkman-b-02: #daf1f5;
$walkman-b-03: #94b8c1;
$walkman-b-04: #7599a2;

$button-01: #ffcf64;
$button-02: #e7b953;
$button-03: #c49733;

$button-b-01: $walkman-b-01;
$button-b-02: $walkman-b-02;
$button-b-03: lighten($walkman-b-03, 3);

/***********************/
@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 * 1); }
        }
        @for $var from 1 to 20 {
            &:nth-last-of-type(#{$var}){ background-color: darken($color, $var * 1); }
        }
    }
    &__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 sphere($base, $sides, $degree, $pi, $width, $y, $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, 2);

        @for $var from 1 to ($sides + 1) {
			&:nth-of-type(#{$var}) {
				transform: rotateX($var * $degree / $sides) translateZ($base / 2) rotateY($y);
                background-color: darken($color, $var * 1.5)
			}
		}
    }
}
@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: sans-serif;
    font-size: .775 * $unit;
    color: rgba($walkman-a-black, .75);
    text-transform: uppercase;
}
/***********************/
/***********************/
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;

    font-weight: bolder;
    overflow: hidden;
	cursor: grab;
    background-color: $bg-1;
}
.face{ position: absolute; }
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
/***********************/
/***********************/
.main{
    position: absolute;
    width: 24 * $unit;
    height: 7 * $unit;
    transform:
        perspective(400 * $unit)
        rotateX(66deg)
        rotateZ(40deg)
        translateZ(-16 * $unit)
    ;
}


.shadows{
	position: absolute;
	width: 102%;
	height: 102%;
	left: -1%;
	bottom: -1%;
	background-image: radial-gradient($bg-2, darken($bg-2, 15));
	box-shadow: 0 0 .5 * $unit .15 * $unit rgba(darken($bg-2, 15), .5);

	&::after{
		content: '';
		position: absolute;
		width: 102%;
		height: 102%;
		left: -1%;
		top: -1%;

		background-color: darken($bg-2, 20);
		box-shadow: 0 0 .5 * $unit .25 * $unit rgba(darken($bg-2, 15), .5);
		border-radius: .25 * $unit;
		filter: blur(.15 * $unit);
	}

	&::before{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		width: 26.5 * $unit;
	    height: 25 * $unit;

		border-bottom-left-radius: 8.5 * $unit;
		transform-origin: bottom left;
		transform: skewX(-15deg);
		background-image: linear-gradient(to top, darken($bg-2, 20), darken($bg-2, 15) 30%, darken($bg-2, 10) 50%, $bg-2);
		box-shadow: 0 0 .5 * $unit .25 * $unit rgba(darken($bg-2, 15), .5);
		filter: blur(.15 * $unit);
	}
}


.waves {
	position: absolute;
	top: 100%;
	left: 0;

	display: grid;
	grid-auto-flow: column;
	width: 100%;
	height: 100%;
    opacity: 0;
    visibility: hidden;
}

.is-wave-playing {
    visibility: visible;
    opacity: 1;
}

.wave {
	height: 0 * $unit;
	width: (24 * $unit)/7;
	background-color: $bg-2;


	@for $i from 3 through 5 {
		&:nth-of-type(#{$i}) {
			animation: wave 525ms ease-in alternate infinite #{$i * 100}ms;
		}
	}

    &:nth-of-type(2),
    &:nth-of-type(6) {
        height: 0 * $unit;
        animation: wave-2 262.5ms ease-in alternate infinite 425ms;
    }
    &:nth-of-type(1),
	&:nth-of-type(7) {
		height: 0 * $unit;
		animation: wave-3 525ms ease-in alternate infinite 850ms;
	}
}
@keyframes wave {
	0%,
	100% { height: 4 * $unit; }
	24% { height: 6 * $unit; }
	25%,30% { height: 6.5 * $unit; }
	55%, 60% { height: 4.5 * $unit; }
	61%, 65% { height: 6.6 * $unit; }
	80%, 82% { height: 3.5 * $unit; }
	83%, 90% { height: 3 * $unit; }
	95% { height: 3.25 * $unit;}
}

@keyframes wave-2 {
	0% { height: 3 * $unit; }
	100% { height: 6 * $unit; }
}
@keyframes wave-3 {
	0%, 50% { height: 0 * $unit; }
	75%, 100% { height: 5 * $unit; }
}

/***********************/
/***********************/
.a{
    $width-el: 18 * $unit;
    $height-el: 27 * $unit;
    $depth-el: 2.5 * $unit;

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

    &__front{
		background-color: $walkman-a-02;
		padding: 2 * $unit;

		&::after{
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			background-color: $walkman-a-black;
		}
	}
    &__back{
		background-color: $walkman-a-04;

		background-image:
			linear-gradient(to bottom, transparent 70%, darken($walkman-a-04, 30)),
			linear-gradient(to right, transparent 70%, lighten($walkman-a-04, 15)),
			linear-gradient(to left, transparent 70%, lighten($walkman-a-04, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-04, 15)),
			linear-gradient(to top, darken($walkman-a-04, 25), darken($walkman-a-04, 15), darken($walkman-a-04, 10) 20%, $walkman-a-04)
		;
		background-size:
			100% 1 * $unit,
			1 * $unit 100%,
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 100%,
			100% 0,
			0 0,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;

        &::after{
            content: 'stereo';
            position: absolute;
            top: 1 * $unit;
            left: 50%;
            transform: translateX(-50%);
            font-weight: bold;
            font-size: 3 * $unit;
            color: $walkman-a-04;
            text-shadow: 0 0 .1*$unit lighten($walkman-a-04, 20);
        }

        &::before{
            content: '';
            position: absolute;
            width: 15 * $unit;
            height: 10 * $unit;
            bottom: .1 * $unit;
            right: .1 * $unit;
            border-top-left-radius: .5 * $unit;
            background-image: linear-gradient(to bottom, rgba(darken($walkman-a-04, 5), .75), rgba(darken($walkman-a-04, 5), .1));
            border-top: .15 * $unit solid darken($walkman-a-04, 10);
            border-left: .15 * $unit solid darken($walkman-a-04, 10);

        }
	}
    &__left{
		background-color: $walkman-a-01;

		background-image:
            linear-gradient(to left, transparent 70%, lighten($walkman-a-02, 15)),

			linear-gradient(to top, darken($walkman-a-01, 15), darken($walkman-a-01, 10) 20%,$walkman-a-01),
			linear-gradient(to top, $walkman-a-01 70%, lighten($walkman-a-01, 8))
		;
		background-size:
        1 * $unit 100%,

			100% 4 * $unit,
			100% 1 * $unit
		;
		background-position:
            0% 100%,
			0 100%,
			0 0%
		;
		background-repeat: no-repeat;
	}
    &__right{ background-color: $walkman-a-03; }
    &__top{ background-color: $walkman-a-black; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.b01,
.b02,
.b04,
.b03{
	&__front{
		background-color: $walkman-a-02;
		background-image:
			linear-gradient(to top, transparent 70%, lighten($walkman-a-02, 18)),
			linear-gradient(to top, darken($walkman-a-02, 5), darken($walkman-a-02, 2) 20%, $walkman-a-02)
		;
		background-size:
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}

	&__back{
		background-color:$walkman-a-04;

		background-image:
			linear-gradient(to top, transparent 70%, lighten($walkman-a-04, 18)),
			linear-gradient(to top, darken($walkman-a-04, 5), darken($walkman-a-04, 2) 20%, $walkman-a-04)
		;
		background-size:
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
}

.b01{
    $width-el: 5.3 * $unit;
    $height-el: 5 * $unit;
    $depth-el: 3.5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(27 * $unit);

    &__front{
		background-color: $walkman-a-02;
		background-image:
			linear-gradient(to left, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-02, 18)),
			linear-gradient(to top, darken($walkman-a-02, 5), darken($walkman-a-02, 2) 20%, $walkman-a-02)
		;
		background-size:
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 100%,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
    &__back{
		background-color:$walkman-a-04;


		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-a-04, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-04, 18)),
			linear-gradient(to top, darken($walkman-a-04, 5), darken($walkman-a-04, 2) 20%, $walkman-a-04)
		;
		background-size:
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			100% 0%,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
    &__left{
		background-color: $walkman-a-01;

		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to left, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, darken($walkman-a-01, 4), darken($walkman-a-01, 2) 20%,$walkman-a-01),
			linear-gradient(to top, $walkman-a-01 70%, lighten($walkman-a-01, 10)),

		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,

			100% 4 * $unit,
			100% 1 * $unit,
			100% 100%
		;
		background-position:
			100% 0,
			0 100%,
			0 100%,
			0 0%,
			0 0
		;
		background-repeat: no-repeat;
	}
    &__right{ background-image: linear-gradient(to right, $walkman-a-03 20%, $walkman-a-black 20% 60%, $walkman-a-03 60%); }
    &__top{ background-color: $walkman-a-01; }
    &__bottom{ background-color: $walkman-a-04; }
}

.b02{
    $width-el: 8.8 * $unit;
    $height-el: 5 * $unit;
    $depth-el: 3.5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	top: 0;
	left: 9.2 * $unit;
	transform: translateZ(27 * $unit);

    &__front{
		background-color: $walkman-a-02;
		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-02, 18)),
			linear-gradient(to top, darken($walkman-a-02, 5), darken($walkman-a-02, 2) 20%, $walkman-a-02)
		;
		background-size:
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			100% 0%,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
    &__back{
		background-color:$walkman-a-04;

		background-image:
			linear-gradient(to left, transparent 70%, lighten($walkman-a-04, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-04, 18)),
			linear-gradient(to top, darken($walkman-a-04, 5), darken($walkman-a-04, 2) 20%, $walkman-a-04)
		;
		background-size:
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 100%,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
    &__left{ background-image: linear-gradient(to right, $walkman-a-03 30%, $walkman-a-black 30% 80%, $walkman-a-03 80%); }
    &__right{ background-color: $walkman-a-03; }
    &__top{
        background-color: $walkman-a-01;
        display: inline-flex;
        justify-content: center;
        gap: .75 * $unit;

        &::before,
        &::after{
            content: '';
            margin-top: 3 * $unit;

            width: 1.75 * $unit;
            height: 1.75 * $unit;

            border: .225 * $unit solid $walkman-b-01;
            outline: .2 * $unit solid #498d8b;
            border-radius: 50%;
            background-image: radial-gradient(circle at 50% 50%, $walkman-a-black 50%, $walkman-b-03 50%);
        }
    }
    &__bottom{ background-color: $walkman-a-04; }
}

.b03{
    $width-el: 4.2 * $unit;
    $height-el: 5 * $unit;
    $depth-el: 1.4 * $unit;

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

	transform: translateZ(27 * $unit);

    &__front{ background: $walkman-a-black; }
    &__back{  }
    &__left{ background-color: $walkman-a-01; display: none; }
    &__right{ background-color: $walkman-a-03; display: none; }
    &__top{
        background-color: $walkman-a-01;
        &::before{
            content: 'hot line';
            display: inline-block;
            margin-top: 1 * $unit;
            padding: .25 * $unit;


            color: $walkman-a-01;
            background-color: white;
            border-radius: .25 * $unit;
        }
    }
    &__bottom{ background-color: $walkman-a-04; }
}

.b04{
    $width-el: 4.2 * $unit;
    $height-el: 5 * $unit;
    $depth-el: .85 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 0;
	left: 5.2 * $unit;
	transform: translateZ(27 * $unit);

    &__front{ background-color: $walkman-a-02; }
    &__back{ background-color: $walkman-a-black; }
    &__left{ background-color: $walkman-a-03; }
    &__right{ background-color: $walkman-a-03; }
    &__top{ background-color: $walkman-a-01;}
    &__bottom{ background-color: $walkman-a-04; }
}



.c{
    $width-el: 18 * $unit;
    $height-el: 27 * $unit;
    $depth-el: 1 * $unit;

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

    transform-origin: bottom left;
    transform: rotateZ(19deg);
    transition: transform 300ms linear;

    &__front{
		background-color: $walkman-a-02;
		background-image:
			linear-gradient(to bottom, transparent 70%, darken($walkman-a-02, 30)),
			linear-gradient(to right, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to left, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, darken($walkman-a-02, 25), darken($walkman-a-02, 15), darken($walkman-a-02, 10) 20%, $walkman-a-02)
		;
		background-size:
			100% 1 * $unit,
			1 * $unit 100%,
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 100%,
			100% 0,
			0 0,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;

		clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 65% 25%, 65% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);

	}
    &__back{
		background-color:$walkman-a-03;
		display: none;
	}
    &__left{
		background-color: $walkman-a-01;

		background-image:
            linear-gradient(to right, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, darken($walkman-a-01, 15), darken($walkman-a-01, 10) 20%,$walkman-a-01),
			linear-gradient(to top, $walkman-a-01 70%, lighten($walkman-a-01, 8))
		;
		background-size:
            1 * $unit 100%,
			100% 4 * $unit,
			100% 1 * $unit
		;
		background-position:
            100% 0,
			0 100%,
			0 0%
		;
		background-repeat: no-repeat;
	}
    &__right{ background-color: $walkman-a-03; display: none; }
    &__top{ background-color: $walkman-a-black; display: none; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.is-c-close{
    transform: rotateZ(0deg);
    transition: transform 300ms linear;
}

$unit-s: 1.75vmin;

.sphere,
.sphere2{
    $sides: 10;
    $degree: 360deg;
    $width: 2 * $unit-s;
    position: absolute;
    bottom: 1.5 * $unit;
    left: 9 * $unit;

    transform: translateZ(9.75 * $unit) rotateX(-90deg) rotateZ(135deg);

    .circle{
        position: absolute;
        width: 1.2 * $unit-s;
        height: 1.2 * $unit-s;
        border-radius: 50%;
        transform:  translateZ(1 * $unit-s);
        background-image: linear-gradient( darken( $walkman-b-03, 50) 40%, darken($walkman-b-03, 40) 41% 59%, darken( $walkman-b-03, 50) 60%  ) ;
    }

    &-item1{
        $base: 1.5 * $unit-s;
        $pi: 3.9;
        $y: -15deg;
        position: absolute;
        width: $width;
        height: $base;
        transform: rotateY(90deg);

        @include sphere($base, $sides, $degree, $pi, $width, $y, darken( $walkman-a-black, 4));
        &__side{ clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 95%);}
    }
}

.sphere2{ transform: translateZ(17.25 * $unit) rotateX(-90deg) rotateZ(135deg); }
.cr{ animation: circle linear 4000ms infinite; }

@keyframes circle { to { transform: translateZ(1 * $unit-s) rotateZ(1turn);} }

.cs{
    $width-el: 16 * $unit;
    $height-el: 25 * $unit;
    $depth-el: .35 * $unit;

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

    &__front{
		background-image:
            radial-gradient(circle at 50% 70%, transparent 10%, darken(#8f8f8f, 15) 10% 15%, darken($walkman-a-04, 40) 15%),
            radial-gradient(circle at 50% 30%, transparent 10%, darken(#8f8f8f, 15) 10% 15%, darken($walkman-a-04, 40) 15%),
        ;
        background-size: 100% 50%;
        background-position:
            0 0,
            0 100%
        ;
        background-repeat: no-repeat;

        &::before{
            content: 'mix tape';
            position: absolute;
            top: 2 * $unit;
            padding: 1 * $unit 2.5 * $unit;
            font-family: cursive;
            font-size: 1.5 * $unit;
            background-image: linear-gradient(to bottom, darken(#8f8f8f, 15), darken(#8f8f8f, 15));
            transform-origin: bottom left;
            transform: rotateZ(90deg);
        }

	}
    &__back{ background-color: darken($walkman-a-04, 39); }
    &__left{ background-color: $walkman-a-black; }
    &__right{ background-color: $walkman-a-black; }
    &__top{ background-color: $walkman-a-black; }
    &__bottom{ background-color: $walkman-a-black;}
}

.d01,
.line{
	&__right{
		background-color: $walkman-b-03;

		background-image:
			linear-gradient(to top, darken($walkman-b-03, 15), darken($walkman-b-03, 10) 20%,$walkman-b-03),
			linear-gradient(to top, $walkman-b-03 70%, lighten($walkman-b-03, 20))
		;
		background-size:
			100% 4 * $unit,
			100% 1 * $unit,
		;
		background-position:
			0 100%,
			0 0%
		;
		background-repeat: no-repeat;
	}
}
.d06,
.d02{
	&__right{
		background-color: $walkman-b-03;
		background-image: linear-gradient(to top, transparent 70%, lighten($walkman-b-02, 15));
		background-size: 100% 1 * $unit;
		background-position: 0 0 ;
		background-repeat: no-repeat;
	}
}

.d01{
    $width-el: 6.3 * $unit;
    $height-el: 22 * $unit;
    $depth-el: 1.5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	left: 18*$unit;
	right: 0;


    &__front{
		background-color: $walkman-b-02;
		background-image:
			linear-gradient(to top, darken($walkman-b-02, 15), darken($walkman-b-02, 10) 20%,$walkman-b-02),
			linear-gradient(to top, $walkman-b-02 70%, lighten($walkman-b-02, 20))
		;
		background-size:
			100% 4 * $unit,
			100% 1 * $unit,
		;
		background-position:
			0 100%,
			0 0%
		;
		background-repeat: no-repeat;

	}
    &__back{
		background-color: $walkman-b-03;

		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to top, darken($walkman-b-03, 40), darken($walkman-b-03, 15), darken($walkman-b-03, 10) 20%, $walkman-b-03)
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
			100% 4 * $unit
		;
		background-position:
			100% 0,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;

	}
    &__left{ background-color: $walkman-b-03; }
    &__right{
		background-color: darken($walkman-b-03, 2);

        background-image:
            linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
            linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
            linear-gradient(to top, darken($walkman-b-04, 25), darken($walkman-b-03, 15), darken($walkman-b-03, 10) 20%, $walkman-b-03)
        ;
        background-size:
            1 * $unit 100%,
            1 * $unit 100%,
            100% 4 * $unit
        ;
        background-position:
            100% 0,
            0 0,
            0 100%
        ;
        background-repeat: no-repeat;

        &::before,
        &::after{
            content: '';
            position: absolute;
            top: 1 * $unit;
            width: .9 * $unit;
            height: 5 * $unit;
            background-image: repeating-linear-gradient($walkman-b-04 0 .2*$unit, transparent .2*$unit .6*$unit);
        }

        &::before{
            left: .4 * $unit;
        }
        &::after{
            left: 1.6 * $unit;
        }

	}
    &__top{ background-image: linear-gradient(to right, darken($walkman-b-03, 5) 85%, darken($walkman-b-02, 5)); }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.d02{
    $width-el: 4.5 * $unit;
    $height-el: 10 * $unit;
    $depth-el: 1.5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	left: 18 * $unit;
	right: 0;

	transform: translateZ(22 * $unit);

    &__front{ background-color: $walkman-b-02; }
    &__back{
		background-color:$walkman-b-03;
		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
		;
		background-position:
			100% 0,
			0 0,
		;
		background-repeat: no-repeat;
	}
    &__left{ background-color: $walkman-b-03; }
    &__right{
		background-color: darken($walkman-b-03, 2);

		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
		;
		background-position:
			100% 0,
			0 0,
		;
		background-repeat: no-repeat;
	}
    &__top{ background-color: $walkman-b-01; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.d03{
    $width-el: 6 * $unit;
    $height-el: 22 * $unit;
    $depth-el: 2 * $unit;

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

    &__front{
		background-color: $walkman-b-02;
		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-02, 10)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-02, 10)),
			linear-gradient(to top, darken($walkman-b-03, 25), darken($walkman-b-02, 15), darken($walkman-b-02, 10) 20%, $walkman-b-02)
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
			100% 4 * $unit
		;
		background-position:
			100% 0,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
    &__back{ background-color:$walkman-b-03; }
    &__left{ background-color: $walkman-b-03; }
    &__right{
		background-color: $walkman-b-03;

		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to top, darken($walkman-b-04, 25), darken($walkman-b-03, 15), darken($walkman-b-03, 10) 20%, $walkman-b-03)
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
			100% 4 * $unit
		;
		background-position:
			100% 0,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;

        &::before{
            content: '';
            position: absolute;
            bottom: 3 * $unit;
            left: 1 * $unit;

            width: 1.75 * $unit;
            height: 1.75 * $unit;

            border: .1 * $unit solid $walkman-b-01;
            border-radius: 50%;
            background-image: radial-gradient(circle at 50% 50%, $walkman-b-02, black 20% 50%, $walkman-a-black 50%);
        }

        &::after{
            content: 'dc in 3v';
            position: absolute;
            bottom: 1.75 * $unit;
            left: 50%;
            transform: translateX(-50%);
            font-size: .45 * $unit;
        }
	}
    &__top{ background-color: $walkman-b-02; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.d04{
    $width-el: 6 * $unit;
    $height-el: 6 * $unit;
    $depth-el: .5 * $unit;

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

	transform: translateZ(22 * $unit);

    &__front{

		background-color: $walkman-b-02;
		padding: 1 * $unit;

		&::after{
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			background-color: $walkman-a-black;
		}
	}
    &__back{ background-color: $walkman-b-03; }
    &__left{ background-color: $walkman-b-03; }
    &__right{
        background-color: $walkman-b-03;

        background-image: linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)), ;
		background-size: 1 * $unit 100%, ;
		background-position: 100% 0,;
		background-repeat: no-repeat;

    }
    &__top{ background-color: $walkman-b-01; }
    &__bottom{ background-color: darken($bg-2, 20); }
}
.d05{
    $width-el: 6 * $unit;
    $height-el: 6.2 * $unit;
    $depth-el: .5 * $unit;

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

	transform: translateZ(21.8 * $unit);
    // background: red;

    &__front{
		background-color: $walkman-b-02;
		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-02, 15)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-02, 15)),
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
		;
		background-position:
			100% 0,
			0 0,
		;
		background-repeat: no-repeat;
	}
    &__back{
		background-color: $walkman-b-03;
		padding: 1 * $unit;

		&::after{
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			background-color: $walkman-a-black;
		}
	}
    &__left{ background-color: $walkman-b-03; }
    &__right{
        background-color: $walkman-b-03;

        background-image: linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),;
		background-size: 1 * $unit 100%, ;
		background-position: 0 0, ;
		background-repeat: no-repeat;
    }
    &__top{ background-color: $walkman-b-01; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.d06{
    $width-el: 6 * $unit;
    $height-el: 4.1 * $unit;
    $depth-el: 2 * $unit;

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

	transform: translateZ(27.9 * $unit);

    &__front{
        background-color:$walkman-b-02;
        background-image:
            linear-gradient(to right, transparent 70%, lighten($walkman-b-02, 15)),
            linear-gradient(to left, transparent 70%, lighten($walkman-b-02, 15)),
            linear-gradient(to top, transparent 70%, lighten($walkman-b-02, 15)),
        ;
        background-size:
            1 * $unit 100%,
            1 * $unit 100%,
            100% 1 * $unit,
        ;
        background-position:
            100% 0,
            0 0,
            0 0,
        ;
        background-repeat: no-repeat;
    }
    &__back{ background-color:$walkman-b-03; }
    &__left{ background-color: $walkman-b-03; }
    &__right{

        background-image:
            linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
            linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
        ;
        background-size:
            1 * $unit 100%,
            1 * $unit 100%,
        ;
        background-position:
            100% 0,
            0 0,
        ;
        background-repeat: no-repeat;

        &::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 2.9 * $unit;

            padding-left: .45 * $unit;
            padding-right: .8 * $unit;
            margin-top: .75 * $unit;

            background-image:
                linear-gradient(-90deg, transparent 0%, transparent 50%, $walkman-b-03 50%, $walkman-b-03 100%),
                linear-gradient( 0deg, $walkman-a-black  0%, $walkman-a-black 50%, $walkman-b-03 50%, $walkman-b-03 100%);

            background-size: .45 * $unit .45 * $unit;
            background-clip: content-box;
        }
        &::before{
            content: 'mic';
            position: absolute;
            top: .2 * $unit;
            left: 50%;
            transform: translateX(-50%);
            font-size: .5 * $unit;
        }
	}
    &__top{ background-color: $walkman-b-01; }
    &__bottom{ background-color: $walkman-b-02; }
}


.line{
    $width-el: 1.85 * $unit;
    $height-el: 32 * $unit;
    $depth-el: .25 * $unit;

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

    &__front{ background-image: linear-gradient(to bottom, darken($walkman-b-03, 7), darken($walkman-b-03, 12)); }
    &__back{ background-image: linear-gradient(to bottom, darken($walkman-b-03, 5), darken($walkman-b-03, 10)); }
    &__left{ background-color: $walkman-b-03; }

	$current: lighten($walkman-b-03, 3);

    &__right{
		background-color: $current;

		background-image:
			linear-gradient(to top, darken($current, 15), darken($current, 10) 20%,$current),
			linear-gradient(to top, $current 70%, lighten($current, 20))
		;
		background-size:
			100% 4 * $unit,
			100% 1 * $unit,
		;
		background-position:
			0 100%,
			0 0%
		;
		background-repeat: no-repeat;

	}
    &__top{ background-color: $walkman-b-01; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.button{
    $width-el: 3.5 * $unit;
    $height-el: 2 * $unit;
    $depth-el: 1 * $unit;

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

	transform: translateZ(31.5 * $unit);

    &__front{
		background-color: $button-02;
		background-image:
			linear-gradient(100deg, lighten(rgba($button-02, .5), 10) 14%, transparent 14% ),
			linear-gradient(-100deg, lighten(rgba($button-02, .5), 10) 14%, transparent 14% ),
			linear-gradient(to top, darken($button-02, 20), $button-02 92%, lighten($button-02, 8))
		;
		clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
	}
    &__back{
		background-color:$button-03;
		background-image:
			linear-gradient(100deg, lighten(rgba($button-03, .5), 10) 14%, transparent 14% ),
			linear-gradient(-100deg, lighten(rgba($button-03, .5), 10) 14%, transparent 14% ),
			linear-gradient(to top, darken($button-03, 15), $button-03 92%, lighten($button-03, 10))
		;
		clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
	}
    &__left{
		&::after{
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			transform-origin: bottom;
			transform: rotateX(12deg);
			background-color: $button-03;

			background-image:
				linear-gradient(100deg, lighten(rgba($button-01, .5), 10) 14%, transparent 14% ),
				linear-gradient(-100deg, lighten(rgba($button-01, .5), 10) 14%, transparent 14% ),
				linear-gradient(to top, darken($button-01, 20), $button-01 92%, lighten($button-01, 15))
			;
		}
	}
    &__right{
		&::after{
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			transform-origin: bottom;
			transform: rotateX(12deg);
			background-color: $button-03;

			background-image:
				linear-gradient(100deg, lighten(rgba($button-03, .5), 10) 14%, transparent 14% ),
				linear-gradient(-100deg, lighten(rgba($button-03, .5), 10) 14%, transparent 14% ),
				linear-gradient(to top, darken($button-03, 8), $button-03 92%, lighten($button-03, 5))
			;
		}
    }
    &__top{

		&::after{
			content: '';
			position: absolute;
			width: 80%;
			height: 100%;
			left: 10%;
			background-color: $button-01;

            background-image:
                linear-gradient(-90deg, transparent 0%, transparent 50%, $button-01 50%, $button-01 100%),
                linear-gradient( 0deg, $button-03 0%, $button-03 50%, $button-01 50%, $button-01 100%),
                linear-gradient(to left, lighten(rgba($button-01, .5), 10) 6%, transparent 6% ),
				linear-gradient(to right, lighten(rgba($button-01, .5), 10) 6%, transparent 6% ),
				linear-gradient(to top, darken($button-01, 10), $button-01 92%, lighten($button-01, 15))
            ;

            background-size:
                .273 * $unit .273 * $unit,
                .273 * $unit .273 * $unit,
                100% 100%,
                100% 100%,
                100% 100%
            ;
            background-clip: content-box;
		}
    }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.button2{
    $width-el: 2 * $unit;
    $height-el: 5.8 * $unit;
    $depth-el: 1 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 1 * $unit;
	left: 96%;
	transform: translateZ(22.1 * $unit);

	&__front{
		background-color: $button-b-02;
		background-image:
			linear-gradient(to left, lighten(rgba($button-b-02, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, lighten(rgba($button-b-02, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, darken($button-b-03, 45), darken( $button-b-02, 10) 75% 90%, lighten($button-b-02, 1) )
		;
	}
	&__back{
		background-color: $button-b-03;

		background-image:
			linear-gradient(to left, lighten(rgba($button-b-03, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, lighten(rgba($button-b-03, .5), 5) 6%, transparent 6% ),
			linear-gradient(to left, darken($button-b-03, 30), darken( $button-b-03, 5) 75% 90%, lighten($button-b-02, 1) )
		;

	}
	&__left{ background-color: $button-b-03; }
	&__right{
		background-color: darken($button-b-03, 5);

        background-image:
            linear-gradient(-90deg, transparent 0%, transparent 50%, $button-b-03 50%, $button-b-03 100%),
            linear-gradient( 0deg, darken($button-b-03, 20)  0%, darken($button-b-03, 20) 50%, $button-b-03 50%, $button-b-03 100%),
            linear-gradient(to top, darken($button-b-03, 10), transparent)
        ;

        background-size:
            .3 * $unit .3 * $unit,
            .3 * $unit .3 * $unit,
            100% 100%
        ;
        padding: .25 *$unit;
        background-clip: padding-box;

        &::after{
            content: 'EJECT';
            position: absolute;
            transform: translateZ(-.5 * $unit);
            top: 110%;
            left: 15%;
            font-size: .475 * $unit;
        }

	}
	&__top{
		background-color: $button-b-01;

		background-image:
			linear-gradient(to left, lighten(rgba($button-b-01, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, lighten(rgba($button-b-01, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, darken($button-b-03, 30), darken( $button-b-02, 5) 75% 90%, lighten($button-b-01, 1) )
		;
	}
	&__bottom{ background-color: $button-b-03;
		background-image:
			linear-gradient(to left, lighten(rgba($button-b-03, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, lighten(rgba($button-b-03, .5), 5) 6%, transparent 6% ),
			linear-gradient(to left, darken($button-b-03, 30), darken( $button-b-03, 5) 75% 90%, lighten($button-b-03, 1) )
		;

	}
}

.button5{
    $width-el: 2 * $unit;
    $height-el: 5 * $unit;
    $depth-el: 1 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 4.5 * $unit;
	left: 92%;
	transform: translateZ(22.5 * $unit);
    transition: left 100ms linear;


	&__front{
		background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15));
        clip-path: polygon(0% 0%, 75% 0%, 100% 30%, 100% 100%, 0% 100%);
	}
	&__back{
		background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15));
        clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0 30%, 25% 0%);
	}

	&__right{
        &::after,
        &::before{
            content: '';
            position: absolute;
            width: 100%;
        }
        &::before{
            bottom: 0;
            height: 3.5 * $unit;

            background-image:
                linear-gradient(-90deg, transparent 0%, transparent 50%, darken($button-b-03, 10) 50%, darken($button-b-03, 5) 100%),
                linear-gradient( 0deg, darken($button-b-03, 20)  0%, darken($button-b-03, 20) 50%, darken($button-b-03, 10) 50%, darken($button-b-03, 5) 100%),
                linear-gradient(to top, darken($button-b-03, 10), darken($button-b-03, 5))
            ;

            background-size:
                .3 * $unit .3 * $unit,
                .3 * $unit .3 * $unit,
                100% 100%
            ;
            padding: .25 *$unit;
            background-clip: padding-box;
            border: .15 * $unit solid $button-b-03;
            animation: btn 1000ms linear infinite;
            cursor: pointer;
        }
        &::after{
            bottom: 3.5 * $unit;
            height: 1.65 * $unit;
            transform-origin: bottom;
            transform: rotateX(20deg);

            background-image:
                linear-gradient(-90deg, transparent 0%, transparent 50%, darken($button-b-03, 2) 50%, darken($button-b-03, 2) 100%),
                linear-gradient( 0deg, darken($button-b-03, 20)  0%, darken($button-b-03, 20) 50%, darken($button-b-03, 2) 50%, darken($button-b-03, 2) 100%),
                linear-gradient(to top, darken($button-b-03, 10), darken($button-b-03, 5))
            ;

            background-size:
                .3 * $unit .3 * $unit,
                .3 * $unit .3 * $unit,
                100% 100%
            ;
            padding: .25 *$unit;
            background-clip: padding-box;
            cursor: pointer;

        }
	}
	&__top{
		&::before{
            content: '';
            display: inline-block;
            width: 1.5 * $unit;
            height: 100%;
            background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 10));
        }
	}
	&__bottom{
		background-image: linear-gradient(to top, darken($button-b-03, 20), darken($button-b-03, 20));
	}
}
.is-button-pressed{
    left: 90%;
    transition: left 100ms linear;
}

@keyframes btn{
    to { border: .15 * $unit solid $button-02; }
}

.button6,
.button7{
    $width-el: 2 * $unit;
    $height-el: 1.5 * $unit;
    $depth-el: 1 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 4.5 * $unit;
	left: 88%;
	transform: translateZ(28 * $unit);


	&__front{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15)); }
	&__back{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15)); }
	&__right{
        background-image:
            linear-gradient(-90deg, transparent 0%, transparent 50%, darken($button-b-03, 10) 50%, darken($button-b-03, 5) 100%),
            linear-gradient( 0deg, darken($button-b-03, 20)  0%, darken($button-b-03, 20) 50%, darken($button-b-03, 10) 50%, darken($button-b-03, 5) 100%),
            linear-gradient(to top, darken(red, 0), darken($button-b-03, 5))
        ;

        background-size:
            .3 * $unit .3 * $unit,
            .3 * $unit .3 * $unit,
            100% 100%
        ;
        padding: .25 *$unit;
        background-clip: padding-box;
	}
	&__top{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 10)); }
	&__bottom{ background-image: linear-gradient(to top, darken($button-b-03, 20), darken($button-b-03, 20)); }

}

.button7{
	bottom: 4.5 * $unit;
	left: 90%;
    transform: translateZ(30 * $unit);
}

.button3,
.button4{
    $width-el: .8 * $unit;
    $height-el: 4.8 * $unit;
    $depth-el: .5 * $unit;

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

	&__front{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15)); }
	&__back{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15)); }
	&__right{ background-image: linear-gradient(to top, darken($button-b-03, 10), darken($button-b-03, 5)); }
	&__top{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 10)); }
	&__bottom{ background-image: linear-gradient(to top, darken($button-b-03, 20), darken($button-b-03, 20)); }
}

.button3{
    bottom: 4.4 * $unit;
	transform: translateZ(12 * $unit);

    &__right{
        &::after{
            content: 'volume';
            position: absolute;
            transform: translateZ(-.5 * $unit);
            top: 110%;
            left: 10%;
            font-size: .4 * $unit;
        }
    }
}
.button4{
	bottom: 5.6 * $unit;
	transform: translateZ(12 * $unit);
}

svg{
	fill: white;
}
.name{
	position: absolute;
	bottom: -29.5 * $unit;
	width: 12 * $unit;
	height: 12 * $unit;
	left: 50%;
	transform: translate(-50%);
}
.sony{
    position: absolute;
	top: -1.5 * $unit;
	width: 10 * $unit;
	height: 10 * $unit;
	left: 50%;
	transform: translate(-50%);
}

              
            
!

JS

              
                /*
		Designed by: michaelyeah
		Original image: https://dribbble.com/shots/3661410-walkman
*/

const b = document.body
const h = document.querySelector("#h")
const unit = 1.75
const audioElement = document.querySelector("#a")
const btnElement = document.querySelector(".button5")
const tapeElement = document.querySelector(".c")
const circleElement = document.querySelectorAll(".circle")[1]
const waveElement = document.querySelector(".waves")
// =================================
const mouseDown = () => b.addEventListener('mousemove', moveFunc)
const mouseUp = () => b.removeEventListener('mousemove', moveFunc)
const moveFunc = (e) => {
    let x = e.pageX / window.innerWidth - 0.5
    let y = e.pageY / window.innerHeight - 0.5

    h.style.transform = `
        perspective(${400 * unit}vmin)
        rotateX(${ y * 20 + 66}deg)
        rotateZ(${ -x * 420 + 40}deg)
        translateZ(${-16 * unit}vmin)
    `
}
const playRadio = () => {
    btnElement.removeEventListener("click", playRadio)
    audioElement.currentTime = 0
    audioElement.play()
    setTimeout(() => waveElement.classList.add('is-wave-playing'), 1100);
    toggleStyles()

}
const stopRadio = () => {
    btnElement.addEventListener("click", playRadio)
    audioElement.pause()
    waveElement.classList.remove('is-wave-playing')
    toggleStyles()
}
const toggleStyles = () => {
    btnElement.classList.toggle('is-button-pressed')
    tapeElement.classList.toggle('is-c-close')
    circleElement.classList.toggle('cr')

}

h.addEventListener('mousedown', mouseDown)
b.addEventListener('mouseup', mouseUp)
btnElement.addEventListener("click", playRadio)
audioElement.addEventListener('ended', stopRadio)

              
            
!
999px

Console