@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

*{box-sizing: border-box;/*border: 1px dotted;*/}
body{
	font-family: sans-serif;
	max-width: 850px;
	padding: 1em;
	margin: auto;
	}

img{
	max-width: 100%;
	width: auto;
	height: auto;
	vertical-align: middle;
	margin: .5em .1em;
}

h1,h2,button,#colors,#result,.copy-text,.coffee{font-family: "IBM Plex Mono", monospace;}

h1{
	position: fixed;
	right: 0;
	margin: 0 .5em;
	line-height: 1;
	opacity: .2;
}

h2{font-weight: 500;}
h2{margin: 1.1lh 0 0;}

a{color: inherit;}


/*button*/
button{
	touch-action: manipulation;
	font-size: 1.1rem;
	color: inherit;

	margin: 1em .4em;
	padding: .2em .6em;
}

.copy-text{font-size: 1rem;}

/*colors ul*/
#colors,#result ul{
	list-style: none;
	padding: 0 1em;
}

:is(#colors,#result ul) > li{
	border-left: 70px solid #eee;
	color: #666;
	height: 50px;
	margin: .7em 0;
	padding-left: .5em;
	display: flex;
	align-items: center;
}

#result{
	display: flex;
	flex-wrap: wrap;
	gap:1em;
	width: fit-content;
}

/*footer*/
footer{
	border-top: 1px dotted;
	margin: 5em 0 0;
	padding: 0em 1em 2em;
}

footer ul{list-style: '-　';margin: 0;}
.refer{opacity: .35;}

/*copy text*/
.copy-text{
	background: #f5f5f5;
	border-radius: 4px;
	border: 1px solid;
	margin: 1em .5em 0;
}

.copy-text::after{
	content: url(copy.svg);
	opacity: .7;
	vertical-align: sub;
}

.feedback{
	background: #666;
	color: #eee;
	border-radius: 3px;
	padding: .5em;
	position: absolute;
	z-index: 1;
	transition: .6s;
}

/*result 一部非表示*/
div:has(#display-none){
	border: 1px dashed;
	padding: .2em;
	margin: .5em;
	width: fit-content;
	user-select: none;
	}

.select{outline: 1px dashed;}
.display-none{display: none;}

/*coffee*/
.ko-fi,.buy-me-a-coffee{
	text-decoration: none;
	font-weight: 600;
	border: 1px solid #0004;
	border-radius: 8px;
	padding: .5em 1em;
	margin: .5em;
	}

:is(.ko-fi,.buy-me-a-coffee) svg{vertical-align: bottom;}
.ko-fi{background: #dfcc91;}
.buy-me-a-coffee{background: #e0c49f;}

@media screen and (max-width: 500px) {
	h1{
		position: relative;
		margin: 0 0 .8em;
	}

	#result ul{padding: 0;}
}