.bar {
  display: flex;
  justify-content: space-between;
  background-color: #172122;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 2px 1px 0px #000000;
}

.headerLeft {
  display: flex;
  flex-direction: column;
}

.logoEmoji {
  font-size: 60%;
}

.profileNameSeparator {
  display: none;
}

@media (min-width: 480px) {
  .headerLeft {
    display: block;
  }

  .profileNameSeparator {
    display: inline;
  }
}

.sub {
  color: #bbbbbb;
}

.profileNameSeparator {
  color: #999999;
}

.logo {
  font-weight: 500;
}

/* .header, .grid {
  font-family: "Bitcount", system-ui;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
} */

@font-face {
  font-family: 'Balatro';
  src: url('balatro.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: 'Balatro', Helvetica, Arial, sans-serif;
}

#profileName {
  font-weight: 400;
}

body {
  background-color: #1d2f33;
  color: white;
  margin: 0;
}

.logo a {
  text-decoration: none;
  color: white;
}

.bodyContainer {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  min-height: 90vh;
  max-width: 640px;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .bodyContainer {
    padding: 1vw 2vw;
  }
}

#content {
  flex: 1;
  text-transform: capitalize;
}

.cardCard img {
  width: 100%;
}

.stats {
  text-align: center;
  width: 90%;
  font-size: 125%;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: calc(min(9.6px, 1.5vw));
  grid-row-gap: calc(min(9.6px, 1.5vw));
  margin: auto;
}

@media (min-width: 360px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 480px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 2vh;
  }
}

.cardCard {
  display: grid;
  grid-row-gap: calc(min(6.4px, 1vw));
  grid-template-columns: 1fr;
  padding: calc(min(9.6px, 1.5vw));
  border-radius: 10px;
  background-color: #172122;
  box-shadow: 0px 2px 1px 0px #000000;
}
/* 
.cardCard:nth-child(5n+1) {
  transform: rotate(-6deg) translate(0, 15px);
}

.cardCard:nth-child(5n+2) {
  transform: rotate(-3deg) translate(0, 5px);
}

.cardCard:nth-child(5n+4) {
  transform: rotate(3deg) translate(0, 5px);
}

.cardCard:nth-child(5n) {
  transform: rotate(6deg) translate(0, 15px);
} */

.card {
  background: url('/balatrocards.png') 0%
    0% / 700% 500%;
  width: 100%;
  height: 0;
  padding-bottom: 133.8%; /* 95/71 */
}

.deckPercent {
  font-weight: 700;
}

.deckWins,
.deckRatio {
  font-size: 80%;
  color: #eeeeee;
}

.stats {
  border-radius: 5px;
  padding: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@keyframes shimmer {
  100% {
    mask-position: left;
  }
}

.stats.centered {
  justify-content: center;
}

.deckPercent {
  padding: 0 2px;
}

.fileLocation, .keyboardShortcut {
  color: white;
}

.profileLocationGuide a {
  color: white;
  text-decoration: none;
}

.rank-bronze {
  background-image: linear-gradient(to right top, #693d11, #996d41);
}

.rank-silver {
  background-image: linear-gradient(to right top, #6d6f6e, #9d9f9e);
}

.rank-gold {
  background-image: linear-gradient(to right top, #9a7801, #caa824);
}

.rank-diamond {
  background-image: linear-gradient(to right top, #376edb, #679eff);
  background-color: #477eeb;
}

.rank-unplayed {
  /* background-color: #555555; */
}

.settings {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 10px;
}

.settingsBar {
  margin-bottom: 10px;
}

fieldset {
  margin-top: 10px;
}

@media (min-width: 480px) {
  .settings {
    flex-direction: row;
    padding: 0 10px;
  }

  fieldset {
    margin-top: 0;
    min-height: 60px;
  }
}

.rankTableBadge {
  color: white;
  border-radius: 5px;
  padding: 3px 5px;
}

.rankExplain {
  padding: 0 5px;
}

.rankTableBadge {
  margin-bottom: 5px;
}

.rankExplain:not(:last-child) {
  margin-bottom: 10px;
}

.rankThresholdNumber {
  color: white;
}

.creditsBar {
  margin-top: 10px;
}

.credits, .rankExplanation {
  padding: 10px;
}

.rankExplanation, .credits {
  line-height: 1.25;
}

.credits a {
  color: white;
  text-decoration: none;
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

.contributor {
  color: white;
}