body{
  background: radial-gradient(circle closest-side at center, navy, #d8bff9 60%,#C75080);
  height: 100vh;
   justify-content: center;
}




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

.card1 {
  display: flex;
  justify-content: space-between;
  min-width: 250px;
  max-width: 250px;
  height: 370px;
 background-image: url(https://smiller11.infprojects.fhsu.edu/project2/images/25_Learner.png);
 background-size: contain;
  border: 1px solid navy;
  padding: 5px;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px navy;
  border-radius: 10px;
}

.card2 {
  display: flex;
  justify-content: space-between;
  min-width: 250px;
  max-width: 250px;
  height: 370px;
 background-image: url(https://smiller11.infprojects.fhsu.edu/project2/images/15_Discipline.png);
 background-size: contain;
  border: 1px solid navy;
  padding: 5px;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px navy;
  border-radius: 10px;
}



.card3 {
  display: flex;
  justify-content: space-between;
  min-width: 250px;
  max-width: 250px;
  height: 370px;
 background-image: url(https://smiller11.infprojects.fhsu.edu/project2/images/26_Maximizer.png);
 background-size: contain;
  border: 1px solid navy;
  padding: 5px;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px navy;
  border-radius: 10px;
}


.card4 {
  display: flex;
  justify-content: space-between;
  min-width: 250px;
  max-width: 250px;
  height: 370px;
 background-image: url(https://smiller11.infprojects.fhsu.edu/project2/images/11_Consistency.png);
 background-size: contain;
  border: 1px solid navy;
  padding: 5px;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px navy;
  border-radius: 10px;
}


.card5 {
  display: flex;
  justify-content: space-between;
  min-width: 250px;
  max-width: 250px;
  height: 370px;
 background-image: url(https://smiller11.infprojects.fhsu.edu/project2/images/21_Includer.png);
 background-size: contain;
  border: 1px solid navy;
  padding: 5px;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px navy;
  border-radius: 10px;
}





.title {
text-align: center;
color: navy;
font-size: 40px;
font-family: georgia;
}

.title2 {
text-align: center;
color:#C75080;
font-family: georgia;
font-size: 35px;
}

.acontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.top5 {
  display: box;
  margin-top: 60px;
  min-width: 350px;
  max-width: 350px;
  height: 270px;
  font-size: 20px;
  border: 1px solid #d8bff9;
  background-color: #d8bff9;
  padding: 15px;
  box-shadow: 5px 3px 2px navy;
  border-radius: 20px;
  text-align:center;
  font-family: georgia;
}

.list {
  align:center;
  font-family: georgia;
  color: navy;
  font-size: 40px;
  text-align: center;
}


.bcontainer {
  display: flex;
  justify-content: center;
  width: 100%;
}


.explanations {
   display: box;
  margin-top: 60px;
  margin-bottom: 30px;
  min-width: 700px;
  max-width: 700px;
  height: 633px;
  font-size: 20px;
  border: 1px solid #d8bff9;
  background-color: #d8bff9;
  padding: 15px;
  box-shadow: 5px 3px 2px navy;
  border-radius: 20px;
  text-align:center;
  font-family: georgia;
}

.why {
  text-align:center;
  font-family: georgia;
  color: black;
  font-size: 20px;
}