body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Inria Sans", sans-serif;
}

.inria-sans-light {
  font-family: "Inria Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
}

#level-title {
  font-size: 1.5rem;
  color: #40916c;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, min-content);
  gap: 15px;
}

.btn {
  border: none;
  height: 100px;
  width: 100px;
  border-radius: 5px;
  background-color: #d8f3dc;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clickable {
  transition: background-color 0.3s ease;
}

.clickable:hover {
  background-color: #b7e4c7; /* Change color on hover (semi-transparent blue) */
  cursor: pointer;
}

.hide {
  visibility: hidden; /* Hide the main element, but allow pseudo-elements to appear */
  position: relative; /* Ensure the pseudo-element is positioned relative to this element */
  display: flex;
  justify-content: center;
  align-items: center;
}

.hide::after {
  visibility: visible; /* Make the ::after content visible */
  content: url(./cardIcon.svg);
  position: absolute; /* Optional: Positioning to control where the pseudo-element appears */
}

.bar {
  height: 10px;
  width: 26.9375px;
}
.fillBar {
  background-color: #8eaccd;
}

.matches,
.moves {
  font-size: 1.4rem;
}

.bar:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.bar:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.progressBar {
  display: grid;
  background-color: #d2e0fb;
  grid-template-columns: repeat(8, min-content);
  border-radius: 3px;
}

.stats {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid lightgray;
  margin-top: 30px;
  padding-top: 30px;
}

.container {
  border: 1px solid lightgray;
  border-radius: 4px;
}

.container p {
  padding-left: 15px;
}

/* themeSection */
.themeSection{
  margin: 20px 0;
}

input {
  appearance: none;
  background-color: #FAFBFC;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: #24292E;
  cursor: pointer;
  font-family: "Inria Sans", sans-serif;
  line-height: 20px;
  padding: 4px 10px;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
}

input:hover{
  background-color: #d8f3dc;
}

select{
  padding:4px 2px;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 4px;
}

/*button restart*/
#restart{
  margin: 20px 0;
}