/*
* @Author: fuzhuo
* @Date:   2016-10-26 16:57:39
* @Last Modified by:   fuzhuo
* @Last Modified time: 2017-01-03 16:57:04
*/
@font-face {
  font-family: 'idoser';   /*字体名称*/
  src: url('../fonts/wangjin.woff');       /*字体源文件*/
}
body { font-family: "idoser", "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif !important; color: #fff;}
canvas {margin: 0; padding: 0;  position: absolute; z-index: -1; left: 0px; top: 0; }
ul,li{margin: 0; padding: 0;  list-style: none; }
a{font-size: 14px;color: #fff;text-decoration: none;outline: none;}
div.btnbg { position: fixed; left: 0; top: 0; }
#main { position: relative; max-width: 100%; width: 300px; margin: auto; padding-top: 50px; cursor: default; opacity: 0.95; text-align: center; background: rgba(0, 0, 0, .5); margin-top:5%; }
.header-hitokoto { width: 60%; margin: auto; font-size: 14px; color: snow; background: rgba(0, 0, 0, 0.66); padding: 20px 30px; border-top: dashed #fff 1px; letter-spacing: 1px; line-height: 30px; }
.icons li{padding:15px 0;}
.icons li a{margin: 15px auto;color: #fff;padding: 0 15px;}
#footer{bottom: 0;text-align: center;margin: 20px auto;color: #fff;}



/*colorful*/
@-webkit-keyframes sparkle {
  from {
    background-position: 0% 100%;
  }
  to {
    background-position: 200% 100%;
  }
}

@keyframes sparkle {
  from {
    background-position: 0% 100%;
  }
  to {
    background-position: 200% 100%;
  }
}
.colorful:before {
  -webkit-animation: sparkle 4s infinite linear;
          animation: sparkle 4s infinite linear;
  background: -webkit-linear-gradient(0deg, #7FEFBD 0%, #FFF689 11%, #EC0B43 22%, #7FEFBD 33%, #FFF689 44%, #EC0B43 55%, #7FEFBD 66%, #FFF689 77%, #EC0B43 88%, #7FEFBD 100%);
  background: linear-gradient(90deg, #7FEFBD 0%, #FFF689 11%, #EC0B43 22%, #7FEFBD 33%, #FFF689 44%, #EC0B43 55%, #7FEFBD 66%, #FFF689 77%, #EC0B43 88%, #7FEFBD 100%);
  background-size: 300% 100%;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  z-index: -1;
  -webkit-transform: scale(0.99) translateY(3px);
          transform: scale(0.99) translateY(3px);
}
.colorful{
 border-radius: 4px;
 position: relative;
width: 50%;
margin: 5% auto;
}

@media (max-width:414px) { 
#main{margin-top: 20%;}
}