html{
    box-sizing: border-box;
}
body{   
    padding:120px;
    background-color: black;
}
/*/////////////////div containing the whole rom//////////////////*/
#container{
     width:100%;
    display: grid;
    height:500px;
    overflow: hidden;
    grid-template-areas:
      "back "
      "floor";
    grid-template-rows:70% 30% ;
    grid-template-columns:1fr;
    border: 1px solid ;
}
/*/////////////////back wall//////////////////*/
 #back_wall{
    display: flex;
    grid-area: back;
    padding-left:20px;
    flex-direction: row;
    position:  relative;
    justify-content:flex-start;
    background:linear-gradient(to right,#fc5c7d,#6a82fb);
    /* background:linear-gradient(to right,#00b4db,#0083b0); */
    border-bottom: 10px solid white;
}
/*/////////////////back wall posters//////////////////*/
#floor,
body,
#window,
.full_drawer,
div[class="small_drawer"],
.lamp,
.top_lamp,
#poster_hashnode,
#hashnode_image{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.poster{
    font:14pt bold;
    width:95px;
    height:110px;
    position: absolute;
    text-align: center;
    border:2px solid black;
}
#poster_naruto{
    z-index:1;
    top:60px;
    left:760px;  
}
#poster_hashnode{
    top:60px;
    left:470px;
    background-color: white;
}
#hashnode_image{
    width:75px;
    height:75px;
    background:#2a62ff;
    border-radius:25%;
    transform-origin: center;
    transform:rotateZ(45deg);
}
#hashnode_image::after{
    content: '';
    width:30%;
    height:30%;
    background:white;
    border-radius: 50% 50%;
}
/* default poster message */
.poster_message{
    top:-8%;
    left:20%;
    font:12pt bold;
    position: absolute;
}
.poster_message::after{
    content:':):):)';
}
.poster_nail{
    top:0;
    left:50%;
    width:5px;
    height: 5px;
    z-index: 7;
    position: absolute;
    border-radius: 50% 50%;
    background-color:black;
}  
#image_naruto{
    z-index:4;
    width:100%;
    height:100%;
}
/*/////////////////window area including the rails and panes//////////////////*/
#window{
    width:52%;
    height:90%;
    margin-top:-25px;     
}
/*/////////////////curtain rail//////////////////*/
 #rail{
    width:95%;
    height:30%;
    background-color: inherit;
}
.rail_holder{
    width:35px ;
    height:35px;
    border-radius:50% 50%;
    border:1px solid black; 
    background-image: linear-gradient(to bottom,rgb(218, 218, 148),yellow 35%,white);   
}
#rail,
#inner_window{
    display:flex;
    justify-content: center;
    align-items: center;
}
/* #left_hold{
} */
#mid{
    width:85% ;
    height:15px;
    border-radius:50px;
    background-image: linear-gradient(to bottom,rgb(73, 73, 64),yellow 35%,white); 
}
/* #right_hold{
} */
/*/////////////////inner window ie contains the panes//////////////////*/
#inner_window{
    width:90%;
    height:60%;
    background-position-x:20%;
    background-position-y: 90%;
    background-image: url("images/posters/images\ \(27\).jpeg");
}
  #left_pane,#right_pane{
    width:47%;
    height:98%;
    border-style: solid;
    border-color: rgb(14,38,65);
    background-color:transparent;   
}
 #left_pane{
    position:relative;
    border-width: 12px 4px 10px 7px;
}
#right_pane{
    position:relative;
    border-width: 12px 7px 10px 4px;
}
/* ////////////////pane messages */
#right_pane_message{
    top:-90%;
    left:100px;
}
#left_pane_message{
    top:-90%;
    left:-100px;
}
/*/////////////////window pane knobs*/
.inner_window_knob{
    top: 70px;
    width:15px;
    height:15px;
    position: absolute;
    border-radius: 50% 50%;
}
#left_pane_window_knob{
    left: 88%;
    background-image: linear-gradient(45deg,black,white);
}
#right_pane_window_knob{
    left:2%;
    background-image: linear-gradient(-45deg,black,white);
}
.pane_knob_holder{
    top: 7px;
    width:30px;
    height:5px;
    position: absolute;
    border-radius: 50% 50%; 
}
#left_pane_knob_holder{
    left:-18px;
    transform-origin: top right;
    transform: rotateZ(40deg);
    background-image: linear-gradient(45deg,black,white);
}
#right_pane_knob_holder{
    left:7px;
    transform-origin: bottom left;
    transform: rotateZ(-30deg);
    background-image: linear-gradient(-45deg,black,white);   
}
/*/////////////////floor*/
#floor{
    padding:3px;
    grid-area: floor;
    position: relative;
    justify-content: center;
    background:linear-gradient(to right,#DECBA4,#3E5151) ; 
}
#image_center{
    width:70%;
    height:100%;
} 
/*/////////////////stool//////////////////*/
#stool{
    top: -120px;
    left:150px;
    width:200px;
    height:200px;
    position:absolute;
}
.stool_area{
    border-top:15px solid rgb(144,93,14);
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    position:absolute;
}
#upper_stool_area{
    top:50px;
    left:25px;
    width:130px;
    border-bottom: 1px solid black;
}
#mid_stool_area{
    top:66px;
    left:40px;
    width:100px;
}
#lower_stool_area{
    top:130px;
    left:65px;
    width:70px;
    height:10px;
    position:absolute;
    background-image: linear-gradient(to bottom,rgb(144,93,14),rgb(184,165,49),rgb(226, 215, 146));
}
.stool_legs{
    width:3px;
    border-bottom: 1px solid black;
    border-top:80px solid rgb(144,93,14);
    position:absolute;
}
#left_stool_leg{
    top:81px;
    left:55px;
    border-left:5px solid transparent;
    border-right:16px solid transparent;
}
#right_stool_leg{
    top:81px;
    left:120px;
    border-left:16px solid transparent;
    border-right:5px solid transparent;
}
/*/////////////////big drawer//////////////////*/
.full_drawer{
    top: -70px;
    left:175px;
    width:150px;
    height:120px;
    position: absolute; 
    border-style: solid;
    border-width: 2px 5px 1px 5px;
    border-color: black;
}
/* #full_drawer_left{
    top: -70px;
    left:175px; 
} */

#full_drawer_right{
    z-index: 1;
    top: -80px;
    left:630px; 
}
/*/////////////////drawer components//////////////////*/
.small_drawer{
    width:100%;
    height:33%;
    background-color: pink;
    border-bottom:1px solid black;
}  
.knob{
    width: 15px;
    height:6px;
    border-radius: 5px;
    background-color: black;
}
/*/////////////////drawer stand//////////////////*/
.stand{
    top:120px ;
    left: -15px;
    width:160px;
    position: absolute;
    border: 1px solid black;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid maroon;  
}
#stand_left{
    top:120px ;
    left: -15px;    
}
/*/////////////////lower lamps//////////////////*/
.lamp{
    z-index: 2;
    top: -190px;
    left: 200px;
    width:100px;
    height:120px;
    position: absolute;
}
#lamp_left{
    top: -190px;
    left: 200px;
}
#lamp_right{
    top: -200px;
    left: 650px;
}
.lamp-top{
    width:45px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 60px solid maroon; 
}
.lamp-mid{
    width:5px;
    height:90px;
    background-color: yellow;
    border:1px solid black;
}
.lamp-bottom{
    width:90px;
    height:10px;
    position: relative;
    background-color: blueviolet;
    border:1px solid black;
}
/*/////////////////lower lamp switch//////////////////*/
.lamp_switch{
    width:2px;
    height:30px;
    position: absolute;
    border:1px solid black;
    background-image: linear-gradient(to right,mediumorchid,white,mediumorchid); 
}
#lamp_left_switch{
    top: -53px;
    left: 52px;
}
#lamp_right_switch{
    top: -53px;
    left: 54px;
}
/*/////////////////hanging lamps//////////////////*/
.top_lamp{
    width:150px;
    position:absolute;
}
.top_lamp_bottom{
    z-index: 2;
    width:40px;
    height: 100px;
    position: relative;
    background:linear-gradient(to right,grey,white,black);
}
.top_lamp_mid{
    width:4px;
    height: 100px;
    background-color: black;
}
/* #top_lamp_left{
    left:0px;
} */
/* #top_lamp_left .top_lamp_mid{
    height:40px;
} */
#top_lamp_right{
   left:660px;
}
#top_lamp_right .top_lamp_mid{
    height:35px;
}
#top_lamp_center{
    z-index: 4;
    left: 425px;
}
#top_lamp_center_holder{
    width: 20px;
    height:12px;
    border-style: solid;
    background-color: orangered;
    border-color: black;
    border-top-left-radius:10px ;
    border-top-right-radius:10px ;
}
#top_lamp_center .top_lamp_mid{
    height:130px;
}
#top_lamp_center_bottom{
    width:40px;
    position: relative;
    border-bottom: 40px solid orange; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
/*/////////////////hanging lamps switch//////////////////*/
.top_lamp_switch{
    position: absolute;
    border:1px solid black;
}
#top_lamp_center_switch{
    top: 40px;
    left: 20px;
    width:2px;
    height:70px;
    background-image: linear-gradient(to right,rgb(197, 157, 92),white,rgb(19, 212, 212));
}
#top_lamp_right_switch{
    top: 100px;
    left: 25px;
    width:1.5px;
    height:50px;
    background-image: linear-gradient(to right,rgb(80, 77, 80),white,rgb(11, 10, 12));
}
#stand_right{
    left: -4px;
    border-left: 0px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 20px solid maroon;  
}
/*/////////////////lower flower vase//////////////////*/
#vase{
    top:-40px ;
    left: 35px;
    width:60px;
    height:100px;
    position: absolute;
    border-radius:40%;
    border: 1px solid black;
    background-image: linear-gradient(to right,#0f0c29,#302b63,white,#24243e);
    border-top: 2px solid black;
}
/*/////////////////lower vase flowers//////////////////*/
.flower{
    width:1px;
    border-left:1px;
    position: absolute;
    background-color: green;
    border: 1px solid black;
}
#flower1{
    top: -52px;
    left: 25px;
    height:50px;
}
#flower2{
    top: -56px;
    left: 29px;
    height:54px;
}
#flower3{
    top: -59px;
    left: 34px;
    height:57px;
}
/*/////////////////window pane flower vases//////////////////*/
.small_vase1{
    width:25px;
    position: absolute;
    border-bottom: 2px solid black; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}
.small_top{
    top:-44px;
    left:-20px;
    width:64px;
    height: 10px;
    position: absolute;
    border-radius: 10px;
    background-color: chocolate;
}
#small_vase_left{
    top:-120px;
    left:90px;
    border-top: 35px solid lavenderblush; 
}
#small_vase_right{
    z-index:1;
    top:-120px;
    left:270px; 
    border-top: 35px solid paleturquoise;     
}
#small_vase_right div{
    background-color: black;
}
/*/////////////////bed//////////////////*/
#bed{
    z-index: 2;
    top:-120px;
    left:322px;
    width:340px;
    height:400px;
    display: flex;
    align-items:center;
    flex-direction:column;
    justify-content: flex-start;
    position:absolute;
}
#bed_head{
    width:250px;
    display: flex;
    align-items:center;
    flex-direction:row;
}
.center_head_zone{
    display: flex;
    height: 120px;
    align-items:center;
    flex-direction:column;
    justify-content: space-around;
}
.center_head{
    width:220px;
    height:20px;
    border: 1px solid black;
    background-color: hotpink;
}
.side_head{
    width:15px;
    height:150px;
    border: 1px solid black;
    background-color: white; 
}
#bed_upper{
    top:100px;
    left:30px;
    width:280px;
    height:70px;
    z-index: 4;
    position: absolute;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    border-bottom: 10px solid white;
    background-image: linear-gradient(to bottom,rgb(243, 123, 43),rgb(226, 85, 19),rgb(104, 48, 16));
}
/* #left_head{
}
#right_head{
} */
/*    
#bed_legs{  */
/* } */ 
.bed_legs{
    top:180px;
    width:7px;
    position: absolute;
    border-top:34px solid black ;
}
#left_leg{
    left:50px;
    border-right:9px solid transparent ;
    border-left:1px solid transparent ;
}
#right_leg{
    left:280px;
    border-right:1px solid transparent ;
    border-left:9px solid transparent ;
}
#pillow{
    top:50px;
    left:120px;
    width:100px;
    height:55px;
    position: absolute;
    border-radius: 30% 30%;
    border:1px solid black;
    background-image: linear-gradient(45deg, #fffbd5,#b20a2c);
}
/*/////////////////END//////////////////*/