/*.btn {
    &:hover + .box {
        transform: scale(2);
    }
}

.box {
}
*/

#docContainer1, #docContainer2
{
background-color:silver;
  transform-origin: top left;


transform: scale(0.1);
    transition: transform 900ms ease-in-out;

}

#docContainer1:hover,#docContainer2:hover  {
  transform: scale(1.0);
}


.codeFileContainer {

  width:100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 16px 16px;
  grid-auto-flow: row;
  min-height:800px;
  
  padding:10px;
  
  margin:1px;
  
}


.codeContainer{
border:2px solid black;
background-color:gray;
  border-radius: 10px 10px 0px 0px;

box-shadow: 5px 5px 5px silver;
/*border:3px solid #333;*/ 

}

div.tabDiv
{
width:100%;
opacity:0.7;
min-height:20px;
background-color:black;
border-bottom:2px solid #333;

font-family:menlo, monospace;
font-size:20px;
  border-radius: 10px 10px 0px 0px;
font-weight:bold;
text-align:center;
color:white;
}


.functionContainer{
background-color:DarkKhaki;
}

.resourcesContainer
{
background-color:beige;
  border-radius: 20px 20px 20px 20px;

}

.globalVariablesContainer
{
	background-color:BurlyWood;
}

.editableTextAreaDiv
{
	width:100%;
	height:100%;
	
	outline: none;

 -webkit-user-modify: read-write;
    -moz-user-modify: read-write;
    user-modify: read-write;
}

div.editableTextAreaDiv pre:hover
{
	border:1px solid #555;
	  border-radius: 10px 10px 0px 0px;

}
code, pre {
font-family: 'Menlo', Courier,monospace;
font-size:20px;
}

.innerEditableDivForMargin{
margin:10px;
}

.codeAreaName
{
font-size:25px;
}

.codeAreaName.func
{
}

.function-2 { grid-area: 1 / 2 / 2 / 3; }

.function-3 { grid-area: 2 / 2 / 6 / 3; }

.function-5 { grid-area: 1 / 3 / 3 / 4; }

.resources-1{ grid-area: 3 / 3 / 4 / 4; }

.function-7 { grid-area: 4 / 1 / 5 / 2; }

.function-8 { grid-area: 4 / 3 / 6 / 4; }


.function-1 { grid-area: 2 / 1 / 5 / 2; }

.global-variables-1 { grid-area: 1 / 1 / 2 / 2; }

.global-variables-2 { grid-area: 5 / 1 / 6 / 2; }