/* recovered from the original pen: https://codepen.io/vuild/pen/AYomKk */
/* more https://vuild.com/r2-d2/ */

/* R2 D2 */

body{margin:0;background:#111}

#r-two-d-two-space {
background:#111;
margin:auto;
padding-top:60px;
}

#r-two-d-two {
width:225px;	
margin:auto;
}

#r-two-d-two-head {
height:140px;
background: #ccc; 
background: linear-gradient(to right, #606060 0%,#f9f9f9 50%,#6d6d6d 100%); 
width:229px;
padding-top:5px;
padding-bottom:5px;
margin-left:-35px;
margin-bottom:-3px;
border-top-right-radius: 95px;
border-top-left-radius: 95px;
transform: rotate(-10deg);
position:relative;
z-index:99;
box-shadow:inset 0 22px 22px rgba(0, 0, 0, .5);
}

#r-two-d-two-body {
height:200px;
background: #bfbfbf; 
background: linear-gradient(to right, #bfbfbf 0%,#dbdbdb 8%,#ffffff 35%,#ffffff 61%,#b7b7b7 100%); 
width:228px;
margin-left:-4px;
padding-top:5px;
position:relative;
z-index:99;
transform: rotate(-10deg);
}

#r-two-d-two-trim {
width: 180px;
height: 0;
margin-top:-3px;
margin-left:14px;
border-left: 25px solid transparent;
border-top: 20px solid #fff;
border-right: 25px solid transparent;
transform: rotate(-10deg);
position:relative;
z-index:99;
}

#r-two-d-two-leg-back {
height:30px;
background:#ccc;
border-left:5px solid #777;
width:60px;
padding-top:10px;
position:relative;
border-bottom-right-radius: 90px;
border-bottom-left-radius: 90px;
margin-left:55px;
}

#r-two-d-two-innerleg-back {
height:20px;
background:#999;
width:40px;
border-bottom:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
border-top:1px solid #999;
position:relative;
border-top-right-radius: 95px;
border-top-left-radius: 95px;
margin-left:auto;
margin-right:auto;
box-shadow:inset 0 2px 2px rgba(0, 0, 0, .5);
}

#r-two-d-two-leg-front {
height:230px;
width:70px;
position:relative;
border-top-right-radius: 95px;
border-top-left-radius: 95px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:99;
}

#r-two-d-two-leg-top-square {
height:18px;
width:18px;
border:2px solid #444;
border-radius: 95px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
box-shadow: 0 0 3px rgba(255, 255, 255, .5);
}

#r-two-d-two-innerleg-top {
height:40px;
background: #606060; 
background: linear-gradient(to right, #606060 0%,#f9f9f9 50%,#6d6d6d 100%);
width:40px;
margin-bottom:-10px;
position:relative;
z-index:999;
border:2px solid #eee;
border-radius: 95px;
margin-left:auto;
margin-right:auto;
box-shadow:inset 0 2px 2px rgba(0, 0, 0, .5);
}

#r-two-d-two-innerleg-front {
height:140px;
background:#eee;
width:44px;
margin-left:auto;
margin-right:auto;
box-shadow:0 1px 3px rgba(0, 0, 0, .6);
position:relative;
z-index:9;
}

#r-two-d-two-leg-ankle {
height:42px;
background:#eee;
width:64px;
padding-top:10px;
border-left:5px solid #ccc;
margin-left:auto;
margin-right:auto;
border-bottom-right-radius: 25px;
border-bottom-left-radius:25px;
box-shadow:0 1px 3px rgba(0, 0, 0, .6);
position:relative;
z-index:99;
}

#r-two-d-two-leg-anklein {
height:20px;
background:blue;
width:34px;
border-top:1px solid #eee;
border-left:1px solid #eee;
margin-left:auto;
margin-right:auto;
box-shadow:inset 0 4px 8px rgba(0, 0, 0, .6);
position:relative;
z-index:99;
}

#r-two-d-two-leg-anklebar {
height:7px;
background: #bfbfbf; 
background: linear-gradient(to bottom, #bfbfbf 0%,#dbdbdb 8%,#ffffff 35%,#ffffff 61%,#b7b7b7 100%); 
margin-top:10px;
margin-bottom:-15px;
width:63px;
border-bottom:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
border-top:1px solid #999;
position:relative;
z-index:99;
border-radius: 95px;
margin-left:auto;
margin-right:auto;
box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
}

#r-two-d-two-innerleg-front-pipe {
height:115px;
background:blue;
margin-top:3px;
width:30px;
border-bottom:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
border-top:1px solid #999;
position:relative;
z-index:9999;
border-top-right-radius: 95px;
border-top-left-radius: 95px;
margin-left:auto;
margin-right:auto;
box-shadow:inset 0 5px 6px rgba(0, 0, 0, .5);
}

#r-two-d-two-innerleg-front-pipein {
height:83px;
background: #606060; 
background: linear-gradient(to right, #606060 0%,#f9f9f9 50%,#6d6d6d 100%); margin-top:30px;
width:7px;
border-bottom:1px solid #999;
border-left:1px solid #222;
border-right:1px solid #eee;
border-top:1px solid #999;
position:relative;
border-top-right-radius: 95px;
border-top-left-radius: 95px;
margin-left:auto;
margin-right:auto;
box-shadow:inset 0 2px 2px rgba(0, 0, 0, .5);
}

#r-two-d-two-foot-front {
width: 80px;
height: 0;
margin-top:-4px;
margin-bottom:3px;
margin-left:auto;
margin-right:auto;
border-left: 50px solid transparent;
border-bottom: 50px solid #f1f1f1;
border-right: 50px solid transparent;
position:relative;
z-index:99;
}

#r-two-d-two-foot-back {
width: 80px;
height: 0;
margin-left:18px;
border-left: 40px solid transparent;
border-bottom: 40px solid #ccc;
border-right: 40px solid transparent;
position:relative;
z-index:9;
}

#r-two-d-two-lowerfoot-round {
height:30px;
width:80px;
margin-top:-35px;
background:#ccc;
border-top-right-radius: 95px;
border-top-left-radius: 95px;
position:relative;
margin-left:auto;
margin-right:auto;
z-index:99;
box-shadow:inset 0 2px 6px rgba(0, 0, 0, .5);
}

#r-two-d-two-lowerfoot-front {
height:20px;
background:#ccc;
width:180px;
position:relative;
margin-left:auto;
margin-right:auto;
box-shadow:0 1px 3px rgba(0, 0, 0, .6);
}

#r-two-d-two-lowerfoot-back {
height:20px;
background:#999;
width:160px;
margin-left:18px;
position:relative;
box-shadow:0 1px 3px rgba(0, 0, 0, .6);
}

#r-two-d-two-head-backunit {
height:15px;
width:18px;
float:right;
margin-bottom:-8px;
background:#ccc;
margin-left:6px;
margin-right:74px;
border-top: 1px solid #ccc;
box-shadow:inset 0 -12px 12px rgba(0, 0, 0, .5);
transform:rotate(22deg);
}

#r-two-d-two-head-projector-bluebox {
height:50px;
width:8px;
float:left;
margin-bottom:4px;
background:blue;
margin-left:2px;
margin-right:4px;
margin-top:15px;
border-left:1px solid blue;
box-shadow:inset 0 -12px 12px rgba(0, 0, 0, .8);
transform:rotate(17deg);
}

#r-two-d-two-head-projector-bulb {
height:30px;
width:12px;
float:left;
margin-bottom:4px;
background: #bfbfbf; 
background: linear-gradient(to bottom, #bfbfbf 0%,#dbdbdb 8%,#ffffff 35%,#ffffff 61%,#b7b7b7 100%); 
margin-right:4px;
margin-top:64px;
margin-left:-25px;
border-left:1px dashed lightskyblue;
border-top:1px solid #ccc;
border-bottom:1px solid #444;
position:relative;
box-shadow:inset 0 -12px 12px rgba(0, 0, 0, .5);
}

.r-two-d-two-head-sensor {
height:30px;
width:19px;
float:left;
margin-bottom:4px;
background:blue;
margin-top:60px;
margin-left:9px;
border-left:1px solid darkblue;
border-top:1px solid darkblue;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .5);
}

#r-two-d-two-head-bigsensor {
height:30px;
width:32px;
float:left;
background:blue;
margin-right:4px;
margin-top:60px;
margin-left:9px;
border-left:1px solid darkblue;
border-top:1px solid darkblue;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .5);
}

#r-two-d-two-head-sensor-back {
height:30px;
width:22px;
float:left;
background:blue;
margin-right:4px;
margin-top:60px;
margin-left:9px;
border-left:1px solid darkblue;
border-top:1px solid darkblue;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .5);
}

#r-two-d-two-head-sensor-backhollow {
height:25px;
width:17px;
float:left;
margin-right:4px;
margin-top:60px;
margin-left:9px;
border-left:1px solid #888;
border-top:1px solid #888;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}

#r-two-d-two-head-sheen {
width:120px;
height:140px;
float:right;
margin-top:-10px;
margin-left:-450px;
margin-right:-32px;
margin-bottom:-113px;
border-right:70px solid #000;
position:relative;
z-index:9999;
opacity:.2;
border-top-left-radius:0;
border-top-right-radius:550px;
transform:rotate(45deg);
}

#r-two-d-two-body-sheen {
width:80px;
height:180px;
float:right;
margin-top:-130px;
margin-left:50px;
margin-right:43px;
border-right:60px solid #999;
opacity:.2;
border-bottom-left-radius:0;
border-bottom-right-radius:550px;
transform:rotate(45deg);
}

#r-two-d-two-head-sensorband {
height:8px;
width:228px;
clear:both;
background:blue;
margin-bottom:20px;
margin-right:4px;
border-left:1px solid darkblue;
border-bottom:1px solid #eee;
border-top:1px solid #555;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .5);
}

#r-two-d-two-body-back-one {
height:136px;
width:9px;
float: right;
margin-right:4px;
border-left:1px solid #999;
border-top:1px solid #999;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .2);
}

#r-two-d-two-body-back-two {
height:136px;
width:19px;
float: right;
margin-right:4px;
border-left:1px solid #999;
border-top:1px solid #999;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .2);
}

#r-two-d-two-body-back-three {
height:66px;
width:70px;
float: right;
margin-top:70px;
margin-bottom:10px;
margin-right:40px;
background: #606060; 
background: linear-gradient(to right, #606060 0%,#f9f9f9 50%,#6d6d6d 100%); 
}

#r-two-d-two-body-back-four {
height:136px;
width:30px;
float: right;
margin-bottom:10px;
margin-right:14px;
border-left:1px solid #999;
border-top:1px solid #999;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .2);
}

.r-two-d-two-body-back-threein {
height:63px;
width:8px;
margin-bottom:10px;
background:blue;
float:left;
margin-left:7px;
margin-right:6px;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .2);
border-bottom-right-radius: 95px;
border-bottom-left-radius: 95px;
}

.r-two-d-two-body-sensor {
height:6px;
width:9px;
margin-bottom:10px;
background:blue;
margin-right:4px;
border-left:1px solid #000;
border-top:1px solid #000;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .2);
}

#r-two-d-two-body-bigspace{
width: 36px;
height: 37px;
position: relative;
margin-top:5px;
margin-left:10px;
opacity:.4;
}

#r-two-d-two-body-bigspace:before {
content: "";
position: absolute;
top: 0;
left: 0;    
border-bottom: 19px solid #999;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
width: 32px;
height: 0;
}

#r-two-d-two-body-bigspace:after {
content: "";
position: absolute;
bottom: 0;
left: 0;    
border-top: 19px solid #999;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
width: 32px;
height: 0;
}				

.r-two-d-two-body-lowersensor {
height:40px;
width:4px;
margin-bottom:10px;
background:blue;
margin-right:4px;
border-left:1px solid blue;
border-top:1px solid #999;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .5);
}

#r-two-d-two-body-lowersensor-midbox{
width:50px;
height:43px;
float:right;
padding-top: 3px;
margin-right: 5px;
background: #606060; 
background: linear-gradient(to right, #606060 0%,#f9f9f9 50%,#6d6d6d 100%); 
box-shadow:inset 0 22px 22px rgba(0, 0, 0, .3);
}

.r-two-d-two-body-lowersensor-mid {
height:30px;
width:8px;
margin-bottom:10px;
background:blue;
float:right;
margin-left:2px;
border-left:1px solid #999;
border-top:1px solid #999;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
}

#r-two-d-two-leg-top {
background:#eee;
width:90px;
height:110px;
margin-bottom:-90px;
border-left:5px solid #ccc;
border-top-right-radius: 95px;
border-top-left-radius: 95px;
border-bottom-right-radius: 18px;
border-bottom-left-radius: 18px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:99;
box-shadow:0 1px 3px rgba(0, 0, 0, .6);
}

#r-two-d-two-leg-out {
height:370px;
position:relative;
z-index:999;
margin-top:-315px;
}

#r-two-d-two-head-top {
height:24px;
width:120px;
clear:both;
background:blue;
margin-right:4px;
overflow:hidden;
margin-left:46px;
border-left:1px solid darkblue;
border-right:1px solid #fff;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .5);
border-top-right-radius: 95px;
border-top-left-radius: 95px;
}

#r-two-d-two-head-topin {
height:138px;
width:40px;
margin-top:-10px;
clear:both;
background:blue;
margin-right:4px;
margin-left:36px;
border-left:3px solid #999;
border-right:3px solid #999;
box-shadow:inset 0 12px 12px rgba(0, 0, 0, .5);
border-top-right-radius: 95px;
border-top-left-radius: 95px;
}