.title{
  background: #27a567;
  text-align: center;
  color: #222021;
}

#playing-cards{
  display:flex;
  flex-wrap: wrap;
  flex-direction:row;
  Justify-content: center;
  gap: 20px;
  background: lightgray;
  border: 1px solid gray;
  border-radius: 10px;
}

.card{
  display: flex;
  justify-content: space-between;
  height: 300px;
  max-width: 200px;
  width: 100%;
  border: 20px solid green;
  border-radius: 10px;
  justify-content: center;
}


.green{
  border: 2px solid green;
}

.orange{
  border: 2px solid orange;
}

.purple{
  border: 2px solid purple;
}

h2{
  text-align: center;
  text-weight: bold;
}

#reflection{
  font-family: sans-serif;
  font-type: Open-sans, Gallup Sans;
  border: 2px solid grey;
  border-radius: 10px;
  color: rbga(123,178,116,1.0);
  margin: 20px auto
}

p{
  padding: 10px;
}

.why{
  background-color: #27a567;
  color: #222021;
}

.card
img{
  width: 100%;
  height: auto;
  max-width: 200px;
  object-fit: contain;
  border-radius: 10px
}