@font-face {
  font-family: "daisy";
  src: url("./daisywhl-webfont.woff2") format("woff2");
  font-display: block;
  font-weight: normal;
  font-style: normal;
}

body {
  background: url("./IMG_0792.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
main {
  font-family: daisy, monospace;
  font-size: 2vw;
  /*   -webkit-font-smoothing: none; */
  margin: 36vw auto;
  padding: 20px 15vw;
  text-transform: uppercase;
  text-shadow: 0px 0px 1px black;
}

header {
  text-align: center;
}
.glyphs {
  display: grid;
  margin-top: 20px;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  font-size: 1.5vw;
}
.glyphs > div {
  display: flex;
  flex-wrap: no-wrap;
  align-items: center;
  gap: 10px;
}
.glyph {
  --bp-x: 1;
  --bp-y: 1;
  background: url("./glyphs-v2.png");
  background-size: 300px 300px;
  width: 30px;
  height: 30px;
  border: 1px solid black;
  background-clip: content-box;
  background-origin: content-box;
  padding: 10px;
  background-position: calc(-33.5px * calc(var(--bp-x) - 1))
    calc(-33.5px * calc(var(--bp-y) - 1));
  display: inline-block;
  image-rendering: pixelated;
}
.glyph--2 {
  --bp-x: 3;
  --bp-y: 1;
}
.glyph--3 {
  --bp-x: 4;
  --bp-y: 1;
}
.glyph--4 {
  --bp-x: 5;
  --bp-y: 1;
}
.glyph--5 {
  --bp-x: 1;
  --bp-y: 2;
}
.glyph--6 {
  --bp-x: 2;
  --bp-y: 2;
}
.glyph--7 {
  --bp-x: 3;
  --bp-y: 2;
}
.glyph--8 {
  --bp-x: 4;
  --bp-y: 2;
}
.glyph--9 {
  --bp-x: 5;
  --bp-y: 2;
}
.glyph--10 {
  --bp-x: 6;
  --bp-y: 2;
}
.glyph--11 {
  --bp-x: 7;
  --bp-y: 2;
}
.glyph--12 {
  --bp-x: 1;
  --bp-y: 3;
}
.glyph--13 {
  --bp-x: 2;
  --bp-y: 3;
}
.glyph--14 {
  --bp-x: 3;
  --bp-y: 3;
}
.glyph--15 {
  --bp-x: 4;
  --bp-y: 3;
}
.glyph--16 {
  --bp-x: 5;
  --bp-y: 3;
}
.glyph--17 {
  --bp-x: 6;
  --bp-y: 3;
}
.glyph--18 {
  --bp-x: 7;
  --bp-y: 3;
}
.glyph--19 {
  --bp-x: 8;
  --bp-y: 3;
}
.glyph--20 {
  --bp-x: 9;
  --bp-y: 3;
}
.glyph--21 {
  --bp-x: 1;
  --bp-y: 4;
}
.glyph--22 {
  --bp-x: 2;
  --bp-y: 4;
}
.glyph--23 {
  --bp-x: 3;
  --bp-y: 4;
}
.glyph--24 {
  --bp-x: 4;
  --bp-y: 4;
}
.glyph--25 {
  --bp-x: 5;
  --bp-y: 4;
}
.glyph--26 {
  --bp-x: 6;
  --bp-y: 4;
}
.glyph--27 {
  --bp-x: 7;
  --bp-y: 4;
}