@font-face {
  font-family: stone;
  src: url(atm.ttf);
}

h1, h3{
  font-family: stone;
/* text-align: center; */
color: #0f0f19;
font-weight:900;
}

main{
  background: linear-gradient(rgb(164, 134, 44) , rgba(0, 0, 0, 0.1)) ,url(./dev.jpg);
  height: 100vh;
  background-position: center;
  background-size: cover;
  padding: 20px;
}

.card {
    perspective: 1000px;
}

.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;

  display: flex;

  width: 100%;
  height: 100%;

  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  cursor: pointer;
  border-radius: 8px;
}

  .card--flipped {
    transform: rotateY(180deg);
  }

  .card__inner {
    transition: transform .25s ease-in-out;
  
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
  }

  /* .card, */
  .card__inner {
    height: 80px;

    cursor: pointer;
    border-radius: 8px;
    box-shadow: 1px 1px 3px 1px rgba(85, 85, 85, 0.137);
    margin: 20%;
    background-color:#343430;
    text-align: center;
    font-size: 50px;
    color: #efe4fa;
  }

  .card__back {
    transform: rotateY(180deg);
    font-size: 1px;
  }

  .btn-div h1{
    color: #555;
  }
  .btn-div .selected{color: #fff;}
  p{opacity: 0}