a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,
form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,
samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
  padding: 0px;
  margin: 0px;
}

html {
  height: 100%;
  width: 100%;
}

body {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  background-color: #18191e;
  color: #aaaaaa;
  font-size: 12px;
  /* auto表示字距由浏览器根据字体自带的字距信息自动调整 */
  font-kerning: auto;  
  /* 当设为auto时，浏览器会依照字体大小自动对字体的形状和细节进行调整 */
  font-optical-sizing: auto;
}

#app {
  height: 100%;
  width: 100%;
  margin: 1%;
  display: none;
  flex-direction: column;
}

/* 加载动画 */
#loadingScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #18191f;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #50fa7b;
  font-size: 1.5em;
}

 /* 加载动画的样式 */
 .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #44475a;
  border-top: 4px solid #50fa7b;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #f8f8f2;
}