:root {
  --debug-outline: 0px;
  --foreground-colour: rgb(255, 255, 255);
  --background-colour: rgb(48, 48, 48);
  --font-size: 16px;
  --font-family: monospace, sans-serif;
  --font-weight: 400;
  --scrollbar-slider: rgb(84, 93, 103);
  --scrollbar-gutter: transparent;
  --scrollbar-colour: var(--scrollbar-slider) var(--scrollbar-gutter);
  --pcm: 0.6;
  --pch: calc(150px * (var(--pcm)));
  --pcw: calc(108px * (var(--pcm)));
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  overflow: auto;
  background-color: var(--background-colour);
  color: var(--foreground-colour);
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  scrollbar-color: var(--scrollbar-slider) var(--scrollbar-gutter);
  box-shadow: inset 0 0 0 var(--debug-outline) var(--foreground-colour);
}

playing-card {
  user-select: none;
  display: inline-block;
  width: var(--pcw);
  height: var(--pch);
  box-sizing: border-box;
}

#center-pile playing-card {
  margin-left: -80px;
}

playing-card:hover {
  transform: translateY(-16px);
  box-shadow: 0px -4px 10px rgba(0, 128, 255, 1), 0px 4px 10px rgba(0, 128, 255, 1);
}

/* 
[flipped="true"] {
  filter: grayscale(1.0);
} */

#page {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

#deck {
  top: 50%;
  left: 50%;
  gap: 4px;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  position: absolute;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
}