<article class="text">
	<h1>Daily CSS images</h1>
	<p>Day 40: <span>The Nitendo 2DS</span></p>
	<p>If I like the One Love!</p>
</article>

<div class="container">
	<div class="nitendo-detail"></div>
	<div class="nitendo">
		<div class="speaker"></div>
		<div class="camera"></div>
		<div class="screen"></div>
		<div class="screen2"></div>
		<div class="bg-control-1">
			<div class="control-1"></div>
		</div>
		<div class="control-2">
			<div class="control-2-detail"></div>
		</div>
		<div class="mic"></div>
		<div class="led"></div>
		<div class="button x"></div>
		<div class="button a"></div>
		<div class="button b"></div>
		<div class="button y"></div>
		<div class="button2 start"></div>
		<div class="button2 select"></div>
		<div class="jack"></div>
		<div class="button-power"></div>
		<div class="led-2"></div>
		<div class="led-3"></div>
		<div class="sleep-text">SLEEP ></div>
		<div class="sleep"></div>
		<div class="btn-home">
			<div class="icon-home"></div>
		</div>
		<div class="phone"></div>
	</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html, body{
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 100%;
	background-color: #FFF;
	overflow: hidden;
}
.text{
  position: absolute;
  z-index: 10;
  bottom: 3%;
  left: 3%;
}
.text h1{
  font-size: 1em;
  color: #000;
}
.text p{
  font-size: .8em;
  color: #000;
}
.text p span{
  color: #000;
}
.container{
	width: 500px;
	height: 443px;
	position: absolute;
	top: calc(50% - 221px);
	left: calc(50% - 250px);
	border: 1px solid #0000;
}
.nitendo{
	width: 500px;
	height: 433px;
	float: left;
	position: relative;
	background: linear-gradient(to right, #49597e 0%, #3b3f55 100%);
	border-radius: 94px 94px 47px 47px;
}
.nitendo:after{
	content: "";
	width: 488px;
	height: 428px;
	float: left;
	position: absolute;
	top: 5px;
	left: 6px;
	z-index: 3;
	background: linear-gradient(to right, #769dea 0%, #365dd4 100%);
	border-radius: 90px 90px 47px 47px;
}
.nitendo:before{
	content: "";
	width: 4px;
	height: 428px;
	float: left;
	position: absolute;
	top: 0px;
	left: 86px;
	z-index: 2;
	background: #FFFFFF;
	box-shadow: #FFFFFF 317px 0 0;
}
.nitendo-detail{
	content: "";
	width: 100%;
	height: 4px;
	float: left;
	position: absolute;
	top: 93px;
	left: 0;
	z-index: 2;
	background: #FFFFFF;
}
.speaker {
    width: 6px;
    height: 6px;
    position: absolute;
    z-index: 4;
    top: 81px;
    left: 38px;
    background-color: #0d2a7c;
    border-radius: 50%;
    box-shadow: #0d2a7c 10px 0px 0px,
								#0d2a7c 20px 0px 0px,
								#0d2a7c 0px -10px 0px,
								#0d2a7c 10px -10px 0px,
								#0d2a7c 20px -10px 0px,
								#0d2a7c 0px -20px 0px,
								#0d2a7c 10px -20px 0px,
								#0d2a7c 20px -20px 0px;
}
.screen{
	width: 288px;
	height: 182px;
	position: absolute;
	z-index: 4;
	top: 43px;
	left: calc(50% - 144px);
	background: linear-gradient(to right, #5176db 0%, #5176db 48%, #3951b8 53%, #3951b8 100%);
	border-radius: 5px;
	border: 1px solid #3951b8;
}
.screen::after{
	content: "";
	width: 266px;
	height: 159px;
	position: absolute;
	z-index: 4;
	box-sizing: border-box;
	top: calc(50% - 80px);
	left: calc(50% - 133px);
	background: linear-gradient(to right, #ffffff 0%, #ffffff 48%, #eeeeee 53%, #eeeeee 100%);
	border-radius: 3px;
	border: 3px solid #000;
}
.camera{
	width: 19px;
	height: 19px;
	position: absolute;
	z-index: 4;
	top: 14px;
	left: calc(50% - 9px);
	border-radius: 50%;
	background-color: #1c221f;
}
.camera:after{
	content: "";
	width: 10px;
	height: 10px;
	position: absolute;
	z-index: 4;
	top: calc(50% - 5px);
	left: calc(50% - 5px);
	border-radius: 50%;
	background-color: #46444a;
}
.screen2{
	width: 227px;
	height: 171px;
	position: absolute;
	z-index: 4;
	bottom: 29px;
	left: calc(50% - 113px);
	background: linear-gradient(to right, #5176db 0%, #5176db 48%, #3951b8 53%, #3951b8 100%);
	border-radius: 5px;
	border: 1px solid #3951b8;
}
.screen2::after{
	content: "";
	width: 220px;
	height: 162px;
	position: absolute;
	z-index: 4;
	box-sizing: border-box;
	top: calc(50% - 81px);
	left: calc(50% - 110px);
	background: #cac8ce;
	border-radius: 3px;
	border: 3px solid #000;
}
.bg-control-1{
	width: 83px;
	height: 83px;
	position: absolute;
	z-index: 4;
	top: 119px;
	left: 15px;
	background: linear-gradient(110deg, #3e61d5 0%, #8bacf8 100%);
	border-radius: 50%;
}
.bg-control-1:after{
	content: "";
	width: 72px;
	height: 72px;
	position: absolute;
	z-index: 4;
	top: 6px;
	left: 6px;
	background: linear-gradient(110deg, #5981e5 0%, #3a5dd2 100%);
	border-radius: 50%;
}
.control-1{
	width: 52px;
	height: 53px;
	position: absolute;
	z-index: 5;
	top: 16px;
	left: 16px;
	background: linear-gradient(110deg, #a6afb1 0%, #7b8084 100%);
	border-radius: 50%;
	box-shadow: #202f8f 2px 2px 9px;
}
.control-1:after{
	content: "";
	width: 41px;
	height: 41px;
	position: absolute;
	z-index: 5;
	top: 6px;
	left: 6px;
	background: linear-gradient(110deg, #717171 0%, #9d9fa7 100%);
	border-radius: 50%;
}
.control-2{
	width: 29px;
	height: 60px;
	position: absolute;
	z-index: 4;
	top: 217px;
	left: 40px;
	background: #3658b6;
	border: 2px solid #172574;
}
.control-2:before{
	content: "";
  width: 60px;
  height: 20px;
  position: absolute;
  z-index: 4;
  top: 17px;
  left: -19px;
  background: #3658b6;
  border: 2px solid #172574;
}
.control-2:after{
	content: "";
	width: 24px;
	height: 54px;
	position: absolute;
	z-index: 4;
	top: 0;
	left: 1px;
	background: #3658b6;
}
.control-2-detail{
	width: 2px;
  height: 14px;
  position: absolute;
  top: 3px;
  left: 11px;
  z-index: 5;
  background-color: #1e3797;
  box-shadow: #1e3797 0 37px 0;
}
.control-2-detail:before{
	content: "";
	width: 14px;
	height: 2px;
	position: absolute;
	top: 24px;
	left: -26px;
	z-index: 5;
	background-color: #1e3797;
	box-shadow: #1e3797 42px 0 0;
}
.mic{
	width: 5px;
	height: 5px;
	position: absolute;
	z-index: 4;
	bottom: 50px;
	left: 80px;
	background-color: #03218b;
	border-radius: 50%;
}
.mic:after{
	content: "MIC";
	width: 8px;
	height: 8px;
	position: absolute;
	z-index: 4;
	font-family: Arial;
	font-size: .3em;
	color: #1c3eb7;
	font-weight: normal;
	top: 6px;
	left: -6px;
}
.led{
	width: 15px;
	height: 11px;
	position: absolute;
	z-index: 4;
	top: 59px;
	right: 49px;
	background-color: #807d92;
	border: 1px solid #31447f;
	border-radius: 50%;
}
.button{
	width: 27px;
	height: 27px;
	position: absolute;
	z-index: 4;
	background-color: #2845a5;
	border: 2px solid #142788;
	box-shadow: #142788 2px 2px 9px;
	border-radius: 50%;
}
.x{
	top: 121px;
	right: 43px;
}
.x:after{
	content: "X";
	width: auto;
	height: auto;
	position: absolute;
	z-index: 5;
	font-family: Arial;
	font-size: .9em;
	color: #1e3793;
	font-weight: bold;
	top: 3px;
	left: 7px;
}
.a{
	top: 148px;
	right: 16px;
}
.a:after{
	content: "A";
	width: auto;
	height: auto;
	position: absolute;
	z-index: 5;
	font-family: Arial;
	font-size: .9em;
	color: #1e3793;
	font-weight: bold;
	top: 3px;
	left: 7px;
}
.b{
	top: 174px;
	right: 43px;
}
.b:after{
	content: "B";
	width: auto;
	height: auto;
	position: absolute;
	z-index: 5;
	font-family: Arial;
	font-size: .9em;
	color: #1e3793;
	font-weight: bold;
	top: 3px;
	left: 7px;
}
.y{
	top: 148px;
	right: 69px;
}
.y:after{
	content: "Y";
	width: auto;
	height: auto;
	position: absolute;
	z-index: 5;
	font-family: Arial;
	font-size: .9em;
	color: #1e3793;
	font-weight: bold;
	top: 3px;
	left: 7px;
}
.button2{
	width: 20px;
	height: 20px;
	position: absolute;
	z-index: 4;
	right: 70px;
	background-color: #2845a5;
	border: 2px solid #142788;
	box-shadow: #142788 2px 2px 9px;
	border-radius: 50%;
}
.button2:after{
	content: "";
	width: 50px;
	height: 20px;
	position: absolute;
	z-index: 5;
	line-height: 18px;
	font-family: Arial;
	font-size: .7em;
	color: #1e3793;
	font-weight: bold;
	top: 0;
	left: 24px;
}
.start{
	bottom: 174px;
}
.start:after{
	content: "START";
}
.select{
	bottom: 139px;
}
.select:after{
	content: "SELECT";
}
.jack{
	width: 7px;
	height: 6px;
	position: absolute;
	z-index: 4;
	bottom: 79px;
	right: 76px;
	background-color: #324cc8;
}
.jack:after {
    content: "";
    width: 3px;
    height: 4px;
    position: absolute;
    bottom: -3px;
    left: 2px;
    background-color: #324cc8;
}
.jack:before {
    content: "";
    width: 1px;
    height: 4px;
    position: absolute;
    bottom: 5px;
    left: 2px;
    background-color: #324cc8;
    box-shadow: #324cc8 2px 0px 0px;
}
.button-power{
	width: 24px;
	height: 24px;
	position: absolute;
	z-index: 4;
	right: 69px;
	bottom: 44px;
	background-color: #2845a5;
	border: 2px solid #142788;
	border-radius: 50%;
}
.button-power:before{
	content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: 5;
  right: 3px;
  bottom: 2px;
  border-top: 2px solid transparent;
  border-left: 2px solid #142788;
  border-right: 2px solid #142788;
  border-bottom: 2px solid #142788;
  border-radius: 50%;
}
.button-power:after{
	content: "";
	width: 2px;
	height: 9px;
	position: absolute;
	z-index: 5;
	right: 9px;
	bottom: 8px;
	background-color: #142788;
}
.led-2{
	width: 6px;
	height: 6px;
	position: absolute;
	z-index: 4;
	bottom: 80px;
	right: 54px;
	background-color: #3c5697;
	border-radius: 50%;
}
.led-3{
	width: 6px;
	height: 6px;
	position: absolute;
	z-index: 4;
	bottom: 53px;
	right: 54px;
	background-color: #FFF;
	border-radius: 50%;
}
.sleep{
	width: 50px;
	height: 11px;
	position: absolute;
	z-index: 4;
	bottom: 0;
	right: 47px;
	background-color: #3439a0;
	border: 2px solid #091483;
}
.sleep:before{
	content: "";
	width: 27px;
	height: 8px;
	position: absolute;
	z-index: 4;
	bottom: -1px;
	left: 0;
	background-color: #364dbe;
}
.sleep:after {
  content: "";
  width: 2px;
  height: 8px;
  background-color: #091483;
  position: absolute;
  z-index: 6;
  top: 0;
  left: 2px;
  box-shadow: #091483 4px 0 0, #091483 8px 0 0, #091483 12px 0 0, #091483 16px 0 0, #091483 20px 0 0;
}
.sleep-text{
	content: "";
  width: 50px;
  height: 10px;
  position: absolute;
  z-index: 5;
  font-family: Arial;
  font-size: .5em;
  color: #1e3793;
  font-weight: bold;
  bottom: 13px;
  right: 47px;
}
.btn-home{
	width: 42px;
	height: 24px;
	position: absolute;
	z-index: 4;
	bottom: 3px;
	left: calc(50% - 21px);
	background-color: #3f63d9;
	border: 2px solid #1538b1;
	box-shadow: #3a52cf 0px 2px 9px;
	border-radius: 50px;
}
.icon-home{
	width: 12px;
  height: 8px;
  position: absolute;
  z-index: 5;
  top: 9px;
  left: 13px;
  background-color: #8c92bb;
}
.icon-home:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: -6px;
  left: -4px;
  border-bottom: 6px solid #8c92bb;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.icon-home:after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  z-index: 5;
  top: 0;
  left: 3px;
  background-color: #4c5ca8;
}
.phone{
	width: 0;
  height: 0;
  position: absolute;
  z-index: 4;
  bottom: 0px;
  left: 43px;
  border-bottom: 17px solid #3b60d6;
  border-right: 0px solid transparent;
  border-left: 17px solid transparent;
}
.phone:before{
	content: "";
  width: 0;
  height: 0;
  position: absolute;
  z-index: 4;
  bottom: -17px;
  left: 0;
  border-bottom: 17px solid #2941ac;
  border-right: 17px solid transparent;
  border-left: 0px solid transparent;
}
.phone:after{
	content: "";
	width: 35px;
	height: 10px;
	position: absolute;
	z-index: 4;
	bottom: -24px;
	left: -17px;
	background-color: #FFF;
	border-radius: 50%;
}