/*@author: 17moonup
  https://google.github.io/styleguide/htmlcssguide.html
  https://cloud.tencent.com/developer/article/1835320
  https://blog.csdn.net/weixin_43883485/article/details/103504171
  https://alienzhou.github.io/fe-performance-journey/5-subresources/css.html#_4-%E8%A7%A3%E6%9E%90%E4%B8%8E%E6%B8%B2%E6%9F%93%E6%A0%91%E6%9E%84%E5%BB%BA
*/
		
html {
  background-color: #f4f4f2;
}

body {
  margin: 0 15vw;
  font-family: "Gentium Plus", serif;
  font-size: 10.5pt;
  font-style: normal;
  line-height: 1.5;
  background-color: #f4f4f2;
}

.title {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  font-family: "Baskervville SC", serif;
  font-size: 24pt; /*[x1] 29px 1.8em(12pt 16px 1em)*/
  line-height: 2;
  text-align: center;
  background-color: #F4F4F2;
}

a {
  color: #1a2619;
  text-decoration: none;}

					/*分割欄*/
.b-one {/*color design rule: weightful but not like black*/ 
  font-family: "Rock Salt", cursive;
  font-size: 1.5rem;
  font-variant: small-caps;
  text-align: center;
  text-shadow: 1px 1px green;
  line-height: 1.7;
  margin: 77px 10% 3% 10%;
  color: #F8F4E1;/*weightful but not like black*/
  background-color: #454545;
}

.b-two {
  font-family: "Gentium Plus", serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  margin: 3% 10% 1% 10%;
  color: #F8F4E1;
  background-color: #454545;/*#4F709C*/;
}

.b-three {
  font-family: "Indie Flower", cursive;
  font-size: 1.5rem;
  text-align: right;
  text-shadow: 1px 1px 1px purple;
  line-height: 1.7;
  margin: 1% 10%;
  color: #F8F4E1;
  background-color: #454545;/*#BBBFCA;*/
}	
					/*卡片樣式*/
.cards {
  margin: 0 10%;
  flex-wrap: wrap;
  text-align: center;
  padding: 0;
}

.card {
  display: inline-block;
  position: relative;
  width: 25rem;
  height: 30rem;
  margin: 3% 5%;
  transform-style: preserve-3d;
  transition-timing-function: ease-in-out;
  transition-duration: 0.57s;
  perspective: 800px;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  vertical-align: top;
  border-radius: 16px;
  cursor: default; /* just for knowledge, remeber to delete.*/
  overflow: hidden;/* adding the attribute at father positon;*/
  background-color: #cdc9c3;
  transform: translateZ(1px);
}

.front {
}

.back {
  opacity: 0.97;
  text-align: center;
  transform: rotateY(180deg) translateZ(0);
}

.flipped {
  transform: rotateX(7deg) rotateY(180deg);
}
					/*卡片內容樣式*/
.image {
  margin: 0 auto;
  flex: 1;
}

.image img {
  position: relative;
  height: 25rem;
  width: 100%;
  object-fit: cover;
  border-radius: 16px 16px 2px 2px;
}

.heading {
  margin: auto;
  color: black;
  font-variant: small-caps;
  font-size: 1.75rem;
  font-family: "Gloria Hallelujah", cursive;
  text-align: center;
}

.caption {
  margin: auto;
  font-size: 120%;
  font-family: "Gloria Hallelujah", cursive;
  overflow-wrap: break-word;
}

.details {
  margin: 7px auto;
  overflow-wrap: break-word;
}
					/* ABOUT & CONTACT */
table {
  display: flex;
  flex: 1;
  box-sizing: border-box;
  text-align: start;
  margin: 2% 10%;
  border-collapse: collapse;
}

tr,
th,
td {
  text-align: left;
  line-height: 2;
}

th {
  font-size: 1.5rem;
}

td {
  font-size: 1.2rem;
  }
					/* FOOTER */
.footer {
  margin: auto 10%;
  color: gray;
  border-top: 1px solid grey;
 }

.footer a {
  color: slategray;
  text-decoration: underline;
  }
					/* Fake Class */
a:hover {
  opacity: 0.8;
  }
/*
#rotate-me {
  float: right;
  width: 170px;
  height: 170px;
}
*/
					/* ID */
#book-bg {
  background-color: rgba(38, 36, 25, 0.8);
  }

#book-hd {
  color: rgb(29, 25, 38);
  }

/*
#book-img {
  border-bottom: 2px rgb(27, 38, 25);}
*/

#music-bg {
  background-color: rgba(129, 133, 129, 0.7);
  }

#music-hd {
  color: rgb(130, 134, 132);
  }

#film-bg {
  background-color: rgba(43, 48, 151, 0.7);
  }

#film-hd {
  color: rgb(43, 48, 151);
  }

@media (hover: hover) {
  td a:hover {
    color: limegreen;
    transition-duration: 1s;
    }
  }


		    /*iphone 15 Pro Max(6.7inch 2796 x 1290 ppi)*/
@media screen and (max-width: 1290px) {
  body {
  	margin: auto;
}
  .title {
	font-size: 1.5rem;
  	line-height: 1.7;
}

  .b-one {
  	margin: 50px 10% 3% 10%;
}

  .b-one, .b-two {
	line-height: 1.5;
	font-size: 1.2rem;
	background-color: darkslateblue;
}
  .b-three {
  	line-height: 2;
	font-size: 1rem;
	background-color: darkslateblue;
}
  .card {
	margin: 3% 5%;
	height: 23rem;
	width: 17rem;
}
  .image img {
  	height: 19rem;
	width: 17rem;
}
  .heading {
 	font-size: 1.3rem;
	line-height: 1.5;
}
  .caption {
  	margin: 1% auto;
	font-size: 0.8rem;
	line-height: 1;
}

  th {
  	font-size: 1.2rem;
}

  td {
  	font-size: 1rem;
  }

  .footer span {
  	display: block;
}
  
  .footer a, .footer{
	font-size: 0.8rem;
	text-align: center;
}
 }