body{
  font-family: 'Noto Sans TC', "Microsoft JhengHei", "Heiti TC","Helvetica Neue",Helvetica,Arial,sans-serif;

}

.fix-bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(../images/main.jpg);
  background-position: center center;
  background-size: cover;
}

html {
  /* scroll-behavior: smooth; */
  overflow-x: hidden;
}

:root{
  --chapter-title-bg: rgba(0, 0, 0, 1);
  --story-bg: rgba(0, 0, 0, .75);
  --gradient-height: 20vh;
}

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin:80px 0 5px 0;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: rgb(219,219,219);
}

.banner{
  width: 100%;
  height: 100vh;
  background: url(../images/main-3.jpg);
  background-position: center bottom;
  background-size: cover;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.banner-index{
  width: 100%;
  height: 100vh;
  background: url(../images/index/mainBg.jpg);
  background-position: center bottom;
  background-size: cover;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.title-img{
  /* max-width: 600px; */
  position: relative;
}

@media (min-width: 992px) {
  .title-img{
    max-width: 35%;
    position: relative;
  }
}

.title-img .white{
  position: absolute;
  transform: translate(-5px, -5px);
  left: 0;
  top: 0;
}

.title-img .shadow{
  position: absolute;
  transform: translate(1px, 1px);
  left: 0;
  top: 0;
  filter: contrast(0);
}

/* fade in */
.fadein{
opacity: 0;
transform: translate(0, 60px);
transition: all 1000ms;
}

.fadein.scrollin {
opacity: 1;
transform: translate(0, 0);
}

.description{
background-color: #ebd080;
padding: 4rem 0;
position: relative;
}

.description-content{
position: relative;
max-width: 800px;
margin: 0 auto;
background-color: #ba9d26;
line-height: 1.8;
padding: 3rem;
}

.description-content::before{
content: '';
display: block;
position: absolute;
top: 20px;
left: 20px;
width: calc(100% - 40px);
height: calc(100% - 40px);
background-color: #ebd080;
transform-origin: center;
transition: transform 5s ease-out;
}

.description-content.fadein.scrollin::before{
transform: rotateZ(1.5deg);
}

@keyframes shining {
  0% {
    opacity: .2;
  }

  100%{
    opacity: 1;
  }
}

.start-game{
  margin-top: 3rem;
  font-size: 1.5rem;
  font-weight: 1000;
  color: #bffff9;
  text-shadow: 0px 0px 10px #fff;
  animation-name: shining;
  animation-direction: alternate;
  animation-duration: .8s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.start-game:hover, .start-game:focus{
  color: #4fafa9;
  text-decoration: none;
}

footer{
  background-color: #fffad7;
  padding: 2rem 0;
}

.chapter{
  display: block;
  position: relative;
  background-color: var(--chapter-title-bg);
  height: 100vh;
  margin-bottom: var(--gradient-height);
}

#app a:hover, #app a:focus{
  text-decoration: none;
}

.chapter::before{
  position: absolute;
  width: 100%;
  height: var(--gradient-height);
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, var(--chapter-title-bg), var(--story-bg));
  content: '';
  transform: translate(0, 100%);
}

.chapter .chapter-title{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chapter .chapter-title h1{
  margin: 0;
  color: #fff;
  margin-bottom: 2rem;
}

.chapter .chapter-title .title{
  margin: 0;
  color: #fff;
  font-size: 3rem;
  font-weight: 1000;
}

.chapter .chapter-title .title:not(:last-child){
  margin-bottom: 2rem;
}

.chapter span, .chapter a{
  color: #fff;
  letter-spacing: .5rem;
  font-size: 1.4em;
  text-shadow: 0px 0px 10px #fff;
  animation-name: shining;
  animation-direction: alternate;
  animation-duration: .8s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.chapter a:hover, .chapter a:focus{
  text-decoration: none;
  color: #fff;
}

.story{
  position: relative;
  padding: 2rem 0;
  background-color: var(--story-bg);
  color: #fff;
  margin-bottom: var(--gradient-height);
}

.story::before{
  position: absolute;
  width: 100%;
  height: var(--gradient-height);
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, var(--story-bg), transparent);
  content: '';
  transform: translate(0, 100%);
}

.story-content {
  position: relative;
}

.desc-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.story p{
  line-height: 2em;
  margin-bottom: 2rem;
  text-indent: 2rem;
  letter-spacing: 1px;
}

.story a.next-story{
  display: block;
  margin: 2rem auto 0;
  width: fit-content;
  background-color: #fff;
  padding: .7rem 1.5rem;
  border-radius: 1rem;
  color: #000;
  box-shadow: 0px 0px 6px 2px #fff;
  transition: all .4s ease;
}

.story a.next-story:hover, .story a.next-story:active{
  background-color: #aaa;
  box-shadow: 0px 0px 10px 4px #fff;
  color: #fff;
}

.story .poem{
  display: flex;
  margin: 0 auto 2rem;
  flex-direction: column;
  width: fit-content;
  padding: 1.5rem 2rem;
  background-color: #f5eac8;
  font-weight: 1000;
  color: #251717;
}

.story .poem>span{
  margin-bottom: .3rem;
}

.question{

}

.question .card{
  background-color: #e8d790;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='88' viewBox='0 0 80 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 21.91V26h-2c-9.94 0-18 8.06-18 18 0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73 3.212-6.99 9.983-12.008 18-12.73V62h2c9.94 0 18-8.06 18-18 0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73-3.212 6.99-9.983 12.008-18 12.73zM54 58v4.696c-5.574 1.316-10.455 4.428-14 8.69-3.545-4.262-8.426-7.374-14-8.69V58h-5.993C12.27 58 6 51.734 6 44c0-7.732 6.275-14 14.007-14H26v-4.696c5.574-1.316 10.455-4.428 14-8.69 3.545 4.262 8.426 7.374 14 8.69V30h5.993C67.73 30 74 36.266 74 44c0 7.732-6.275 14-14.007 14H54zM42 88c0-9.94 8.06-18 18-18h2v-4.09c8.016-.722 14.787-5.738 18-12.73v7.434c-3.545 4.262-8.426 7.374-14 8.69V74h-5.993C52.275 74 46 80.268 46 88h-4zm-4 0c0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73v7.434c3.545 4.262 8.426 7.374 14 8.69V74h5.993C27.73 74 34 80.266 34 88h4zm4-88c0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73v-7.434c-3.545-4.262-8.426-7.374-14-8.69V14h-5.993C52.27 14 46 7.734 46 0h-4zM0 34.82c3.213-6.992 9.984-12.008 18-12.73V18h2c9.94 0 18-8.06 18-18h-4c0 7.732-6.275 14-14.007 14H14v4.696c-5.574 1.316-10.455 4.428-14 8.69v7.433z' fill='%23fae7b3' fill-opacity='0.46' fill-rule='evenodd'/%3E%3C/svg%3E");
  border-radius: 0px;
  border: none;
  box-shadow: 0px 0px 6px #444;
}

.question .card-body{

}

.question h2{
  text-align: center;
  font-weight: 1000;
  color: #8c6701;
}

.question hr{
  border-color: #8c6701;
}

.question p{

}

.question .answer{

}

.question .answer .btn{

}

.question .poem{
  display: flex;
  margin: 0 auto 2rem;
  flex-direction: column;
  width: fit-content;
  padding: 1.5rem 2rem;
  background-color: rgba(0,0,0,.6);
  font-weight: 1000;
  color: #eee;
}

.question .poem>span{
  margin-bottom: .3rem;
}

.tool-btns a{
  color: #fff;
  transition: transform .4s ease;
}

.tool-btns a:hover, .tool-btns a:focus{
  text-decoration: none;
}

.tool-btns a.hidden{
  transform: translate(100px, 0);
}

.tool-btns a{
  color: #fff;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: solid 3px #ddd;
  position: fixed;
  background-color: #000;
}

a.to-top-btn{
  top: 10px;
  right: 10px;
}

a.to-bottom-btn{
  bottom: 10px;
  right: 10px;
}

a.to-top-btn>div, a.to-bottom-btn>div{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

a.to-top-btn small, a.to-bottom-btn small{
  margin: 0;
}

.chapter-selection{

}

.chapter-selection ul{
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.chapter-selection ul li{
  list-style: none;
  flex: 0 0 50%;
  padding: 0 .5rem;
}

.chapter-selection ul li:not(:last-child){
  margin-bottom: .5rem;
}

.chapter-selection ul li a{

}

.chapter-selection ul li a:hover{

}

.chapter-selection ul li a:focus{

}

@media (min-width: 768px){
  .story{
    background-color: transparent;
  }

  .story::before{
    display: none;
  }

  .story-content{

    margin: 0 auto;
    max-width: 640px;
    padding: 40px 30px;
    /* border-radius: 2rem; */
    background-color: rgba(0, 0, 0, .8);
  }

  .desc-btn {
    top: 40px;
    right: 30px;
  }

  .chapter::before{
    background: linear-gradient(180deg, var(--chapter-title-bg), transparent);
  }

  .chapter-selection ul li{
    flex: 0 0 100%;
  }

  .question .card{
    margin: 0 auto;
    max-width: 500px;
  }

}