html, body{
    --ausgabe-hoehe:400px;

    height:100vh;
    margin:0;
    padding:0;

    font-size: 16px;
}
/*********************************/
/*************Eingabe*************/
/*********************************/
#eingabeDiv{
    height: 100vh;
    width:calc(100% - var(--ausgabe-hoehe));    
}

#blocklyArea{
    height: calc(100vh - 1px);
    width: 60%;
    float: left;
}

#codeDiv{
    margin: 0;
    padding:0;
    height: 100vh;
    width:40%;
    float: left;
    background-color: black;
}

#codeButton, #fontPlusButton, #fontMinusButton{
    position: relative;
    z-index: 101;
}

textarea{
    margin: 0;
    padding:0;
    resize: none;
    width: 100%;
}

#noClickDiv{
    position: absolute;
    z-index: 100;
    background-color: darkgray;
    opacity: 0.5;
    height: 100vh;
    top: 0; 
}
/*********************************/
/*************Ausgabe*************/
/*********************************/
#ausgabeDiv{
    height: 100vh;
    width: var(--ausgabe-hoehe);
    float: right;
}

#buttonDiv{
    background-color: black;
    width: 100%;
    height:50px; 
}

label, button{
	margin: 5px;	
	background-color: rgba(0,0,0,0);
	background: none;
	color: white;	
	border:none;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	padding: 6px 15px;
	border-radius: 5px;
	transition-duration: 0.4s;
	border-style: solid;
	border-width: 1px;
	border-color: #ffffff;
}

label:hover, button:hover{
	background-color:white;
	color: black;	
}

button:focus {outline:0;}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
#printDiv{
    color:white;
    background-color: black;
    width:100%;
}

#output{
    height: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: white;    
    overflow-x: hidden;
    overflow-y: scroll;
    white-space: break-spaces;
    /*overflow:auto;*/
}

pre{
    margin: 0;
    padding: 0;
}


#turtleDiv{
    background-color: white;
    width:100%;
    height: var(--ausgabe-hoehe);
}