@media only screen and (max-width: 600px) {
body {
font-size: 1.5vh;
}
}

html, body {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(ellipse farthest-side at 40% 0%, #455A64 0%, #263238 60%, #1a2327 100%);

}

h1{
	color: #ffffff;
	text-align: center; /* 水平居中 */
	font-size: 5em;
	margin-top: 1em;
	font-weight: 700;
	text-shadow: 1px 0px #EEC9A3, 1px 2px #EEC9A3, 3px 1px #EF629F,
                2px 3px #EEC9A3, 4px 2px #EF629F, 4px 4px #EEC9A3,
                5px 3px #EF629F, 5px 5px #EEC9A3, 7px 4px #EF629F,
                6px 6px #EEC9A3, 8px 5px #EF629F, 7px 7px #EEC9A3,
                9px 6px #EF629F, 9px 8px #EEC9A3, 11px 7px #EF629F
        }

h2 {
        margin: 1em auto;
        font-size:3em;
        font-weight:bold;
        text-align:center;
        -webkit-text-stroke:1px rgb(255, 153, 0);
        -webkit-text-fill-color:transparent; /*镂空透明*/
        }

.emoji-container {
    position: absolute;
    bottom: 9em;
    left: 50%;
    transform: translateX(-50%);
    width: 18em;
    height: 18em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.emoji {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.contact-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.contact-grid {
    position: absolute;
    bottom: 2em;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    text-decoration: none;
    color: inherit;
}

.contact-item img {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    margin-right: 20px;
}

.contact-info h3 {
    font-size: 1.8em;
    margin: 0;
    color: gold;
}

.contact-info h4 {
    font-size: 1.3em;
    margin: 0em 0;
    color: gold;
}

.contact-info p {
    font-size: 1em;
    margin: 0;
    color: gold;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    opacity: 0.8;
}