:root {
  --main-color: #9acabe;
  --light-green: #93c6b9;
  --orange: orange;
  --gold: gold;
  --text: #333333;
  --light-grey: #eeeeee;
  --dark-grey: #666666;
  --ultra-dark-grey: #333333;
}


* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

input:focus {
  outline: none;
}

ul, li{
  padding: 0;
  margin: 0;
  list-style: none;
}

.relative {
  position: relative;
}

.pos-center {
  display: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.inline-block {
  display: inline-block;
}

.block {
  display: block;
}

.title {
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  margin: 0;
}

.bold {
  font-weight: bold;
}

.mg-center {
  display: block;
  margin: 0 auto;
}

.bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 10px;
}

.text-link {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: var( --main-color );
  transition: all .3s ease-in-out;
}

.text-link:after {
  content: '';
  position: absolute;
  top: calc( 100% - 1px );
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var( --main-color );
  transition: all .3s ease-in-out;
}

.text-link:hover:after {
  width: 100%;
}

nav a.text-link:hover{
  color: var( --main-color );
}

.arrow-right {
  display: inline-block;
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  
  border-left: 8px solid var( --text );
}

@media only screen and (max-width: 476px) {
  
  .m-flex, .m-flex-none, .m-flex-text, .m-flex-dir-column {
    display: flex;
  }

  .m-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .m-flex-right-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .m-flex > * {
    flex: 1;
  }

  .m-flex-none > * {
    flex: none;
  }

  .m-flex-text > * {
    flex: 1 1 auto;
  }
  
  .m-flex-1 {
    flex: 1;
  }
  
  .m-flex-2 {
    flex: 2;
  }
  
  .m-flex-3 {
    flex: 3;
  }
  
  .m-flex-4 {
    flex: 4;
  }
  
  .m-flex-5 {
    flex: 5;
  }
  
  .m-flex-8 {
    flex: 8;
  }

  .m-flex > .right, .m-flex-none > .right, .m-flex-text > .right {
    margin-left: auto;
  }
   
  .m-flex-dir-column {
    flex-direction: column;
  }
    
  .m-flex-dir-row {
    flex-direction: row;
  }
  
  .m-order-1 {
    order: 1;
  }
  
  .m-order-2 {
    order: 2;
  }
  
  .m-order-3 {
    order: 3;
  }
  
  .m-flex-1 {
    flex: 1;
  }
  
  .m-flex-2 {
    flex: 2;
  }
  
  .m-flex-3 {
    flex: 3;
  }
  
  .m-flex-4 {
    flex: 4;
  }
  
  .m-flex-5 {
    flex: 5;
  }
}


@media only screen and (min-width: 476px) {
  
  .d-flex, .d-flex-none, .d-flex-text, .d-flex-dir-column, .d-flex-dir-row {
    display: flex;
  }

  .d-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .d-flex-right-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .d-flex > * {
    flex: 1;
  }

  .d-flex-none > * {
    flex: none;
  }

  .d-flex-text > * {
    flex: 1 1 auto;
  }

  .d-flex > .right, .d-flex-none > .right, .d-flex-text > .right {
    margin-left: auto;
  }
   
  .d-flex-dir-column {
    flex-direction: column;
  }
  
  .d-flex-dir-row {
    flex-direction: row;
  }
  
  .d-order-1 {
    order: 1;
  }
  
  .d-order-2 {
    order: 2;
  }
  
  .d-order-3 {
    order: 3;
  }
  
  .d-flex-1 {
    flex: 1;
  }
  
  .d-flex-2 {
    flex: 2;
  }
  
  .d-flex-3 {
    flex: 3;
  }
  
  .d-flex-4 {
    flex: 4;
  }
  
  .d-flex-5 {
    flex: 5;
  }
  
  .d-flex-8 {
    flex: 8;
  }
}





.banner {
  background-image: url( http://ws2019.taipaweb.com/css-final-project/slider-1.jpg );
  height: 300px;
  padding: 30px 0;
}

.banner .container{
  height: 100%;
  width: 100%;
}

.banner .welcome-bar {
  margin: 0;
  padding: 10px 16px;
  background-color: var( --main-color );
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .16);
}




.books {
  display: grid;
  grid-row-gap: 40px;
  padding-bottom: 40px;
  grid-template-columns: repeat( auto-fit, minmax(170px, 1fr));
}

.books .title {
  grid-column: 1 / -1;
  margin: 40px 0 0 0;
}

.books .book-img {
  position: relative;
  perspective: 1000px;
/*   perspective-origin: -100% -100%; */
}

.books .book-img .book-container {
  perspective: 1000px;
  transform-origin: 100% 50%;
  transition: .3s all ease-in-out;
}

.books .book-img:hover .book-container {
  transform: rotateY( -20deg );
}

.books .book-img .book-back{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 131.422px;
  height: 200px;
  transform: translate(-50%, -50%);
  background-image: url( http://ws2019.taipaweb.com/css-final-project/ricepaper_v3.png);
  z-index: -1;
  padding: 10px;
  transform-origin: 0% 50%;
  transition: .3s all ease-in-out;
}

.books .book-img .book-back .price {
  color: #999;
}

.books .book-img:hover .book-back {
  box-shadow: 3px -2px 0px 0px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-20deg);
}

.books .book-img img {
  display: block;
  height: 200px;
  transform-origin: 0% 50%;
  transition: .3s all ease-in-out;
}

.books .book-img:hover img {
  transform: rotateX(-20deg) rotateY(-90deg);
}


a.add-cart {
  text-decoration: none;
  color: #333;
  display: block;
  text-align: center;
  padding: 10px 0;
}