#tarot-container {
  position: relative;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  height: 280px;
  /* Adjust the height based on your preference */
  overflow-x: auto;
  /* Add horizontal scrolling if needed */
  margin-right: 2px;
  /* Adjust the margin between cards in the tarot-container */
}

#selected-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 280px;
  /* Adjust the height based on your preference */
  overflow-x: auto;
  /* Add horizontal scrolling if needed */
  margin-top: 20px;
  margin-right: 5px;
  /* Adjust the margin between cards in the tarot-container */
}

.tarot-card {
  width: 150px;
  /* Adjust the width based on your preference */
  height: 250px;
  /* Adjust the height based on your preference */
  cursor: pointer;
  position: relative;
  transition: left 0.5s;
  overflow: hidden;
  /* Ensure that the image does not overflow the div */
  margin-right: 2px;
  /* Adjust the margin between cards in the tarot-container */
}

.tarot-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Adjust to 'contain' or 'fill' based on your preference */
  margin-right: 5px;
  /* Adjust the margin between cards in the tarot-container */
}

.selected {
  border: 2px solid deeppink;
  /* Highlight selected cards with a border */
  margin-right: 5px;
  /* Adjust the margin between cards in the tarot-container */
}

.vertical-flip {
  transform: scaleY(-1);
  width: 150px;
}

#tarot-container-1 {
  position: relative;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  height: 280px;
  /* Adjust the height based on your preference */
  overflow-x: auto;
  /* Add horizontal scrolling if needed */
  margin-right: 5px;
  /* Adjust the margin between cards in the tarot-container */
}

#tarot-container-2 {
  position: relative;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  height: 280px;
  /* Adjust the height based on your preference */
  overflow-x: auto;
  /* Add horizontal scrolling if needed */
  margin-right: 5px;
  /* Adjust the margin between cards in the tarot-container */
}

#tarot-container-3 {
  position: relative;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  height: 280px;
  /* Adjust the height based on your preference */
  overflow-x: auto;
  /* Add horizontal scrolling if needed */
  margin-right: 5px;
  /* Adjust the margin between cards in the tarot-container */
}

.resultHeading {
  color: green;
  font-weight: 600;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  /* Allows the radio buttons to wrap to the next line if needed */
  gap: 10px;
  /* Adjust the gap between radio button groups */
  margin-top: 5px;
  /* Spacing between the label and the radio buttons */
}

.radio-item {
  display: flex;
  align-items: center;
}

.radio-item input[type="radio"] {
  margin-right: 2px;
  /* Space between the radio button and the label */
  vertical-align: text-top;
  /* Ensures the radio button aligns with the middle of the label text */
}

@media only screen and (min-width: 978px) {
  .CardName {
    min-height: 80px;
    min-width: 80px;
  }
}

@media only screen and (max-width: 480px) {
  .cards-name {
    float: left;
    width: 100%;
  }
}

.prediction-cards {
  padding: 20px;
  box-shadow: 7px -7px 28px #e5e5e5;
  margin: 0 auto;
}