html {
   height: 100%;
}

body {
   font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
   background: #79a8ae;
   color: #CFEBE4;
   font-size: 18px;
   line-height: 2;
   letter-spacing: 1.2px;
   margin: 0;
}

a {
   color: #ebf7f4;
}

.body--ready {
   background-color: #0f4c75
}

.text {
   position: fixed;
   bottom: 100px;
   text-align: center;
   width: 100%;
}

.canvas {
   margin: 0 auto;
   display: block;
}

img#logo {
   width: 128px;
   background-size: cover;
   border-radius: 200px;
   box-shadow: 0px 0px 40px rgba(63, 81, 181, 0.72);
   border: 3px solid #00a0ff;
   opacity: 1;
   margin: 0 auto;
   margin-top: 20px;
   margin-bottom: 20px;
   transition: all 1.0s;
}

#logo:hover {
   box-shadow: 0 0 10px #fff;
   -webkit-box-shadow: 0 0 19px #fff;
   transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   /* IE 9 */
   -moz-transform: rotate(360deg);
   /* Firefox */
   -webkit-transform: rotate(360deg);
   /* Safari 和 Chrome */
   -o-transform: rotate(360deg);
   /* Opera */
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.cs {
   width: 100%;
   height: 100%;
   margin: 0 auto;
   position: absolute;
   text-align: center;
}

.text {
   position: absolute;
   bottom: 80px;
   text-align: center;
   width: 100%;
   font-weight: bold;
   color: #ffffdd;
}

.text-right {
   position: fixed;
   bottom: 50px;
   text-align: right;
   width: 100%;
   font-weight: bold;
   }

#github {
   position: fixed;
   top: 0;
   right: 0;
   border: 0;
   z-index: 9999;
   height: 10%
}