body {
  background-image:url('/images/bg/che_a03l.png');
  background-repeat: repeat;
  cursor: url(/meta/cur.png), default !important; 
  color: #b48989;
  font-size:12px;
  font-family: 'Comfortaa';
  letter-spacing:1.3px;
  max-width:100%;
  position:relative;
}
html { 
 text-size-adjust: 100%; 
 }
img {
 max-width:100%;
}
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 max-width: 100%;
}
@font-face { /* custom font */
font-family: 'Comfortaa';
src: url("meta/Comfortaa-Regular.ttf") format('truetype');
}
#flex {
  display:flex;
}
::selection {
background:#95ccff;
color:#fff;
}
::-moz-selection {
  background:#95c6ff;
  color:#fff;
}
a:link, a:visited {
 color: #92afff;
}
a:hover {
 color: rgb(95, 162, 255);
 text-decoration:underline;
 font-weight:600;
 cursor: url(/images/meta/curhov.png), progress !important; 
}
mark {
background: white!important;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

li {
text-decoration:none;
list-style: none;
align-self:center;
white-space:0;
margin:5px;
padding:5px;
font-size:14px;
}
h3, h2, h1 {
margin-bottom:5px;
color:#ffacc8;
text-decoration:underline;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-thumb /*draggable scrolling handle */ {
 background-color:#ddfdde;
 height: auto;
 border: 1px dashed #90daa6;
 border-radius:5px;
}
::-webkit-scrollbar-track /* progress bar*/ {
 background-color:#ffeff2;
 background-repeat:repeat;
 border: 1px dashed #ffd7e6;
 border-radius:5px;
}
#page {
  max-width: 1100px;
}
.box {
  display: inline-block;
  box-sizing:border-box;
  margin: auto;
  overflow-x:hidden;
  overflow-y: scroll;
 }
#contain {
  position: fixed;
  width: 1000px;
  max-height:680px;
  padding: 10px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  overflow:hidden;
  border-style:dashed;
  border-width:3px;
  border-color:#ffc4da;
  background-color:#fff6f9;
  border-radius:3%;
  display:flex;
  flex-direction:column;
  }
  #header {
      width: 100%;
      min-height:100px;
      background-image:url(/images/bg/dot-02-70.png);
      font-size:48px;
      font-weight:600;
      text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
      color: #ffacc8;
      letter-spacing:10px;
      text-align:center;
      align-content:center;
      padding:3px;
      border-radius:3%;
    }
#nav {
  width: 100%;
  height:35px;
  align-items:center;
  text-align:center;
  border-style:dashed;
  border-width:2px;
  border-color:#ffc4da;
  background-color:#fff2f6;
  border-radius:5%;
  margin-top:5px;
  margin-bottom:5px;
}
#nav ul {
 display: flex;
 padding: 0;
 margin: 0;
 list-style-type: none;
 justify-content: space-evenly;

}
#nav li {
  align-items:center;
  text-align:center;
  margin-top:2px;
}
#nav li a {
  border: 2px ridge #dfffe4;
  border-radius: 10px;
  height:30px;
  padding:5px;
  background:#b5f3b8;
  color:white;
  font-size:12px;
  text-decoration:none;
}
#nav li a:hover {
  background:#ffbad5;
  border:2px ridge #ffbad5;
  animation: fadeIn 1s;
  
}

#main {
  background-image:url(/images/bg/notebook.png);
  border:1px solid #d0acac;
  height:485px;
  order:3;
  padding: 25px;
  overflow-y:auto;
  line-height:26px;
  font-size:14px;
  width:100%;
}
#footer {
  width: 100%;
  height:20px;
  align-content:center;
  text-align:center;
  font-size:10px;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  margin-top:5px;

}
@media screen and (max-width: 1000px) and (orientation: landscape){
#body {
  background-repeat:repeat !important;
  background-size:cover;
}
#contain {
zoom:55%;
width:1000px;
}
}
@media screen and (max-width: 1000px) and (orientation: portrait){
#contain {
zoom:150%;
width: 600px;
max-height:1000px;
}
#main {
  height:750px;
  font-size:130%;
}
}