*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	height: 100%;
}
body{
	min-height: 100%;
	background: floralwhite;
	font-family: monospace;
}
h1{
	text-align: center;
}
.header{
	padding: 10px;
}
.footer{
	text-align: center;
	padding: 10px;
}
.content{
	display: flex;
	min-height: 80vh;
	flex-direction: row;
}
.draw_area, .viewer_area{
	flex: 1;
}
.css_text, .html_text{
	color: crimson;
}
.css_box{
	max-height: 200px;
	overflow-x: hidden;
	overflow-y: auto;
}
.controls{
	display: flex;
	flex-direction: row;
	width: 80%;
	height: 20px;
	justify-content: flex-start;
}
.draw_area{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.viewer_area{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	row-gap: 20px;
}
.control{
	width: 30%;
}
.draw_board{
	display: block;
	width: 80%;
	border: 1px solid black;
	image-rendering: pixelated;
}
.color_show{
	background: black;
	height: 20px;
}
.box{
	width: 90%;
	padding: 10px 20px;
	background: black;
	position:  relative;
}
.box__info__button > img{
	display: block;
	max-width: 100%;
}
.box__info{
	background: hsl(16.114, 100%, 65.686%);
	display: flex;
	flex-direction: row;
	position: absolute;
	right: 0;
	top: 0;
	font-weight: bolder;
}
.box__info:active{
	background: hsl(16.114, 100%, 40%);
}
.box__info__button{
	background-color: transparent;
	border: none;
	width: 20px;
}
.box__info__text{
	padding: 5px 8px;
	user-select: none;
}
@media (max-width: 500px){
	.content{
		flex-direction: column;
	}
	.viewer_area{
		
	}
	.draw_board, .controls{
		width: 90%;
	}
}