//colours
$background: white;
$body: #E2DED4;
$bodyshadow: #C1BEB6;
$black: #2C3E50;
$gray: #6C7A89;
$red: #F22613;
$yellow: #F5AB35;
$green: #26C281;
$blue: #22A7F0;
$brown: #8E6051;


body {
  background:$background;
  
.camera {
  position: relative;
  width:270px;
  height:270px;
  margin:0 auto;
  margin-top:10%;
  background: linear-gradient($body,$body,$body,$body, $bodyshadow);
  border-radius:40px;
  overflow:hidden;
  
  &:before {
    content:"";
    position: absolute;
    width:25px;
    height:100px;
    left:0;
    top:0;
    background:$brown;
    box-shadow:20px 0 0 $red, 40px 0 0 $yellow, 60px 0 0 $green, 80px 0 0 $blue, 100px 0 0 $brown, 110px 0 0 $brown, 120px 0 0 $brown, 130px 0 0 $brown, 140px 0 0 $brown, 150px 0 0 $brown, 160px 0 0 $black, 170px 0 0 $black, 180px 0 0 $black, 190px 0 0 $black, 200px 0 0 $black, 210px 0 0 $black, 220px 0 0 $gray, 240px 0 0 $brown, 245px 0 0 $brown;
  }
  
  &:after{
    content:"";
    position: absolute;
    width:60px;
    height:60px;
    background:$black;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius: 50%;
    box-shadow:0 0 0 20px $gray, 0 0 0 30px $black, 0 0 0 40px $body,5px 7px 0 41px $bodyshadow;
  }
}
  
}