body {
  background-color: #705331;

  color: #ffffff;
  font-size:18px;
  margin: 0 auto;
  width: 100%;
  margin-top:5px;
  margin-bottom:5px;
  overflow: hidden;
  
  
  
  display: flex;
  justify-content: center;
  
  background-image: url('/shrine/hj/main_bg.jpg');
background-size: 100%;
}

nav {
  
  
  width: 100px;
  border-radius: 5px;
  text-align: center;
  max-width: 900px;
  display: inline-block;
  vertical-align: top;
  
  border-style: ridge;
  border-color:#2d1306;
  border-width:3px;
  }
  
aside {

  width: 100px;
  border-radius: 5px;
  text-align: center;
  max-width: 900px;
  display: inline-block;
  vertical-align: top;
  
  border-style: ridge;
  border-color:#2d1306;
  border-width:3px;
  
  }

main {
  
  
  margin: 0px auto;
  width: 900px;
  margin-top:5px;
  margin-bottom:5px;
  overflow: hidden;
  
  border-style: ridge;
  border-color:#2d1306;
  border-width:3px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  
}


header {
margin: 10px auto;
width:97.5%;
height:100px;
border-radius: 5px;
text-align:center;
  
}

/* book section */

.card-container{
  position: relative;
  outline: 6px dotted orange;
  display: grid;
  padding:50px 0px 50px 0px;
  
}

.card {
  background-color: #705331;
width: 400px;
height: 500px;
margin-left: 50%;
perspective: 1000px;
cursor: pointer;
transition: transform 1s;
transform-style: preserve-3d;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);

position: relative;
grid-row: 1;
grid-column: 1;


}

.card.flipped {
transform: rotateY( 180deg );
margin-left:5.5%;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);

}

.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
padding: 25px;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}

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