@import url(base.css);

main { max-width: 900px; }

footer { margin-top: 6em; }

.buttons {
  display: flex;
  flex-flow: wrap row;
  place-items: start;
  place-content: center;
  gap: 8px 10px;

  img { image-rendering: pixelated; }

  a {
    width: 88px; height: 31px;
    display: flex;
    place-items: center;
    place-content: center;
    box-sizing: border-box;
  }

  .txt {
    font-size: 15px;
    color: black;
    text-shadow: none;
    border: 4px outset currentcolor;
    border-radius: 5px;

    &:active {
      border-style: inset;
    }
  }

  + .buttons {
    margin-top: 1.5em;
  }
}

#khr    { background: #ffab71; color: #71153e; }
#peb    { background: #ead6c3; color: #494040; }
#dusty  { background: #fbd265; color: #805c2d; }
#ionchy { background: #feca2f; color: #1b1505; }
#goaty  { background: #564b8c; color: #ddffee; }
#gulfie { background: #3b4884; color: #f2cd0e; }
#tenna  { background: #6095da; color: #243224; }
#river  { background: #98d8e7; color: #d67d28; }
#spiral { background: #ef4d5a; color: #1f1f1f; }
#codl   { background: #87261f; color: #edb970; }

.buttons {
  figure { margin: 0; }

  figcaption {
    margin: 0;
    font-size: 70%;
  }
}


.button-note {
  margin: 0;
  text-align: right;
  align-self: center;
  padding: 0 0.75em 0 0;
}
.btw {
  display: block;
  font-size: 70%;
  font-style: italic;
}