:root {
  --background-color: #f3f3f3;
  --text-color: black;
  --greencard-background-color: rgb(81, 231, 81);
  --greencard-text-color: black;
  --redcard-background-color: rgb(202, 39, 39);
  --redcard-text-color: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: black;
    --text-color:white;
    --grad1-color: rgb(255, 119, 119);
    --grad2-color: rgb(140, 101, 255);
    --greencard-background-color: rgb(33, 127, 33);
    --greencard-text-color: white;
    --redcard-background-color: rgb(240, 110, 110);
    --redcard-text-color: black;
  }
}

body {
  background-color: var(--background-color);
  text-align: center;
  color: var(--text-color);
  font-size: 2rem;
  font-family: sans-serif;
}

.container {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 800px;
}

.card-wrapper {
  display: flex;
  align-items: center;
  width: 300px;
  gap: 35px;
  overflow-x:scroll;
  scroll-snap-type: x mandatory;
}

.card {
  scroll-snap-align: center;
  box-sizing: border-box;
  padding: 50px 10px;
  flex-shrink: 0;
  width: 300px;
  height: 400px;
  border-radius: 30px;
  text-align: center;
}

#greencard {
  background-color: var(--greencard-background-color);
  color: var(--greencard-text-color);
}

#redcard {
  background-color: var(--redcard-background-color);
  color: var(--redcard-text-color);
}