body {
    background-image:
            url('images/normal/background-3165721_DPI72.png'),
            linear-gradient(135deg, rgba(10, 95, 132, 0.6), rgba(0, 0, 0, 0.6));
    transition: background-image 0.5s ease-in-out;
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

body.loaded {
    background-image: url('images/normal/background-3165721.jpg');
}

.main-title {
    width: 800px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    border-radius: 20px;
    margin: 100px auto 50px auto;
    top: auto;
    max-width: 100%;
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
}

.main-title img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-position: center;
    object-fit: cover;
}

.contact {
    text-align: left;
    display: block;
    margin: 50px auto;
    max-width: 800px;
    padding: 20px;
    border-radius: 20px;
    color: #fff;
}

#title {
    font-size: 24px;
}

.contact a {
    color: #fff;
    text-decoration: none;
}

.contact .btn {
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    margin-top: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    width: 800px;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    margin-left: -20px;
    animation-name: fadeSlide;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    opacity: 0;
}

.contact .btn:active {
    transform: scale(0.96);
}

#github {
    background: #313131;
    animation-delay:  0.2s;
}

#github:hover {
    box-shadow: 0 0 10px rgba(49, 49, 49, 0.6);
}

#bilibili {
    background: #01c5ff;
    animation-delay:  0.5s;
}

#bilibili:hover {
    box-shadow: 0 0 12px rgba(1, 197, 255, 0.6);
}

#youtube {
    background: #ff0101;
    animation-delay: 0.7s;
}

#youtube:hover {
    box-shadow: 0 0 12px rgba(255, 1, 1, 0.6);
}

#discord {
    background: #5865F2;
    animation-delay: 0.9s;
}

#discord:hover {
    box-shadow: 0 0 12px rgba(88, 101, 242, 0.6);
}

#litematic {
    background: #407855;
    animation-delay: 1.1s;
}

#litematic:hover {
    box-shadow: 0 0 12px rgba(64, 120, 85, 0.6);
}

#schem {
    background: #3C5375;
    animation-delay: 1.3s;
}

#schem:hover {
    box-shadow: 0 0 12px rgba(60, 83, 117, 0.6);
}

.contact .btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

@keyframes fadeSlide {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.copyright {
    text-align: center;
    user-select: none;
    color: rgba(129, 129, 129, 0.6);
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

#Im-gonna-cry {
    border: none;
    background: rgba(255, 255, 255, 0.08);
    width: 200px;
    height: 50px;
    margin: 100px auto 10px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 20px;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    font-size: 14px;
}

#Im-gonna-cry img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

#Im-gonna-cry:hover {
    animation: shake 0.3s ease-in-out infinite;
}

#Im-gonna-cry:hover img {
    opacity: 1;
}

.no-copy-image {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: auto;
}

.Error404 {
    text-decoration: none;
    color: #feffef;
    background-color: orange;
    padding: 10px 20px;
    border-radius: 8px;
    max-width: 150px;
    width: 90%;
    margin-top: 50px;
}