html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    /* display: flex;
    flex-direction: column; */
    user-select: none;
    font-family: 'NSimSun', 'SongTi Tc', serif;
    background-image: url(/layouts/homebg.jpg);
}
main {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* ^^^ to prevent horizontal narrow height rotate overflow scroll bar */
}
#pc_main {
    width: 100%;
    /* height: 100%; */
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    background: url(index_back.png) bottom/contain no-repeat;
}
#game_a1 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 15vw;
    height: 15vw;
}
#game_a2 {
    position: absolute;
    right: 0;
    bottom: 5vw;
    width: 12vw;
    height: 26vw;
}
#pc_undergraduate_a {
    position: absolute;
    overflow: visible;
    left: 3.8vw;
    bottom: 10.8vw;
    width: 25vw;
    height: calc(25vw / 450 * 475);
}
#pc_undergraduate_a > a {
    transform-origin: 54% 99.1579%;
}
#pc_graduate_a {
    position: absolute;
    overflow: visible;
    left: 34.5vw;
    bottom: 10.4vw;
    width: 25vw;
    height: calc(25vw / 465 * 481);
}
#pc_graduate_a > a {
    transform-origin: 47.5269% 98.7526%;
}
#pc_common_a {
    position: absolute;
    overflow: visible;
    left: 61.4vw;
    bottom: 10.5vw;
    width: 25vw;
    height: calc(25vw / 429 * 484);
}
#pc_common_a > a {
    transform-origin: 56.1772% 95.4545%;
}
#pc_undergraduate_a a:hover, #pc_graduate_a a:hover, #pc_common_a a:hover {
    animation: shake 1s linear 0s infinite;
}
@keyframes shake {
    25% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(0);
    }
    75% {
        transform: rotate(10deg);
    }
    /* 100% {
        transform: rotate(0);
    } */
}

#phone_main {
    position: absolute;
    top: 85px;
    width: 100%;
    /* height: calc(100vh - 85px); */
    height: calc(var(--vh, 1vh) * 100 - 85px);
    display: none; /* actually flex */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#phone_main > div {
    flex: 1;
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
}
#phone_undergraduate_a {
    transform: rotate(8deg);
}
#phone_graduate_a {
    transform: rotate(-18deg);
}
#phone_common_a {
    transform: rotate(3deg);
}
#phone_undergraduate_a img, #phone_graduate_a img, #phone_common_a img {
    max-width: 80vw;
    max-height: calc((100 * var(--vh, 1vh) - 85px) / 3 * 0.8);
}

#pc_nobg_main {
    position: absolute;
    top: 85px;
    width: 100%;
    /* height: calc(100vh - 85px); */
    height: calc(var(--vh, 1vh) * 100 - 85px);
    display: none; /* actually flex */
    justify-content: center;
    align-items: center;
}
#pc_nobg_main > div {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#pc_nobg_undergraduate_a {
    transform: rotate(-8deg);
}
#pc_nobg_graduate_a {
    transform: rotate(13deg);
}
#pc_nobg_common_a {
    transform: rotate(-4deg);
}
#pc_nobg_undergraduate_a img, #pc_nobg_graduate_a img, #pc_nobg_common_a img {
    max-width: calc(100vw / 3 * 0.8);
    max-height: calc((100 * var(--vh, 1vh) - 85px) * 0.8);
}

/* new pen writing animation */
#writing_svg {
    position: absolute;
    bottom: 2.5vw;
    right: 17vw;
    height: 6vw;
    overflow: visible;
    transform: rotate(-5deg);
}
.write {
    fill: none;
    stroke: black;
    stroke-width: 2;
    stroke-linecap: round;
}
.animate {
    animation-name: write;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes write {
    to {
        stroke-dashoffset: 0;
    }
}
#word_w {
    clip-path: url(#word_w_clip);
}
#word_e1 {
    clip-path: url(#word_e1_clip);
}
#word_l {
    clip-path: url(#word_l_clip);
}
#word_c1 {
    clip-path: url(#word_c1_clip);
}
#word_o1 {
    clip-path: url(#word_o1_clip);
}
#word_m {
    clip-path: url(#word_m_clip);
}
#word_e2 {
    clip-path: url(#word_e2_clip);
}
#word_t {
    clip-path: url(#word_t_clip);
}
#word_o2 {
    clip-path: url(#word_o2_clip);
}
#word_n {
    clip-path: url(#word_n_clip);
}
#word_c2 {
    clip-path: url(#word_c2_clip);
}
#word_u {
    clip-path: url(#word_u_clip);
}
#word_exclam {
    clip-path: url(#word_exclam_clip);
    cursor: pointer;
}

/* aspect ratio too big, remove bg */
@media screen and (min-aspect-ratio: 100 / 37) {
    #pc_main {
        display: none;
    }
    #pc_nobg_main {
        display: flex;
    }
}

/* aspect ratio too small, treat as phone vertical */
@media screen and (max-aspect-ratio: 100 / 80) {
    #pc_main {
        display: none;
    }
    #phone_main {
        display: flex;
    }
}

/* phone (vertical) */
/* @media screen and (max-width: 576px) {
    #pc_main {
        display: none;
    }
    #pc_nobg_main {
        display: none;
    }
    #phone_main {
        display: flex;
    }
} */

/* narrow height (PC, phone horizontal) */
@media (max-height: 450px) { /* include 450px, for Chrome: Surface Duo */
    #pc_main {
        display: none;
    }
    #pc_nobg_main {
        display: flex;
    }
    #phone_main {
        display: none;
    }
}