body
{
font-family: Times New Roman;
padding: 20px;
background: #F5B7B1
}

.topnav
{
overflow: hidden;
background-color: #333;
}

.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover
{
background-color: #ddd;
color: black;
}

.topnav a.active
{
background-color: #FA8072;
color: white;
}

.header
{
padding: 20px;
font-size: 40px;
text-align: center;
background: white;
}

.leftcolumn
{
float: left;
width: 25%
}

.rightcolumn
{
float: right;
width: 75%
}

.card
{
background-color: white;
padding: 20px;
margin-top: 20px;
}

.flip-card 
{
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner 
{
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

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


.flip-card-back 
{
  background-color: #FA8072;
  color: white;
  transform: rotateY(180deg);
}

@media screen and (max-width: 800px)
{
.leftcolumn, .rightcolumn
{
width: 100%
padding: 0;
}
}