body {
  background-color: red;
}
.cards {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
}

.card {
  width: 250px;
  height: 350px;
  perspective: 800px;
  border-style: none;
}

.card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

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

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align: center;
}

.card-front {
  background-color: #e9e9e9;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-back {
  background-color: #333;
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* footer */
a {
  font-size: 1.15rem;
}
header,
footer {
  border-top: 2px solid #3498db;
  background-color: #0b3c7a;
  color: white;
  text-align: center;
  padding: 1.25rem;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
#ttechLink {
  color: white;
}
@media screen and (max-width: 820px) {
  .cards {
    justify-content: center;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
} /* Nav */
nav {
  display: flex; /* 1 */
  justify-content: space-between; /* 2 */
  padding: 1rem 2rem; /* 3 */
  background: #0b3c7a; /* 4 */
}
nav ul {
  display: flex; /* 5 */
  list-style: none; /* 6 */
}
nav li {
  padding-left: 1rem; /* 7! */
}
nav a {
  text-decoration: none;
  color: #fff;
}
nav h2 {
  color: #fff;
}
/* bwah */