*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

body{
    width: 100%;
    height: 100vh; /*height adjust A.T browser*/
}

.code-editor-container{
    width: 100%;
    height: 70%;/*30% rest is Output*/
    background-color: rgb(12,17,20);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;/*wrap when width dec - responsive too*/
    gap: 20px;
    padding: 20px;
    overflow: auto;/*html, css, js code editor go back to output container , & make output-container z-index:1 */
}

.code-editor{
    width: 450px;
    height: 450px;
    background-color: rgb(12,17,20);
    box-shadow: 2px 2px 10px black;
    border: 2px solid rgba(255, 255, 255, 0.103);
    border-radius: 20px ;
    overflow: auto;
    position: relative;
}

.head-editor{
    width: 100%;
    height: 60px;
    background-color: rgb(12,17,20);
    box-shadow: 2px 4px 10px black;
    border-radius: 0px 0px 40px 40px;/* top-left top-right btm-right btm-left*/
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
 
}
.left-head{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.left-head span{
    color: rgba(240, 248, 255, 0.425);
    font-size: 20px;
}

.right-head{
    transition: all .5s ;
    cursor: pointer;
}

.right-head img:hover{/*add this transition in right-head */
    scale: 120%;
} 

.code-editor textarea{
    width: 100%;
    height: calc(100% - 80px); /*60px(head-editor) ki 80px minus */
    background-color: rgb(12,17,20);
    border: none;
    position: absolute;/*btm:0 , w.r.t code-editor*/
    bottom: 0;
    outline: none;
    color: aliceblue;
    padding: 20px;
    resize: none;
    font-size: 20px;

}


.output-container{
    width: 100%;
    height: 30%;
    box-shadow: 2px -4px 10px rgb(25, 51, 48); /* -4px :- upper side shadow */
    color: rgba(240, 248, 255, 0.425);
    font-size: 20px;
    z-index: 1;
    position: fixed;/*to use z-index, give any position property too */
    bottom: 0;/*btm:0 , no space from btm */
    transition: all .5s;
}

.output-head{
    width: 100%;
    height: 60px;
    background-color: rgb(12,17,20);
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 20px;
    padding: 20px;
    
}

.output-head img{
    transition: all .5s ;
    cursor: pointer;
}

.output-head img:hover{
    scale: 120%;
}

#output{
    width: 100%;
    height: calc(100% - 60px);
    overflow: auto;
    background-color:white;
    /*background-color: red;*/
}

.output-full-active{
height: 100%;/*A.T Body*/
}

#full{
    transition: all 1s;/*inc. seconds smooth/slow transition*/
}

.html-input::selection{ /*when select html text*/
background-color: rgb(255,119,0);
}


.css-input::selection{ /*when select html text*/
background-color: rgb(0, 132, 255);
}


.js-input::selection{ /*when select js text*/
background-color: rgb(255,247,0);
color: black;
}