/***
mcscn.net
2019.10.29
**/
.index{
     background-color: #f7f7f7;
     background-image: url(../index.gif);
     background-position: center 50%;
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
}
.snow-container{
     position:fixed;
     top:0;
     left:0;
     width:100%;
     height:100%;
     pointer-events:none;
     z-index:99;
}
audio{
     position:fixed;
     bottom:0;
     left:0;
     width:100%;

     z-index: 999;
}
.myblog{
     width:100%;
     height: 100vh;
     text-align: center;

     display:flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: stretch;
 }
.myblog h1{
    font-size:1.8em;
    margin-bottom: 20px;
}
.myblog h3{
    font-size:1.0em;
    margin-bottom: 160px;
    color:#666;
}
.myblog p,
.myblog a{
    line-height:150%;
    color:#999;
}
.myblog a:hover{
    color:#333;
}
  .myblog h2{
    font-size:1.0em;
}
 .myblog .logo{
	 position:absolute;top:50px;
 }
 .myblog .info{
     width:100%;
}
 .myblog .info{
     position:absolute;
     bottom:100px;;
}
#audio_btn{
    position:fixed;
    right:10px;
    bottom:10px;
    border:none;
    background:rgba(255,255,255,1);
    border-radius:50%;
    box-shadow:0px 1px 5px #ccc;
    width:40px;
    height:40px;
    line-height:42px;
    text-align:center;
}
#audio_btn:hover{
    border-color:#f60;
}
#audio_btn span{
    display:flex;
    justify-content:center;
    align-items:center;
}
#audio_btn i{
    display:none;
}
#audio_btn span:before{
    display:block;
    font-size:2.0em;
    content:"\25BA";
    margin:0;
    padding:0;
}
#audio_btn span.p-play{
    color:#f60;
}
#audio_btn span.p-play:before{
    content:"\266C";
    animation: rotate 3s linear infinite;
}
#audio_btn span.p-pause:before{
    content:"\266A";
}

.nav a{
     margin-right: 11px;
	 font-size:1.0em;
}

@media (max-width: 800px) {
    /*详细页媒体播放按钮*/
    #audio_btn{
        right:10px;
        top:10px;
    }
    #audio_btn span:before{
        font-weight:bold;
    }
   .myblog{
        font-size: 0.8em;
    }
    .myblog h1{
        display: none;
    }
    .myblog h3 span{
        display:block;
    }
    .index{
        background-size:100% auto;
        background-position: center 20%;
    }
}
@keyframes rotate{
    0%{
        transform: rotateZ(0deg);/*从0度开始*/
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg); 	/* Opera */
    }
    100%{
        transform: rotateZ(360deg);/*360度结束*/
        -ms-transform:rotate(360deg); 	/* IE 9 */
        -moz-transform:rotate(360deg); 	/* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg); 	/* Opera */
    }
}