body{
  font-size:2rem;
  display:flex;
  flex-direction: column;
  
}
main{
  flex-grow:1;
  display:flex;
  justify-content: center;
  position:relative;
}
.table{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  align-content: center;
  max-width: 50rem;
  margin:auto;
}

.card{
  
  width: 6rem;
  height:6rem;
  margin: 0.5rem;
  border-radius: 0.3rem;
  background-image: var(--gradient);
  box-shadow:1px 1px 3px rgba(0,0,0,0.25),4px 4px 10px rgba(0,0,0,0.2);
  position: relative;
  transition:0.3s;
  cursor:pointer;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  
}
.card_content{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  transform:  rotateY(-180deg);
  backface-visibility: hidden;
  background-color: white;
  box-shadow:1px 1px 3px rgba(0,0,0,0.25),4px 4px 10px rgba(0,0,0,0.2);
  border-radius: 0.3rem;
  display:flex;
  justify-content: center;
  align-items:center;
  font-size:2.5rem;
  padding-top:0.4rem;
}

.card_content::selection{
  background:transparent;
  
}
.card.discovered{
  transform:rotateY(-180deg);
}

.successful{
    opacity: 0;
}

:root{
    --bg:#fafafa
    --font: "Archivo", sans-serif;
    --font-display: "Archivo Narrow", sans-serif;
    --hot-pink:#e94057;
    --orange:#f27121;
    --gradient: linear-gradient(35deg, var(--orange), var(--hot-pink));
  }
  body{
    margin:auto;
    min-height: 100vh;
    background: var(--bg);
    font-family: var(--font);
  }