@charset "utf-8";

/*---[ エディタ ]---*/
div#editor-container 
{
	display		: flex;
//	border		: 1px solid #333;
	background	: rgba(30,30,30,0.8);
	width		: 720px;
	height		: 710px;
	border-radius	: 25px;
}
div.line-numbers
{
	width		: 40px;
	padding		: 11px;
	text-align	: right;
//	color		: #888;
	overflow	: hidden;
	background	: #555;
	user-select	: none;
	white-space	: pre;
	border-radius	: 25px 0 0 25px;
}
div.col-numbers
{
	position	: absolute;
	width		: 649px;
	text-align	: left;
	padding		: 0 0 0 71px;
//	left		: 0;
	top			: 740px;
//	color		: #888;
	background	: #555;
	border-radius	: 0 0 25px 25px;
}
div.editor-wrapper
{
	position	: relative;
	flex-grow	: 1;
}
div.highlight 
{
	position		: absolute;
	top				: 0;
	left			: 0;
	width			: 100%;
	height			: 100%;
	padding			: 10px;
	white-space		: pre-wrap;
	overflow		: auto;
	pointer-events	: none;
	background		: rgba(30,30,30,0.0);
	color			: white;
	text-align		: left;
}

/*---[ エディタ/textarea ]---*/
textarea.editor
{
//	font-family	: "SmileBASIC M+ 1p bold";
	position	: absolute;
	top			: 0;
	left		: 0;
	width		: 100%;
	height		: 100%;
	padding		: 10px;
	background	: transparent;
	color		: transparent;
	caret-color	: white;
	font-size	: 16px;
	border		: none;
	resize		: none;
	outline		: none;
	overflow	: auto;
	white-space	: pre-wrap;
}

/*---[ シンタックスハイライト ]---*/
span.keyword	{ color: #7B7BF7; }	/* 命令 	*/
span.number		{ color: #F04090; }	/* 数値		*/
span.string		{ color: #6080F0; }	/* 文字列	*/
span.comment	{ color: #20F010; }	/* コメント	*/
span.label		{ color: #F0A000; }	/* @ラベル	*/
span.constant	{ color: #B0D0D0; }	/* #定数	*/
span.reserved	{ color: #00C0F0; } /* 予約語	*/

/*---[ ソフトキーボード ]---*/
div#keyboard-container
{
	width		: 400px;
	margin		: 20px;
	padding		: 20px;
}
div.key_kind_info
{
	font-size	: 18px;
	text-align	: left;
	color		: yellow;
	margin-top	: 5px;
}
div.key_array
{
	display		: flex;
}
button.key_char
{
	font-family		: "SmileBASIC M+ 1p bold";
	font-size		: 15px;
	margin			: 0;
	border-radius	: 25%;
	background		: #fff;
}

/*---[ タイトル/名前/公開範囲 ]---*/
div.title
{
	background	: rgba(100,250,100,0.8);
	width		: 720px;
	border-radius	: 25px;
	font-size	: 25px;
	color		: #000;
	margin		: 20px 0 0;
}
div.user
{
//	background	: rgba(150,150,250,0.8);
	width		: 720px;
//	border-radius	: 25px;
	font-size	: 25px;
	color		: #fff;
	text-align	: right;
}
div.date
{
	width		: 720px;
	font-size	: 16px;
	color		: #fff;
	text-align	: right;
}

/*---[ 共有するボタン ]---*/
button.btn_share
{
	margin-top		: 20px;
	width			: 250px;
	height			: 50px;
	font-size		: 30px;
	border-radius	: 25px;

	background		: #8cf;
	border			: 4px solid #cef;
	color			: black;
}
button.btn_share:hover
{
	background		: #468;
	color			: white;
}

/*---[ フォークするボタン ]---*/
button.btn_fork
{
	margin-top		: 20px;
	width			: 300px;
	height			: 50px;
	font-size		: 30px;
	border-radius	: 25px;

	background		: #8cf;
	border			: 4px solid #cef;
	color			: black;
}
button.btn_fork:hover
{
	background		: #468;
	color			: white;
}

/*---[ エラー時 ]---*/
button.btn_error
{
	width			: 400px;
	height			: 50px;
	font-size		: 30px;
	border-radius	: 25px;

	background		: #8cf;
	border			: 4px solid #cef;
	color			: black;
}
button.btn_error:hover
{
	background		: #468;
	color			: white;
}


/*---[ ウィンドウサイズ750px以下で見た場合は左寄せ ]---*/
@media only screen and (max-width: 750px)
{
	body
	{
		justify-content	: left;
	}
}