@import "https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/5.0.0/sanitize.min.css";

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
  font-family: 'Raleway', Arial, sans-serif;
  height: 100vh;
  padding: 5%;
}

a {
  text-decoration: none;
  color: tomato;
}
a:visited {
  color: tomato;
}

p {
  align-self: flex-end;
}

.board {
  display: grid;
    grid-template: none / repeat(4, 1fr);
  height: 100%;
  max-width: 800px;
  width: 100%;
}

.complete, .start {
  display: none;
}

.visible {
  background-color: rgba(255, 255, 255, 0.8);
  border: 3px solid tomato;
  border-radius: 30px;
  display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
  height: 40%;
  position: absolute;
  text-align: center;
  transition: all .4s ease-in-out;
  width: 40%;
  z-index: 10;
}

button {
  background-color: tomato;
  border: none;
  border-radius: 5%;
  cursor: pointer;
  color: white;
  max-width: 50%;
  padding: 1em;
  transition: background .4s;
}
button:hover {
  background-color: #e84022;
}
button.invisible {
  display: none;
}

.card {
  align-self:center;
  background-color: lightGreen;
  border-radius: 10%;
  cursor: pointer;
  display: flex;
    align-items: center;
    justify-content: center;
  height: 75%;
  justify-self: center;
  text-align: center;
  transform: rotateY(-180deg);
  transition: transform .4s ease-in-out;
  width: 75%;
}

.clicked {
  pointer-events: none;
  background-size: cover;
  background-position: center;
}

.animation {
  transform: rotateY(0deg);
}

.pointerNone {
  pointer-events: none;
}

[data-number="0"].clicked {
  background-image: url('../images/beach.jpg');
}
[data-number="1"].clicked {
  background-image: url('../images/bee.jpg');
}
[data-number="2"].clicked {
  background-image: url('../images/christmas.jpg');
}
[data-number="3"].clicked {
  background-image: url('../images/frog.jpg');
}
[data-number="4"].clicked {
  background-image: url('../images/dino.jpg');
}
[data-number="5"].clicked {
  background-image: url('../images/disney.jpg');
}
[data-number="6"].clicked {
  background-image: url('../images/ewok.jpg');
}
[data-number="7"].clicked {
  background-image: url('../images/link.jpg');
}
[data-number="8"].clicked {
  background-image: url('../images/monsters.jpg');
}
[data-number="9"].clicked {
  background-image: url('../images/obi-wan.jpg');
}
[data-number="10"].clicked {
  background-image: url('../images/raindeer.jpg');
}
[data-number="11"].clicked {
  background-image: url('../images/up.jpg');
}