* {
  font-family: "Roboto Mono", serif;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #333;
  color: white;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: ". stats controls";
  padding: 1.5rem;
}

header nav {
  display: flex;
  align-items: center;
}

header nav.stats {
  grid-area: stats;
  gap: 2.5rem;
}

header nav.controls {
  grid-area: controls;
  justify-content: flex-end;
  gap: 0.5em;
}

header [data-info] {
  color: darkgray;
}

header [data-info] *,
header [data-info]:not(:has(*)) {
  color: white;
}

main {
  flex-grow: 1;
  background-color: darkgreen;
  display: grid;
  grid-template-columns: 5fr 37fr 5fr;
}

main section {
  padding-top: 2vh;
}

main section:first-of-type,
main section:last-of-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
}

main section:not(:first-of-type):not(:last-of-type) {
  background-color: rgba(255, 255, 255, 0.1);
  justify-items: center;
  display: flex;
  justify-content: space-evenly;
}

button {
  cursor: pointer;
  padding: 0.5em;
}

dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border-radius: 5px;
  border: none;
  min-width: 35vw;
  max-width: 30rem;
  padding: 0;
}

dialog .main:not(:last-child),
dialog .header:not(:last-child) {
  border-bottom: 1px solid lightgray;
}

dialog .header h1 {
  font-weight: bold;
  font-size: x-large;
  margin: 0;
}

dialog > * {
  padding: 1.5rem;
}

dialog .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

dialog .header button {
  background-color: transparent;
  border: none;
  padding: 5px;
  font-size: 1.5em;
  color: grey;
}

dialog .header button:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

dialog .footer {
  display: flex;
  justify-content: flex-end;
}

.stack :not(:first-of-type) {
  margin-top: -120%;
}

[data-card] {
  width: 6.3829787234vw;
  aspect-ratio: 360/504;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  box-sizing: border-box;
}
[data-card].selected {
  border: 2px solid red;
}
[data-card][data-card=B] {
  background-image: url(../cards/B.png);
}
[data-card][data-card=BE] {
  opacity: 0.5;
  background-image: url(../cards/B.png);
}
[data-card][data-card=HE] {
  opacity: 0.5;
  background-image: url(../cards/HE.png);
}
[data-card][data-card=H1] {
  background-image: url(../cards/H1.png);
}
[data-card][data-card=H2] {
  background-image: url(../cards/H2.png);
}
[data-card][data-card=H3] {
  background-image: url(../cards/H3.png);
}
[data-card][data-card=H4] {
  background-image: url(../cards/H4.png);
}
[data-card][data-card=H5] {
  background-image: url(../cards/H5.png);
}
[data-card][data-card=H6] {
  background-image: url(../cards/H6.png);
}
[data-card][data-card=H7] {
  background-image: url(../cards/H7.png);
}
[data-card][data-card=H8] {
  background-image: url(../cards/H8.png);
}
[data-card][data-card=H9] {
  background-image: url(../cards/H9.png);
}
[data-card][data-card=H10] {
  background-image: url(../cards/H10.png);
}
[data-card][data-card=H11] {
  background-image: url(../cards/H11.png);
}
[data-card][data-card=H12] {
  background-image: url(../cards/H12.png);
}
[data-card][data-card=H13] {
  background-image: url(../cards/H13.png);
}
[data-card][data-card=DE] {
  opacity: 0.5;
  background-image: url(../cards/DE.png);
}
[data-card][data-card=D1] {
  background-image: url(../cards/D1.png);
}
[data-card][data-card=D2] {
  background-image: url(../cards/D2.png);
}
[data-card][data-card=D3] {
  background-image: url(../cards/D3.png);
}
[data-card][data-card=D4] {
  background-image: url(../cards/D4.png);
}
[data-card][data-card=D5] {
  background-image: url(../cards/D5.png);
}
[data-card][data-card=D6] {
  background-image: url(../cards/D6.png);
}
[data-card][data-card=D7] {
  background-image: url(../cards/D7.png);
}
[data-card][data-card=D8] {
  background-image: url(../cards/D8.png);
}
[data-card][data-card=D9] {
  background-image: url(../cards/D9.png);
}
[data-card][data-card=D10] {
  background-image: url(../cards/D10.png);
}
[data-card][data-card=D11] {
  background-image: url(../cards/D11.png);
}
[data-card][data-card=D12] {
  background-image: url(../cards/D12.png);
}
[data-card][data-card=D13] {
  background-image: url(../cards/D13.png);
}
[data-card][data-card=SE] {
  opacity: 0.5;
  background-image: url(../cards/SE.png);
}
[data-card][data-card=S1] {
  background-image: url(../cards/S1.png);
}
[data-card][data-card=S2] {
  background-image: url(../cards/S2.png);
}
[data-card][data-card=S3] {
  background-image: url(../cards/S3.png);
}
[data-card][data-card=S4] {
  background-image: url(../cards/S4.png);
}
[data-card][data-card=S5] {
  background-image: url(../cards/S5.png);
}
[data-card][data-card=S6] {
  background-image: url(../cards/S6.png);
}
[data-card][data-card=S7] {
  background-image: url(../cards/S7.png);
}
[data-card][data-card=S8] {
  background-image: url(../cards/S8.png);
}
[data-card][data-card=S9] {
  background-image: url(../cards/S9.png);
}
[data-card][data-card=S10] {
  background-image: url(../cards/S10.png);
}
[data-card][data-card=S11] {
  background-image: url(../cards/S11.png);
}
[data-card][data-card=S12] {
  background-image: url(../cards/S12.png);
}
[data-card][data-card=S13] {
  background-image: url(../cards/S13.png);
}
[data-card][data-card=CE] {
  opacity: 0.5;
  background-image: url(../cards/CE.png);
}
[data-card][data-card=C1] {
  background-image: url(../cards/C1.png);
}
[data-card][data-card=C2] {
  background-image: url(../cards/C2.png);
}
[data-card][data-card=C3] {
  background-image: url(../cards/C3.png);
}
[data-card][data-card=C4] {
  background-image: url(../cards/C4.png);
}
[data-card][data-card=C5] {
  background-image: url(../cards/C5.png);
}
[data-card][data-card=C6] {
  background-image: url(../cards/C6.png);
}
[data-card][data-card=C7] {
  background-image: url(../cards/C7.png);
}
[data-card][data-card=C8] {
  background-image: url(../cards/C8.png);
}
[data-card][data-card=C9] {
  background-image: url(../cards/C9.png);
}
[data-card][data-card=C10] {
  background-image: url(../cards/C10.png);
}
[data-card][data-card=C11] {
  background-image: url(../cards/C11.png);
}
[data-card][data-card=C12] {
  background-image: url(../cards/C12.png);
}
[data-card][data-card=C13] {
  background-image: url(../cards/C13.png);
}

/*# sourceMappingURL=style.css.map */