/* resets */
* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  padding-bottom: var(--footer-height);
  position: relative;
}

/* variables */
:root {
  --color-text-0: #222;
  --color-text-1: #555;
  --color-border: #ddd;
  --color-hover: #eee;
  --color-bg: #fff;
  --color-main: #1a73e8;
  --color-main-darker: #0e69df;
  --color-good: lightgreen;
  --color-bad: lightsalmon;
  --footer-height: 3rem;
}

/* global classes */
.relative {
  position: relative;
}
.p-1 {
  padding: 1rem;
}
.box-1 {
  border-radius: 1rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.75rem;
  margin: 0.5rem;
}

/* header */
header {
  text-align: center;
  padding: 0 1rem;
  overflow: hidden;
}
header h1 {
  margin-bottom: 0;
  color: var(--color-text-0);
}
header p {
  margin-top: 0.5rem;
  color: var(--color-text-1);
}

/* main */
main {
  text-align: center;
  overflow: hidden;
}

/* barrier */
#barrier {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.displayNone {
  display: none;
}

/* cardTable */
#cardTable {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}
.card {
  padding: 0.4rem;
  color: var(--color-text-1);
  border-radius: 1rem;
}
.card:hover {
  cursor: pointer;
  background-color: #ebebeb;
}
.card:active{
  background-color: #dcdcdc;
}
.fliped {
  background-color: var(--color-bad) !important;
}
.found {
  background-color: var(--color-good) !important;
}

/* btnAiHelp */
#aiHelp {
  background-color: var(--color-main);
  color: var(--color-bg);
  border: none;
  padding: 0.5rem 2rem;
  border-radius: 0.5rem;
  display: block;
  margin: 0 auto 1rem;
}
#aiHelp:focus {
  outline: none;
}
#aiHelp:hover {
  background-color: var(--color-main-darker);
  /* background-color: var(--color-hover); */
  cursor: pointer;
}
#aiHelp:active {
  background-color: var(--color-border);
}

/* instructionsTable */
#instructionsTable {
  margin: auto;
}
#instructionsTable tr td:nth-child(2) {
  text-align: left;
}
#instructionsTable tbody tr {
  color: var(--color-text-0);
}
#instructionsTable > tr {
  color: var(--color-text-1);
}

/* successPercentage */
#jsSuccessPercentage {
  padding: 0.5rem;
  width: 3.7rem;
  display: inline-block;
  color: var(--color-bg);
  border-radius: 1rem;
  background-color: var(--color-main);
}

/* footer */
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  height: var(--footer-height);
  background-color: var(--color-hover);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-1);
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive design */
/* Mobile */
[class*="col-"] {
  width: 100%;
  /* border: 1px solid #000; */
}

/* Desktop */
@media only screen and (min-width: 800px) {
  .box-1 {
    padding: 0.75rem;
    margin: 1rem;
  }
  header p {
    margin-top: 1rem;
  }
  #cardTable {
    gap: 0.2rem;
  }

  [class*="col-"] {
    float: left;
  }
    
  .col-d-1 {
    width: 8.33%;
  }
  .col-d-2 {
    width: 16.66%;
  }
  .col-d-3 {
    width: 25%;
  }
  .col-d-4 {
    width: 33.33%;
  }
  .col-d-5 {
    width: 41.66%;
  }
  .col-d-6 {
    width: 50%;
  }
  .col-d-7 {
    width: 58.33%;
  }
  .col-d-8 {
    width: 66.66%;
  }
  .col-d-9 {
    width: 75%;
  }
  .col-d-10 {
    width: 83.33%;
  }
  .col-d-11 {
    width: 91.66%;
  }
  .col-d-12 {
    width: 100%;
  }
}