@charset "UTF-8";

body {align: center;}

.hdc {
	font-family: SimSun, Trattatello, fantasy;
	font-weight: bold;
	font-size: 250%;
	color: red;
}

.hda {
	font-family: Brush Script MT, Brush Script Std, cursive;
	font-stretch: extra-expanded;
	font-weight: bold;
	font-size: 250%;
	color: blue;
}


.msg {
  color: red;
}

.brown {
  color: brown;
}

.blue {
  color: blue;
}

.flip-container {
	perspective: 1000px;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(5400deg);
}

.flip-container, .front, .back {
	height: 200px;
	width:  150px;
}

.flipper {
	transition: 5s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
	transform: rotateY(360deg);
}

.front img {
  height: 200px;
  width:  150px;
}

.back {
	transform: rotateY(540deg);
}

.back img {
  height: 200px;
  width:  150px;
}

#navbar {
  overflow: hidden;
  background-color: #ccc;
  width: 550px;
}

#navbar a {
  float: left;
  display: #aaaaaa;
  color: #f2f2f2;
  text-align: center;
  padding: 2px 15px;
  text-decoration: none;
  font-size: 12px;
}

#navbar a:hover {
  background-color: #dff;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 409px;
}

.sticky + .content {
  padding-top: 60px;
}