body {
  background-color: darkgreen
}
.title-block {
  background-color: darkred;
  width: 100vw;
  height: 50px;
  border-radius: 5px;
}
h1 {
  display: flex;
  flex-wrap: flex;
  justify-content: center;
  font-family: dharma gothic e;
  color: white; 
  align-items: flex-start;
  transform: translatey(-15px)

}


#playing-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px

}

.card {
  display: flex;
  justify-content: space-between;
  background: whitesmoke;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  border-radius: 10px;
  padding-top: 10px;
  margin: 20px;
  box-shadow: 5px 5px 10px black;
}

.left {
  align-self: flex-start;
}

.middle {
  display: flex;
  align-self: center;
  flex-direction: column;
}

.right {
  display: flex;
  align-self: flex-end
}

.card1type {
  display: inline-block;
  font-size: 1.5rem;
  color: red;
}

.card1logo {
  display: flex;
  align-self: center;
  font-size: 5rem;
  padding: 0;
  color: red
}

.card1type2 {
  display: inline-block;
  transform: scaley(-1);
  font-size: 1.5rem;
  color: red;
}

.card2type {
  display: inline-block;
  font-size: 1.5rem;
  color: black;
}

.card2logo {
  display: flex;
  align-self: center;
  font-size: 5rem;
  padding: 0;
  color: black
}

.card2type2 {
  display: inline-block;
  transform: scaley(-1);
  font-size: 1.5rem;
  color: black;
}

.card3type {
  display: inline-block;
  font-size: 1.5rem;
  color: black;
}

.card3logo {
  display: flex;
  align-self: center;
  font-size: 5rem;
  padding: 0;
  color: black
}

.card3type2 {
  display: inline-block;
  transform: scaley(-1);
  font-size: 1.5rem;
  color: black;
}

.card4type {
  display: inline-block;
  font-size: 1.5rem;
  color: red;
}

.card4logo {
  display: flex;
  align-self: center;
  font-size: 5rem;
  padding: 0;
  color: red
}

.card4type2 {
  display: inline-block;
  transform: scaley(-1);
  font-size: 1.5rem;
  color: red;
}

.card5type {
  display: inline-block;
  font-size: 1.5rem;
  color: red;
}

.card4logo {
  display: flex;
  align-self: center;
  font-size: 5rem;
  padding: 0;
  color: red
}

.card5type2 {
  display: inline-block;
  transform: scaley(-1);
  font-size: 1.5rem;
  color: red;
}

img {
  display: flex;
  max-width: 100%;
  align-self: center

}