@font-face {
  font-family: pilowlava;
  src: url(Pilowlava-Atome.otf);
}

@font-face {
  font-family: basteleur;
  src: url(Basteleur-Bold.otf);
}
body {
  font-family: basteleur;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;      /* vertical */
  justify-content: center;  /* horizontal */
}
h1 {
  font-family: pilowlava;
}
img {
  width: 80%;
}

#pattern-edit-canvas {
display: block;
width: 100%;
height: 80vh;
}

:root { --size: 20pt; --t: 30pt; }
body  { margin: 0; padding-bottom: var(--t); }   /* keep content clear of the strip */

.infoheader {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--t);
  line-height: var(--t);
  font-size: var(--size);
  white-space: nowrap;
  overflow: hidden;
  background: white;
  text-align: center;
}

.footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--t);
  line-height: var(--t);
  font-size: var(--size);
  white-space: nowrap;
  overflow: hidden;
  background: white;
}


.grid {
    width: min(80vmin - 2 * var(--t), 900px);
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 8px;
  }

.cell {
  /* background: black; */
  transition: filter 0.3s ease; 
}
.cell img:hover {
  /* Hover state: 100% color */
  /* background: rgb(248, 128, 48) */
  filter: opacity(100%);

}
.cell img{
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  /* mix-blend-mode: lighten; */

  /* Smooth transition animation */
  
  /* Initial state: normal color */
  filter: opacity(50%);
  align-items: center;
  justify-content: center;
}

.wavy-red {
	text-decoration-line: underline;
	/* text-decoration-color: tomato; */
	text-decoration-color: Turquoise;
	text-decoration-style: wavy;
	color: tomato;
}


h2 input {
  font: inherit;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  width: 10ch; 
}


.pattern-image-row {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
}

.pattern-image-row img {
	height: 200px;
	width: auto;
}



input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: tomato;
}

.suggestion-list {
	list-style: square;
	background-color: Turquoise;
	padding: 1rem 1rem;
	margin: 1rem;
	/* text-decoration-line: underline; */
	/* text-decoration-color: Turquoise; */
}


#suggestions {
position: fixed;
right: 2rem;
list-style: none;
margin: 0;
padding: 0;
text-align: right;
/* no background set, so the page shows through */
}
#suggestions li { cursor: pointer; padding: 0.25rem 0; }
#suggestions li:hover { text-decoration: underline; }