@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
*{
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box
}
body{
font-family:'Poppins',sans-serif
}
::-moz-selection{
background-color:#ffffff;
color:#000000
}
::selection{
background-color:#ffffff;
color:#000000
}
 
.code_editor{
overflow:hidden; 
padding:0;
margin:0;
background-color:#eee
}
.code_editor .button{
width:100%;
background-color:#ffffff;
margin:0;
padding:10px 24.50px
}
.code_editor .button button{
padding:5px 30px;
border:none;
outline:none;
border:3px solid lightblue;
background-color:#eee;
color:#000000;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
cursor:pointer;
}
.code_editor textarea,
.code_editor iframe{
width:100%;
height:70vh;
resize:none;
border:none;
outline:none;
background-color:#ffffff;
color:#000000; 
font-size:1.2rem;
overflow-x:hidden;
}
iframe{
margin:0
}
.textarea1,
.textarea2,
.textarea3,
.textarea4{
display:none
}
.textarea1{
display:block;
}
.settion{
position:absolute;
top:90%;left:8px
}
.settion i{
font-size:1.30rem;
font-weight:bold;
color:red;
cursor:pointer;
}
.settingText{
margin-top:-65px;
width:100px;
background-color:#eee;
margin-left:28px;
text-align:center;
overflow:hidden;
transform:scale(0);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
opacity:0
}
.settingText ul{
	padding:2px 0
}
.settingText ul li{
	list-style:none;
	font-size:12px;
	margin:10px 0;
	padding:2px 0
}
.settingText ul li:hover{
	background-color:blue;
}
.settingPOPText{
	overflow:visible;
	transform:scale(1);
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	opacity:1;
	transition:0.5s ease;
	-webkit-transition:0.5s ease;
	-moz-transition:0.5s ease;
	-ms-transition:0.5s ease;
	-o-transition:0.5s ease;
}
.textList{
	position:absolute;
	top:20%;
	left:10%;
	width:350px;
	height:200px;
	background-color:#ffffff;
	overflow-x:hidden;
	overflow-y:scroll;
	z-index:5;
	border:2px solid #ffffff;
	display:none;
}
.textList ul li{
	margin-top:10px;
	list-style:none;
	padding:3.50px 10px;
	font-size:12px;
	cursor:pointer;
	color:red;
}
.textList ul li i{
	margin:0 5px}
.textList ul li:hover{
	background-color:blue;
}
.textList::-webkit-scrollbar-track{
	border:1px solid #ffffff;
	padding:2px 0;
	background-color:#404040;
}
.textList::-webkit-scrollbar{
	width:10px
}
.textList::-webkit-scrollbar-thumb{
	border-radius:10px;
	-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);
	box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color:#ffffff;
	border:1px solid #ffffff
}
.menuText{
	position:absolute;
	top:43px;left:3%;
	display:none
}
.menuText ul{
	width:250px;
	height:auto;
	background-color:#eee;
	color:#000000;
	text-align:center;
	border:2px solid #ffffff
}
.menuText ul li{
	list-style:none;
	margin:0;
	font-size:12px;
	border-bottom:1px solid #ffffff;
	padding:8px 0;
	cursor:pointer
}
.menuText ul li:hover{
	background-color:#737272
	}
	@media screen and (max-width: 722px){
.information .bars{display:block}
.information ul{
	display:none
}
.information ul.navbar{
	display:block
} 
.code_editor .button{
	display:-webkit-box;
	display:-ms-flexbox;display:flex
}
.code_editor .button button{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	padding:5px 12.50px;
margin:0 10px 5px -5px
}

.code_editor .button button:hover{
	background-color:#737272
	}
.menuText{
	top:43px;
	left:15%
}
.code_editor{
	border : 3px solid lightblue;
	padding: 2px;
	 
}
.settion{
	left:3.50px
	}
}