body{
    background-color:#f0aadb;
}
nav{
    background-color:#e879c8;
    margin:5px;
}

/*.row{
    
    min-height:400px;
    background-color:#f0aadb;
}*/


table {
border-collapse: collapse;
border-color: white;
width: 50%;
margin: 20px auto; /* Center the table */
}

th, td {
border: 1px solid black;
border-color: white;
padding: 8px;
text-align: left;
color: white;
}

.container {
  display: flex;
  justify-content: center; /* Center cards horizontally */
  flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
}

.card-container {
    margin: 15px;
    text-align: center;
}

.card-header {
    color: #ff00ff; /* Fluorescent pink */
}

.card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect  
 */
  margin: 15px; /* Add space between cards */
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d; /* Remove this if you don't want the 3D effect */
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;  
 /* Safari */
  backface-visibility: hidden;
}

.card-front {
  background-color: #bbb;
  color: black;
}

.card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);  

}

@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Stack cards vertically on mobile */
    align-items: center; /* Center cards horizontally on mobile */
  }
}

h5{
    text-align:center;
    font-size:40px;
    margin:30px;
}

h6{
    font-size:29px;
    margin:25px;
}

h7{
    font-size:30px;
    margin:40px;
}

h8{
    font-size:30px;
    margin:40px;
    
    
}

footer {
    background-color:#e879c8;
    text-align:center;
    color:white; 
}