//-----------start:tag.ejs---------------------


a {
    text-decoration: none;
}

//------------end:tag.ejs----------------------


// -----------start:tags.ejs--------------------
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    /*初始状态 透明度为0*/
    40% {
        opacity: 0;
    }

    /*过渡状态 透明度为0*/
    100% {
        opacity: 1;
    }

    /*结束状态 透明度为1*/
}

@-webkit-keyframes fade-in {

    /*针对webkit内核*/
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.tags-container {
    margin-top: 50px;
    min-height: 30vh;
    width: 100%;
    border-radius: 40px;
    position: absolute;
    padding-bottom: 70px;
    animation: fade-in;
    /*动画名称*/
    animation-duration: 1s;
    background: rgba(204,204,214,0.5);
    /*动画持续时间*/
    -webkit-animation: fade-in 1s;
    /*针对webkit内核*/
}

.tagsbackgroundleft{
    // position: fixed;
    // min-height: 100vh;
    background: #363433;
    width: 58.33%;
    opacity: 0.7;
}

.tagsbackgroundtop{
    // position: fixed;
    // min-height: 100vh;
    background: #363433;
    width: 50%;
    opacity: 0.7;
}

.tagintro {
    padding-top: 2%;
    padding-left: 5%;
    font-size: 2em;
    font-weight: bold;
    text-align: left;
}

.tags-container .tag {
    display: inline;
    float: left;
    width: 20%;
    margin-left: 2%;
    margin-top: 5%;
    margin-right: 2%;
    border: solid;
    border-radius: 7px;
    padding: 5px;
    color: #3cdc82;
    font-size: 1.2em;
}

.tagsimg {
    width: 60%;
    max-height: 60vh;
    border-radius: 40px;
    margin-left: 0;
}




@media screen and (max-width: 1200px) {
    .tags-container   .tag {
        width: 20%;
        margin-top:2vh;
        border: none;
    }
    .tagsbackgroundleft{
        display: none;
    }
    
    .tags-container{
        background: rgba(255,255,255,0.6);
        border-radius: 0px;
    }

    .tagsimg{
        margin-left: 20%;
        margin-top: 70px;
    }

    .tagsbackgroundtop{
        display: none;
    }
}


//---------end:tags.ejs---------------------------


//----------start:tag-detail.ejs---------------
.postimage {
    width: 100%;
}

.tag-container {
    min-height: 100vh;
    animation: fade-in;
    /*��������*/
    animation-duration: 1s;
    /*��������ʱ��*/
    -webkit-animation: fade-in 1s;
    /*���webkit�ں�*/
}

@media screen and (max-width:1200px) {
    .tag-container {
        margin-top: 100px;
        animation: fade-in;
        /*��������*/
        animation-duration: 1s;
        /*��������ʱ��*/
        -webkit-animation: fade-in 1s;
        /*���webkit�ں�*/
    }
}
//---------end:tag-detail.ejs-------------------

@media screen and (max-width: 768px) {
    .tag-container{
        margin-top:2%;
    }

    .tags-container  .tag {
        width: 25%;
    }
}


@media screen and (max-width: 425px) {
    .tags-container  .tag {
        width: 40%;
    }
}