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

article,
aside,
details,
figcaption,
figure,
copyright,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* start editing from here */
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}

/* text align right */
.txt-lt {
    text-align: left;
}

/* text align left */
.txt-center {
    text-align: center;
}

/* text align center */
.float-rt {
    float: right;
}

/* float right */
.float-lt {
    float: left;
}

/* float left */
.clear {
    clear: both;
}

/* clear float */
.pos-relative {
    position: relative;
}

/* Position Relative */
.pos-absolute {
    position: absolute;
}

/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}

/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}

/* vertical align top */
nav.vertical ul li {
    display: block;
}

/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}

/* horizontal menu */
img {
    max-width: 70%;
}

/* //end reset */


/*关注和添加文字的大小*/
body {
    font-size: 95%;
    font-family: 'Source Sans Pro', sans-serif;
    
   
}

.main-bg {
   /* background: url(../images/beijing.png) no-repeat center; */
    /*background-image: linear-gradient(0deg, #39ddff 40%, #30ddce 65%);*/
    
       background-image: linear-gradient(100deg, #39ddff 10%, #30ddce 90%);
        background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 100vh;
}



.follow-button {
        display: inline-block;
        padding: 4px 8px;
        border: 1.5px solid #000;
        border-radius: 5%;
        text-decoration: none;
    }

/*
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
}
*/




/*
.main-bg {
    background: url(../images/beijing.png) no-repeat center; 
    background-image: linear-gradient(5deg, #color1 0%, #color2 10%, #color3 20%, #color4 30%, #color5 40%, #color6 50%, #color7 60%, #color8 70%, #color9 80%, #color10 90%);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 100vh;
}

*/
 /*   title。来了老弟-repo */
 
 /*
h1 {
   font-size: 18vw;  
    color: #000;
    text-align: center;
    padding: 1.5vw 1.8vw 3vw;
    letter-spacing: 11px;
    text-transform: uppercase;
}

*/
h1 {
  font-size: 36px;
  text-align: center;
  padding: 1.5vw 1.8vw 3vw;
  letter-spacing: 1px;
  text-transform: uppercase;
  
  animation: colorCycle 6s infinite;
}

@keyframes colorCycle {
  0% {
    color: #ff0000;
  }

  5% {
    color: #ff4000;
  }

  10% {
    color: #ff8000;
  }

  15% {
    color: #ffbf00;
  }

  20% {
    color: #ffff00;
  }

  25% {
    color: #bfff00;
  }

  30% {
    color: #80ff00;
  }

  35% {
    color: #40ff00;
  }

  40% {
    color: #00ff00;
  }

  45% {
    color: #00ff40;
  }

  50% {
    color: #00ff80;
  }

  55% {
    color: #00ffbf;
  }

  60% {
    color: #00ffff;
  }

  65% {
    color: #00bfff;
  }

  70% {
    color: #0080ff;
  }

  75% {
    color: #0040ff;
  }

  80% {
    color: #0000ff;
  }

  85% {
    color: #4000ff;
  }

  90% {
    color: #8000ff;
  }

  95% {
    color: #bf00ff;
  }

  100% {
    color: #ff00ff;
  }
}


/* //title */

/* content */
.sub-main-w3 {
    margin: 0.5vw 7vw;
}

.bg-content-w3pvt {
    max-width: 350px;
    max-height: 760px;
    margin: 0 auto;
  /*  background: #39ddff;*/
    background: rgba(255, 255, 255, .7);
  /*  backdrop-filter: blur(466px);  */
    text-align: center;
    
      -webkit-border-radius: 20px;
    -o-border-radius: 20px;
    -ms-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    
    
}


/*头像周边颜色*/
.top-content-style {
max-height: 320px;
/* 上方圆角，下方两个角90度 */
  border-radius: 20px 20px 0 0; 
  -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    -ms-border-radius: 20px 20px 0 0;
    -o-border-radius: 20px 20px 0 0;  
    background: #39d0ff;
    }



/*控制头像圆形还是方形 */
.top-content-style img {
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 20%;
    border-radius: 50%;
   /* padding: 8vw 1vw; */ 
     /* padding: 8.6em;*/
}



.rotate-img {
  animation: rotation 6.5s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}




/*.  悬浮的白框   */
.sub-main-w3 form {
    /*background: #ffff;*/
    padding: 5vw 3vw; 
        background: rgba(255, 255, 255, 1);
  /*  background: #EBEBEB;  */
   /* padding: 1.6em;*/
    -webkit-box-shadow: 2px 5px 16px 2px rgba(16, 16, 16, 0.18);
    -moz-box-shadow: 2px 5px 16px 2px rgba(16, 16, 16, 0.18);
    box-shadow: 2px 5px 16px 2px rgba(16, 16, 16, 0.18);
    margin: -1.8em 2.5em -1em;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
    -ms-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

p.legend {
    color: #4e4d4d;
    font-size: 17px;
    text-align: center;
    margin-bottom: 1.2em;
}

p.legend span {
    color: #000;
    margin-left: 20px;
}

/* //content */

/* copyright */
.copyright {
    margin-top: 3.08vw;
    padding-bottom: 1.5vw;
}

.copyright h2 {
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.8;
}

.copyright h2 a {
    color: #1cc7d0;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

.copyright h2 a:hover {
    opacity:.8;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

/* //copyright */

/* responsive */


@media(max-width:1100px) {
    .top-content-style {
        padding: 2vw 4vw 9vw;
    }
}

@media(max-width:1300px) {
    h1 {
        font-size: 3.4vw;
    }
}

@media(max-width:991px) {
    h1 {
        font-size: 4vw;
    }

    .top-content-style {
        padding: 3vw 4vw 506vw;
    }
}


@media(max-width:800px) {
    h1 {
        font-size: 5vw;
        padding: 2.5vw 1vw 30vw;
    }

    .top-content-style {
        padding: 4vw 4vw 9vw;
    }

    .copyright {
        margin-top: 3em;
        padding-bottom: 1.5em;
    }
}

@media(max-width:640px) {
    h1 {
        font-size: 6vw;
        padding: 3vw 1vw 4vw;
    }
}

@media(max-width:600px) {
    .copyright h2 {
        letter-spacing: 1px;
    }
}

@media(max-width:480px) {
    h1 {
        font-size: 2em;
        letter-spacing: 1px;
    }

    .top-content-style {
        padding: 2em 1em 4em;
    }

    .copyright h2 {
        font-size: 15px;
    }

    .copyright {
        margin-top: 2em;
        padding-bottom: 1em;
    }

}

@media(max-width:384px) {
    .sub-main-w3 form {
        margin: -2.5em 52em 2em;
    }

    h1 {
        padding: 5vw 1vw 6vw;
    }
}

@media(max-width:320px) {
    h1 {
        font-size: 1.7em;
    }

    .sub-main-w3 form {
        margin: -2em 1em 1.5em;
        padding: 1.5em;
    }

    .top-content-style {
        padding: 1.5em 1em 3em;
    }

    .copyright h2 {
        font-size: 14px;
    }
}