@charset "utf-8";

/* Noto Sans Mono */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap');

html, body {
	margin: 0;
	height: 100%;
	font-family: 'Noto Sans Mono';
}

* {
	box-sizing: border-box;
	vertical-align: middle;
}
body {
	color: black;
	background-color: white;
	background-image:
		linear-gradient(45deg, gray 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, gray 75%),
		linear-gradient(45deg, gray 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, gray 75%);
	background-size: 20px 20px;
	background-position:
		0 0,
		10px 10px,
		10px 10px,
		0 0;
}
body[data-foreground="white"] {
	color: white;
}

#background {
	width: 100%;
	height: 100%;
	background-color: #ab94fc;
}

#top-bar {
	position: fixed;
	left: 0;
	top: 0;
	padding: 1rem;
	z-index: 1;
}
#top-bar img {
	width: 4rem;
	height: 4rem;
}
body:not([data-foreground="white"]) #logo-dark {
	display: none;
}
body[data-foreground="white"] #logo-light {
	display: none;
}

#color-combination {
	position: fixed;
	left: 0;
	bottom: 0;
	padding: 1rem;
	padding-top: 3rem;
	width: 100%;
	overflow-x: auto;
	white-space: nowrap;
}
#main {
	margin-top: 0.5rem;
	font-size: 1.6rem;
}
#main input {
	border: none;
	border-bottom: 0.15rem solid black;
	background-color: rgba(255, 255, 255, 50%);
	color: inherit;
	font-family: inherit;
	font-size: inherit;
}
#main input:invalid {
	border-color: red;
	background-color: rgba(255, 128, 128, 50%);
}
body[data-foreground="white"] #main input {
	border-color: white;
	background-color: rgba(0, 0, 0, 50%);
}
body[data-foreground="white"] #main input:invalid {
	background-color: rgba(128, 0, 0, 50%);
}
#ratio {
	width: 6ch;
}
#color-string {
	width: 20ch;
}