html,
 body {
   /* font-family: "Microsoft JhengHei"; */
   font-family: -apple-system, -apple-system,
     BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen, Ubuntu, Cantarell, 'Open Sans',
     'Helvetica Neue', sans-serif;
   padding: 0px;
   margin: 0px;
   color: #e7e7e7;
   background: #393e42;
   font-size: 12px;
 }
 .site-header {
   text-align: left;
   display: block;
   padding-top: 30px;
   background-image: linear-gradient(rgba(52, 53, 54, .8) 0 82%, rgba(52, 53, 54, 0) 80% 100%);
 }
 .filter {
   background-image: linear-gradient(rgba(52, 53, 54, 0) 0 50%, rgba(255, 255, 0, 0.2) 50% 52%, rgba(57, 62, 66, 0) 53% 100%);
   padding: 1vh 0px;
 }
 hr {
   border-top: 1px solid rgba(255, 255, 0, 0.5);
 }
 .nav-item>.nav-link {
   font-size: 1.33em;
 }
 .ntl_footer {
   background: rgba(52, 53, 54, 0.5);
   padding: 10px 0px;
   width: 100%;
   position: relative;
   bottom: 0px;
   border-top: 1.5px solid rgba(255, 255, 0, 0.2);
 }


 /* main section*/
 .main {
   display: flex;
   --s: 200px;/* size xs  100px*/
   --m: 4px;/* margin xs 2px */
   --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
   padding: 30px 30px 30px 60px;
   /* margin-bottom: 30px; */
 }
 .wordbox {
   width: 15rem;
   float: left;
   background: rgba(66, 66, 66, .6);
 }
 .itemphonetic {
   font-size: 1em;
 }

 @keyframes move {
   0% {     background-color: #3a3a3a;}
   75% {background-color: rgba(243, 237, 184, 0.6);}
   100% {background-color: white;}
 }
 @keyframes easyin {
   0% {   opacity: 0.3}
   100% {opacity: 0.7}
 }

 @keyframes easyinout {
   0% {   opacity: 0.5}
   50% {opacity: 1}
   100% {opacity: 1}
 }
 @keyframes flash {
   0%,50%,100% {opacity: 1;}
   25%,75% {opacity: 0.3;}
 }

 @keyframes bounce {
   0%,  20%, 50%,80%,100% {
     -webkit-transform: translateY(0);
     -ms-transform: translateY(0);
     transform: translateY(0);
   }
   40% {
     -webkit-transform: translateY(-30px);
     -ms-transform: translateY(-30px);
     transform: translateY(-30px);
   }
   60% {
     -webkit-transform: translateY(-15px);
     -ms-transform: translateY(-15px);
     transform: translateY(-15px);
   }
 }

 .hexcontainer {
   font-size: 0em;/*disable white space between inline block element */
   --hexheight:  3000px;
 }
 .hexcontainer::before {
   content: "";
   shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));
   width: calc(var(--s)/2 + var(--m));
   float: left;
   /* height: calc(100vh + var(--f)*3); */
   height: var(--hexheight);
 }

 .hexcontainer div {
   width: var(--s);
   margin: var(--m);
   height: calc(var(--s)*1.1547);
   display: inline-block;
   font-size: larger; 
   clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
   background: rgb(255, 255, 255);
   position: relative;
   -webkit-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
   animation: move 1s ease-in-out;
   margin-bottom: calc(var(--m) - var(--s)*0.2885);
 }
 .hexcontainer div img {
   margin: calc(var(--m)*2);
   margin-bottom: calc(var(--s)*-0.23);
   width: calc(var(--s)*0.92); /* container height - (border thickness * 2) */
   height: calc(var(--s)*1.07);/* container height - (border thickness * 2) */
   clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
   -webkit-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
 }

 .hexLink {
   text-align: center;
   color: #fff;
   overflow: hidden;
   opacity: 0.7;
   font-size: larger;
   animation: easyin 1s ease-in-out;
 }

 .hexLink span {
   transition: all .3s ease-in-out;
   opacity: 0.5;
 }
 .hexLink:hover span {
   scale: 1.5;
   opacity: 1.0;
   transform-origin: 0% 0%;
   -webkit-transform-origin: 0% 0%;
 }
 .flash {
   animation-name: flash;
 }
 a.btn {
   animation: easyin .5s ease-in-out;
 }
 .btn_filter {
   transition: 1s;
   /* background-color: rgba(218, 217, 215, 1); */
 }
 .btn_filter.btn-warning {
   background-color: rgb(233, 168, 39);
 }


 @media (hover: hover) {
   .hexLink:hover {
     opacity: 1;
     animation-name: flash;
   }
   a.btn:hover {
     /* animation-name: flash; */
     background-color: rgba(202, 244, 152, 0.8);
     box-shadow: 0 0 15px rgba(202, 244, 152, 0.7);
     border-color: rgba(202, 244, 152, 0.8);
   }
   .btn_filter:hover, .dropdown-item:hover, .dropdown-item.active {
     background-color: rgba(248, 190, 115, 0.9);
     box-shadow: 0 0 15px rgba(246, 116, 40, 0.9);
     color: rgba(246, 116, 40, 1);
   }
   .btnTotry:hover {
     color: rgb(249, 122, 3);
     box-shadow: 0 0 15px rgba(246, 116, 40, 0.9);
   }
   .nav-item a:hover {
     background-color: #ff0;
     box-shadow: 0 0 15px rgba(246, 116, 40, 0.9);
     filter: invert(27%) sepia(51%) saturate(300%) 
     brightness(100%);
   }
 }
 .btnTotry {
   font-size: 1.9rem;
   color: rgba(66, 66, 66, 1);
   transition: all .3s ease-in-out;
   height: 20px;
   width: 38px;
 }
 .nav-item a {
   font-size: 1.5vh;
   width: 30px;
   height: 30px;
   color: #000;
   background-color: #ccc;
   transition: all .3s ease-in-out;
 }

 .nav-item a.active {
   color: #fff;
   background-color: #f00;
   box-shadow: 0 0 15px rgba(250, 26, 17, 0.9);
 }
 .bounce {
   animation-name: bounce;
 }
 .list-enter-active,
 .list-leave-active {
   transition: all 0.2s ease;
   position: relative;
 }
 .list-enter-from,
 .list-leave-to {
   opacity: 0;
   transition: all 0.5s ease;
   transform: translateY(-500px);
 }
 @media screen and (max-width:1024px) {
   .main {
     display: flex;
     --s: 150px;/* size xs  150px*/
     --m: 3px;/* margin xs 3px */
     --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
     padding: 10px 10px 10px 30px;
   }
 }

 @media screen and (max-width:768px) {
   .main {
     display: flex;
     --s: 90px; /* size xs  90px*/
     --m: 1.8px;/* margin xs 1.8px */
     --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
     padding: 5px 5px 5px 10px;
   }
   .wordbox {
     width: 12rem;
   }
   .mainlogo {
     margin-left: -5vh;
   }
   .mainlogo>img {
     height: 40px;
   }
   .nutclogo {
     font-size: 0.8em;
   }
   .ack {
     visibility: hidden;
   }
 }

 .sr-only {
   padding: 0.5rem;
   background: #fae101;
   color: #030303;
   position: absolute;
   top: -3rem;
   left: 0;
   font-size: 1.2rem;
   -webkit-transition: top 1s ease-out;
   transition: top .3s ease-out;
   transition-behavior: normal;
   transition-duration: .3s;
   transition-timing-function: ease-out;
   transition-delay: 0s;
   transition-property: top;
   z-index: 100;
 }
 .sr-only:link {
   text-decoration: none;
 }
 .sr-only:focus {
   top: .5rem;
   left: .5rem;
 }
 .picbooks a img {
  font-size: 0em;;
 }
 /*for tracker*/
 #ball {
   width: 1em;
   aspect-ratio: 1;
   background-color: red;
   border: 1px solid transparent;
   border-radius: 100%;
   pointer-events: none;
   position:fixed;
   left: 0;
   top: 0;
   z-index: 99999;
   transform: translate3d(var(--mouseX, 0), var(--mouseY, 0), 0) translate(-50%, -50%);
   transition: 0.5s ease-out;
   transition-property: transform, width, border, background-color;
 }

 body:has(button:hover) #ball,
 body:has(a:hover) #ball {
   width: 5em;
   border-width: 5px;
   background-color: transparent;
   border-color: rgb(255 0 0 / 70%);
 }

 @media (prefers-reduced-motion: reduce) {
   #ball {
     display: none;
   }
 }

 @media(pointer:coarse) {
   #ball {
     display: none;
   }
 }