.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  object-fit: cover;
  position: relative;
  margin-top: 100px;
}

.container i {
  scale: 0.7;
}

.container .nav_btn {
  color: #dbff00;
  display: inline-block;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck {
  height: 350px;
  width: 250px;
  margin-left: 50px;
  position: relative;
}

.card {
  width: 250px;
  height: 300px;
  padding: 1rem;
  border: 1px solid black;
  background-color: white;
  border-radius: 5px;
  display: grid;
  align-content: center;
  justify-items: center;
  position: absolute;
  transition: transform 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.card button {
  padding: 0.25rem 1rem;
}

.card1 {
  /* transform: rotate(-10deg); */
  z-index: 1;
}

.card2 {
  transform: rotate(-10deg) translateX(-50px) translateY(-10px);
  z-index: 2;
}

.card3 {
  transform: rotate(-25deg) translateX(-40px) translateY(-20px);
  z-index: 3;
}

.card4 {
  z-index: 4;
}

.slide_forward {
  animation: slide-forward 2s 1 ease-in-out;
}
.slide_backward {
  animation: slide-backward 2s 1 ease-in-out;
}

@keyframes slide-forward {
  0% {
    z-index: 4;
  }
  50% {
    transform: translateX(400px) rotate(10deg);
    z-index: 4;
  }
  80% {
    z-index: 0;
  }
  100% {
    transform: translateX(0) rotate(0);
    z-index: 0;
  }
}

@keyframes slide-backward {
  0% {
    z-index: 0;
  }
  50% {
    transform: translateX(-400px) rotate(-10deg);
  }
  80% {
    z-index: 5;
  }
  100% {
    transform: translateX(0) rotate(0);
    z-index: 5;
  }
}

@media (max-width: 500px) {
  .deck {
    margin-left: 0;
    scale: 0.8;
  }

  .nav_btn {
    z-index: 10;
  }
}

/* Theme - INTERAKTO */
.default .nav_btn {
  background-color: #dbffeb;
}

.default .card button {
  background-color: #00634b;
}

/* Theme - INTERAKTO */
.interakto .nav_btn {
  background-color: #dbffeb;
}

.interakto .card button {
  background-color: #00634b;
}

/* Theme - INTERAKTO */
.teenybeans .nav_btn {
  background-color: #163c14;
}

.teenybeans .card button {
  background-color: #434701;
}

.btn {
  position: absolute;
  bottom: 10px;
}
