@charset "UTF-8";
* {
  margin: 0;
  padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  font-family: "微软雅黑";
  font-size: 1rem;
  text-align: center;
  color: #888; }

#title {
  height: 100%;
  width: 100%;
  line-height: 35.5rem; }

#example1 {
  height: 100%;
  width: 100%;
  font-size: 2rem;
  line-height: 35.5rem; }

#example2 {
  height: 100%;
  width: 100%;
  line-height: 35.5rem; }

#id-example3 {
  position: absolute;
  width: 100%;
  top: 16.25rem; }

#id-example4 {
  position: absolute;
  width: 100%;
  top: 16.25rem; }

.final {
  position: absolute;
  width: 100%;
  top: 40%; }

#content {
  width: 71.15rem;
  height: 34px;
  position: fixed;
  bottom: 2.5rem;
  transform: rotate(-45deg);
  right: -31.825rem; }

#github {
  width: 15rem;
  margin: 0px auto; }

.github-animation {
  animation: mygithubmove 1s 1;
  animation-fill-mode: forwards; }

@keyframes mygithubmove {
  to {
    bottom: 40%;
    right: 0rem;
    transform: rotate(0); } }

.example1 .typing-container span:nth-of-type(1) {
  color: #c65fea; }

.example1 .typing-container span:nth-of-type(2) {
  color: #2a55ab; }

.example1 .typing-container span:nth-of-type(3) {
  color: #4ac706; }

.example1 .typing-container span:nth-of-type(4) {
  color: #3d5a90; }

.example1 .typing-container span:nth-of-type(5) {
  color: #4d72ac; }

.example1 .typing-container span:nth-of-type(6) {
  color: #46d0eb; }

.example1 .typing-container span:nth-of-type(7) {
  color: #9eafd6; }

.example1 .typing-container span:nth-of-type(8) {
  color: #b3a591; }

.example1 .typing-container span:nth-of-type(9) {
  color: #d91ca2; }

.example1 .typing-container span:nth-of-type(10) {
  color: #1bd976; }

.example1 .typing-container span:nth-of-type(11) {
  color: #8b500d; }

.example1 .typing-container span:nth-of-type(12) {
  color: #33d4bd; }

.example1 .typing-container span:nth-of-type(13) {
  color: #3fb14b; }

.example1 .typing-container span:nth-of-type(14) {
  color: #8dc698; }

.example1 .typing-container span:nth-of-type(15) {
  color: #ecaba5; }

.example1 .typing-container span:nth-of-type(16) {
  color: #33b084; }

.example1 .typing-container span:nth-of-type(17) {
  color: #642775; }

.example1 .typing-container span:nth-of-type(18) {
  color: #508ac8; }

.example1 .typing-container span:nth-of-type(19) {
  color: #b862e5; }

.example1 .typing-container span:nth-of-type(20) {
  color: #49996a; }

.example1 .typing-container span:nth-of-type(21) {
  color: #7020da; }

.example1 .typing-container span:nth-of-type(22) {
  color: #7c411b; }

.example1 .typing-container span:nth-of-type(23) {
  color: #b2bde2; }

.example1 .typing-container span:nth-of-type(24) {
  color: #3317be; }

.example1 .typing-container span:nth-of-type(25) {
  color: #9078e9; }

.example1 .typing-container span:nth-of-type(26) {
  color: #01873a; }

.example1 .typing-container span:nth-of-type(27) {
  color: #c67e66; }

.example1 .typing-container span:nth-of-type(28) {
  color: #fe74aa; }

.example1 .typing-container span:nth-of-type(29) {
  color: #cf382c; }

.example1 .typing-container span:nth-of-type(30) {
  color: #df4d25; }

.example1 .typing-container span:nth-of-type(31) {
  color: #782b88; }

.example1 .typing-container span:nth-of-type(32) {
  color: #a89f92; }

.example1 .typing-container span:nth-of-type(33) {
  color: #295993; }

.example1 .typing-container span:nth-of-type(34) {
  color: #ac4e62; }

.example1 .typing-container span:nth-of-type(35) {
  color: #db12d3; }

.example1 .typing-container span:nth-of-type(36) {
  color: #cf02fc; }

.example1 .typing-container span:nth-of-type(37) {
  color: #9de8a3; }

.example1 .typing-container span:nth-of-type(38) {
  color: #b822f4; }

.example1 .typing-container span:nth-of-type(39) {
  color: #472c47; }

.example1 .typing-container span:nth-of-type(40) {
  color: #7bfc3b; }

.example1 .typing-container span:nth-of-type(41) {
  color: #9859cc; }

.example1 .typing-container span:nth-of-type(42) {
  color: #0311a5; }

.example1 .typing-container span:nth-of-type(43) {
  color: #3b60ad; }

.example1 .typing-container span:nth-of-type(44) {
  color: #884492; }

.example1 .typing-container span:nth-of-type(45) {
  color: #301bb9; }

.example1 .typing-container span:nth-of-type(46) {
  color: #a3dcf5; }

.example1 .typing-container span:nth-of-type(47) {
  color: #b8e3ad; }

.example1 .typing-container span:nth-of-type(48) {
  color: #24440c; }

.example1 .typing-container span:nth-of-type(49) {
  color: #9e30cd; }

.example1 .typing-container span:nth-of-type(50) {
  color: #269eec; }