body
{
font-size:18px;
font-family:Kaiti;
}

.row 
{
display: flex;
height: 100%;
font-family:Kaiti;
}

.left 
{
flex: 20%;
padding: 15px 0;
}

.left h2 
{
padding-left: 15px;
}

.right 
{
flex: 80%;
padding: 15px;
}

#mySearch 
{
font-family:Kaiti;
width: 280px;
font-size: 18px;
padding: 15px;
border: 1px solid #ddd;
}

#myMenu 
{
list-style-type: none;
padding: 0;
margin: 0;
}

#myMenu li a
{
padding: 15px;
text-decoration: none;
color: black;
display: block;
}

#myMenu li a:hover
{
background-color: #EEE;
}


.flip-card 
{
background-color: transparent;
width: 450px;
height: 150px;
border: 1px solid #f1f1f1;
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-front 
{
background-color: #bbb;
color: black;
}

.flip-card-back 
{
background-color: RGB(123, 139, 111);
color: white;
transform: rotateY(180deg);
}