h1{
	text-align:center;
	font-size:30px;
	color:#D3B88C;
	font-family:Perpetua;
}
body{
	color:#1C2833;
	font-family:Perpetua;
	background-color:#9EBC9F;

	
    
}
.topnav {
  background-color:#9EBC9F;
  overflow: hidden;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 18px;
  text-decoration: none;
  font-size: 30px;
}
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.topnav a.active {
  background-color:#ddd;
  color:#DAA06D;
}
.topnav .icon {
  display: none;
}
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
 
  
}
.header a {
  float: left;
  color: #D3B88C;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 25px;
  line-height: 25px;
  border-radius: 4px;
}
.header a.logo {
  font-size: 40px;
  font-weight: bold;
}
.header a:hover {
  background-color: #ddd;
  color: black;
}
header a.active {
  background-color: white;
  color: white;
}
.header-right {
  float: right;
}
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}
.flip-box {
  background-color: transparent;
  width: 481px;
  height: 300px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

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

.flip-box-front {
  background-color: #f1f1f1 ;
  color: black;
  display: flex;
    justify-content: center;
    align-items: center;
}

.flip-box-back {
  background-color:#ddd;
  color: white;
  transform: rotateY(180deg);
  display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
	font-size:60px;
	font-family:Perpetua;
	color:#9EBC9F;
	background:#f2f2f2;
	font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
a{
text-decoration:none;
}
a:link {
  color: #D3B88C;
  background-color: transparent;
  text-decoration: none;
}
hr.mystyle {
  clear: both;
  }
.text-box {
    position: absolute;  
    z-index: 2;
    color: white; 
    background-color: #9EBC9F; 
    padding: 5px;
    border-radius: 5px;
}