@supports (-webkit-overflow-scrolling:touch){
    html{        background-attachment: initial !important;
        }
    
    }

.nanobar{
    
    background:#fff;
    height: 10 px;
    margin: 0 auto;
}

#home{
    width: 100vw;
    height: 100vh;
    display: flex;
  align-items: center;
  justify-content: center;
    background-size: cover;
    background-image: url(../pic/IMG_8456.JPG);
    background-position: center;
    animation:background-animation 10s infinite;
    background-blend-mode: overlay;
    background-color: rgba(0,0,0,0.4);
}

a{
    color: inherit;
    text-decoration: none;
    
}

@keyframes background-animation {
    0%   { background-size:100% auto; }
    50% { background-size:200% auto; }
    100% { background-size:100% auto; }
}
html{
    font-family: "Microsoft Yahei","游ゴシック", sans-serif;
    
}
body{
    padding: 0px;
    margin: 0px;
    
    height: auto;
    min-height: 100%;
    overflow-x:hidden;
    
    
}
#center{
    position: relative;
    width: 100vmin;
    height: 100vmin;
 
    
    
}
@font-face{
    font-family: myfont;
    src : url(../Encode_Sans_Condensed/EncodeSansCondensed-Medium.ttf);
    
}
@font-face{
    font-family: myfontlight;
    src : url(../Encode_Sans_Condensed/EncodeSansCondensed-Light.ttf);
    
}
#header{
    position: absolute;
    left: 2vmin;
    top:2vmin;
    width: 60vmin;
    color: white;
    font-size: 3vmin;
    text-align: center;
    font-family: myfont;
    background-color: rgba(255,255,255,0.3);
    padding: 3vmin;
    
    
}
.bigtitle{
    
    font-size: 8vmin;
    text-align: center;
    
    
}
.smalltitle{
    
    font-size:  3vmin;
    text-align: center;
    font-family: myfontlight;
}
.pages{
    width: 100vw;
    height: 100vh;
    display: flex;
  align-items: center;
  justify-content:center;
    flex-wrap: wrap;
    position: relative;
    background-size: cover; 
    background-position: center;
    background-attachment: fixed;
    flex-direction: column;
    
}

.pagesflex{
    width: 100vw;
    background-color: white;
    
    
}

.pageend{
    background-image: url(../pic/01.jpg);
    background-position: center;
    color: white;
    text-shadow: 2px 2px 5px #000000;
}
.project{
    background-image: url(../pic/38847246-polygon-wallpapers.jpg);
    background-position: center;
    color: white;
    font-family: myfontlight;
    
    
    
}
.passage{
    
    font-family: Baskerville,"kai";
    
    font-size: 3vmin;
    line-height: 5vmin;
    width: 80%;
    
}
.container{
   margin: auto;
    
}

.pagesflex img{
    border-radius: 2px;
}
.item{
    padding: 5px 5px;
    transition: all 120ms ease;
    width: 25vw;
    box-sizing: border-box;
}

@media screen and (max-width: 1200px){
 .item {
    width: 50vw;
  }
}


.bigitem{
    padding: 5px 5px;
    transition: all 120ms ease;
    width: 50vw;
    box-sizing: border-box;
}

@media screen and (max-width: 1200px){
 .bigitem {
    width: 100vw;
  }
}
.conthead{
    
    width: 100vw;
    height: 10vmin;
    text-align: center;
    line-height: 10vmin;
    font-size: 7vmin;
    margin-top: 5vmin;
    font-family: Baskerville;
    
    
}
.hori{
    
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    height: 10px;
    
}

hr.style-eight {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    font-family: Baskerville;
    padding: 0 0.25em;
    background: white;
}


.article{
    box-sizing: border-box;
    background-color: rgba(255,255,255,1);
    font-size: 3vmin;
    padding-top: 8vmin;
    padding-bottom: 2vmin;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 0.5vmin;
    text-align: center;
    position: relative;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.8);
    
    
    
}

.places{
    box-sizing: border-box;
    background-color: darkblue;
    color: white;
    font-size: 3.5vmin;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 0.5vmin;
    text-align: center;
    height: 12vmin;
    line-height: 12vmin;
    font-family: cursive;
    
    
    
}

.featuredarticle{
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 6vmin;
    background-color: rgba(27,64,30,1);
    color:snow;
    
}

.featuredweb{
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 6vmin;
    background-color: rgba(255,0,30,1);
    color:snow;
    
}


.typewriter h1 {
    font-size: 3vmin;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 12s steps(40, end) infinite,
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  0% { width: 1% }
  25% { width: 100% }
  100% { width: 100% }
}



/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

.typewriter2 h1 {
    
    
    font-size: 3vmin;
    font-family: "Papyrus","Courier";
    color:white;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 12s steps(40, end) infinite,
    blink-caret .75s step-end infinite;
}
.typewriter2{
    
    height: 5vmin;
    margin-bottom: 5vmin;
}

.backtotop{
    width: 10vmin;
    height: 10vmin;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    right: 0px;
    top: 0px;
    color: white;
    line-height: 10vmin;
    text-align: center;
    font-size: 5vmin;
    
    
}
.placesCN{
    position: absolute;
    top:1vmin;
    left:2vmin;
    font-size: 5vmin;
    font-family: "游ゴシック";
    
    
}
.placesEN{
    position: absolute;
    top:7vmin;
    left:2vmin;
    font-size: 3vmin;
    
    
}
.feature{
    position: relative;
    width: 68vmin;
    height: 68vmin;
    background: rgba(255,255,255,0.3);
    background-clip: content-box;
    padding: 1vmin;
    border: solid 1px rgba(255,255,255,0.7);
    background-position: center;
    box-shadow: 4px 4px 10px -1px rgba(0,0,0,0.5);
    
    
}
.feapic{
   
    background-image: url(../pic/head.jpg);
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    opacity: 0.7;
    
}

.feapic:hover{
    opacity: 1;
}
.tilename{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 70vmin;
    height: 10vmin;
    background-color: rgba(0,0,0,0.5);
    
    color: white;
    
}
.externallink{
    
    position: absolute;
    border-radius: 1vmin;
    top:2vmin;
    right: 2vmin;
    width: 7vmin;
    height: 7vmin;
    color:white;
    font-size: 5vmin;
    text-align: center;
    background-color: rgba(0,0,0,1);
    opacity: 0.3;
}
.feature:hover .externallink{
    opacity: 0.8;
    background-color: rgba(231,120,20,0.8);
    
    
}

.beento
{color:white;}
.ntbeento{
    color: gray!important; 
}