/* 纪念日黑白滤镜 */
/*html {*/
/*	filter:grayscale(100%);*/
/*	-webkit-filter:grayscale(100%);*/
/*	-moz-filter:grayscale(100%);*/
/*	-ms-filter:grayscale(100%);*/
/*	-o-filter:grayscale(100%);*/
/*	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);*/
/*	-webkit-filter:grayscale(1)*/
/*}*/
/* 纪念日黑白滤镜 */

* {
    margin: 0;
    padding: 0;
}

.left {
    text-align: left;
    float: left;
}

.right {
    text-align: right;
    float: right;
}

body {
    background: url(https://blog.vincy1230.net/wp-content/uploads/2021/12/home.jpg),
        url(../img/home.jpg);
    /*纪念日黑白背景*/
    /*background: url(https://blog.vincy1230.net/wp-content/uploads/2021/12/homeB.jpg), url(../img/homeB.jpg);*/
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

header {
    padding: 1em 2.5%;
}

article {
    height: calc(100vh - 10em);
    padding: 0em 20%;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    align-content: center;
    -webkit-align-content: center;
    text-align: center;
}

footer {
    background-color: rgba(0, 0, 0, 0.5);
    transition: 0.5s;
    height: 4em;
    padding: 0em 3%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

footer:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

#header {
    position: sticky;
    top: 1em;
    height: 4em;
    padding: 0em 2em;
    backdrop-filter: blur(1px);
    border-radius: 1em;
    transition: 0.5s;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 40px -8px rgb(255 255 255 / 10%);
}

#header:hover {
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 1px 40px -8px rgb(255 255 255 / 40%);
}

#h1 {
    margin-top: 0.5em;
    height: 3em;
    border-radius: 0.5em;
}

#h2 {
    color: black;
    font-size: 1.5em;
    font-weight: 100;
    padding: 0.75em 0em 0em;
}

#h3 {
    margin-top: 1em;
    height: 2em;
}

#h4 {
    color: black;
    font-size: 1em;
    padding: 1.5em 0.5em 0em;
}

#a11 {
    height: 12em;
    border-radius: 1em;
}

#a12 {
    color: white;
    font-weight: 500;
}

#grid {
    display: grid;
    height: 10em;
    width: 20em;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        'a21 a21'
        'a21 a21'
        'a22 a23';
}

#a21 {
    grid-area: a21;
}

#a22 {
    grid-area: a22;
}

#a23 {
    grid-area: a23;
}

.item {
    padding: 0.5em 0.5em;
}

.item a {
    text-decoration: none;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    height: 100%;
    color: white;
    transition: 0.2s;
    border-radius: 1em;
    border: 2px solid white;
}

.item a:hover {
    color: #fb7299;
    transition: 0.2s;
    border: 2px solid #fb7299;
}

#a21 h1 {
    font-weight: 500;
}

#a22 h1,
#a23 h1 {
    font-weight: 500;
    font-size: 1.25em;
}

#copy {
    color: #939393;
}

.beian a {
    display: inline-block;
    margin: 0;
    text-decoration: none;
}

.beian img {
    float: left;
    margin-right: 0.2em;
}

.beian span {
    float: left;
    color: #939393;
}