@font-face {
    font-family: Hoyoverse;
    src: url("./hsr-checker/fonts/zh-cn.ttf") format("truetype");
}

body {
    font-family: Hoyoverse, Arial, Helvetica, sans-serif;
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background: url('https://wallpapercave.com/wp/wp10437025.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
}

#main {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

h1.page-text {
    font-size: 32px;
    line-height: 1.5;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px #000;
    margin: 0 0 50px;
}

h1.page-error {
    font-size: 48px;
    line-height: 1.5;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px #000;
    margin: 0 0 20px;
}

h2.page-error {
    font-size: 32px;
    line-height: 1.5;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px #000;
    margin: 0;
}

ul.project-lists {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 30px;
    margin: 0;
    padding: 0;
}

ul.project-lists li {
    width: 250px;
}

ul.project-lists li a {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5), 0px 2px 4px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    color: #000;
    transition: 0.3s;
}

ul.project-lists li a:hover {
    background: rgba(255, 255, 255, 1);
}

ul.project-lists li a img {
    display: block;
    width: 100%;
}

ul.project-lists li a h2 {
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    margin: 20px 0 0;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(255,255,255,0.5);
    padding: 16px;
}

.copyright-text {
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
}

.copyright-text a {
    text-decoration: none;
}

.mobile-split {
    display: none;
}

#loadingScreen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
	opacity: 1;
    transition: opacity 0.5s ease-out; 
}

#loadingScreen img {
	display: block;
	width: 256px;
}

@media (max-width: 1023px) and (min-width: 640px) {    
    h1.page-text {
        font-size: 3.125vw;
        text-shadow: 0.2vw 0.2vw #000;
        margin: 0 0 4.88vw;
    }

    h1.page-error {
        font-size: 4.6875vw;
        text-shadow: 0.2vw 0.2vw #000;
        margin: 0 0 1.95vw;
    }
    
    h2.page-error {
        font-size: 3.125vw;
        text-shadow: 0.2vw 0.2vw #000;
    }
    
    ul.project-lists {
        column-gap: 2.93vw;
    }
    
    ul.project-lists li {
        width: 24.41vw;
    }
    
    ul.project-lists li a {
        padding: 1.95vw;
        border-radius: 1.95vw;
        box-shadow: 0px 0.4vw 0.8vw rgba(0, 0, 0, 0.5), 0px 0.2vw 0.4vw rgba(0, 0, 0, 0.4);
    }
            
    ul.project-lists li a h2 {
        font-size: 1.95vw;
        margin: 1.95vw 0 0;
    }
    
    footer {
        padding: 1.56vw;
    }
    
    .copyright-text {
        font-size: 1.56vw;
    }

    #loadingScreen img {
        display: block;
        width: 25vw;
    }
    
}


@media screen and (max-width: 639px) {
    #main {
        position: static;
        transform: none;
        padding: 16vw 0 32vw;
    }
    
    h1.page-text {
        font-size: 7.2vw;
        text-shadow: 0.8vw 0.8vw #000;
        margin: 0 0 13.6vw;
    }

    h1.page-error {
        font-size: 9vw;
        text-shadow: 0.8vw 0.8vw #000;
        margin: 0 0 4vw;
    }
    
    h2.page-error {
        font-size: 6vw;
        text-shadow: 0.8vw 0.8vw #000;
        padding: 0 4vw
    }

    ul.project-lists {
        column-gap: 8vw;
        row-gap: 8vw;
    }
    
    ul.project-lists li {
        width: 64vw;
    }
    
    ul.project-lists li a {
        padding: 4vw;
        border-radius: 4vw;
        box-shadow: 0px 1vw 2vw rgba(0, 0, 0, 0.5), 0px 0.5vw 1vw rgba(0, 0, 0, 0.4);
    }
            
    ul.project-lists li a h2 {
        font-size: 4.8vw;
        margin: 4vw 0 0;
    }

    footer {
        padding: 2.4vw 0;
    }
    
    .copyright-text {
        font-size: 3.2vw;
    }

    .mobile-split {
        display: block;
    }

    #loadingScreen img {
        display: block;
        width: 64vw;
    }
}