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: 1500px;
}
.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;
}