* { box-sizing: border-box; }

body {
  background:#EBECEF url(home_bg.jpg) fixed;
  background-size: cover;
  color:#62718A; 
  font-size:10px;
  font-family: 'Playwrite DE Grund', 'Long Cang', calibri, verdana;
  letter-spacing:1px;
  margin:0; padding:10px 0 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}


:lang(zh) {
  font-size: 1.80em;
}


a { color:#AEC6E8; text-decoration:none; letter-spacing:2px; font-family: 'Hi Melody'; font-size: 15px;}
a:hover { color:#A61616; text-decoration:none; }

b { color:#A61616; font-weight:bold; }
i { color:#8DA1B9; font-weight:bold; font-style:italic; }


::selection {
  background:#B7CCE3; /* WebKit/Blink Browsers */
  color:#fff;
}


::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius:0;
  border:1px solid #ccc;
  border-right:1;
}


::-webkit-scrollbar {
  width:7px; height:7px;
  background:transparent;
}


textarea { font:11px calibri; letter-spacing:1px; color:#888; }



/* layout */
#layout { width:430px; margin:auto; }

#navigation { width:430px; padding:4px 4px 4px 4px; justify-content: center; align-items: center;}


.contentbox {
  width:100%;
  background:#fff;
  border:1px dotted #b8cbe0;
  padding:8px 8px;
  margin-bottom:15px;
  word-break: break-word;
}


.contentgallery img {
  height:180px;
  display:inline-block;
  margin-right:5px;
}


.img-floatinganimwelcome {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  width: 75px;
  height: auto;
}


@keyframes floating {
  0% {
  transform: translate(0, 0px);
  }

  50% {
  transform: translate(0, 10px);
  }
  
  100% {
  transform: translate(0, -0px);
  }
}


.welcome {
  max-width: 100%;
  margin: 9px;
  display: block;
}


div {
 display: block;
 list-style-position: inside;
}


:host {
  display: inline-block;
  overflow: hidden;
  text-align: initial;
  white-space: nowrap;
}


.marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}


.marquee-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%; /* starts off-screen */

  animation: marquee-scroll 9s linear infinite;
}

/* animation */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}


.dividers {
  display: flex;
  justify-content: center;
  padding: 0px;
  margin-bottom: 10px;
}


#topborder {
    background-image: url(topborder.png);
    background-repeat: repeat-x;
    background-size: 11%;
    background-position: top;
    height: 73px;
    width: 100vw;
    position: fixed;
    top: 0px;
    z-index: 3;
}


#bottomborder {
  background-image: url(bottomborder.png);
  background-repeat: repeat-x;
  background-size: 11%;
  background-position: bottom;
  height: 343px;
  width: 100vw;
  position: fixed;
  bottom: -7px;
  z-index: 3;
}