style.css

/* By RainySummer | https:/lzc.app | hi@lzc.app */


@font-face {

    font-family: "YanSong";

    src: url("font/yan.woff2") format("woff2");

}


html {

    height: 99vh;

    width: 99vw;

    cursor: url("image/cursor/cursor.cur"), default;

}


body {

    font-family: "YanSong", serif;

    text-shadow: -1px 1px 0 #bc0000, 1px 1px 0 #bc0000, 1px -1px 0 #bc0000, -1px -1px 0 #bc0000;

    color: black;

    background: #bc0000 url("image/img.png") no-repeat center;

    user-select: none;

    margin: auto;

    align-items: center;

    justify-content: center;

    display: flex;

}


@media screen and (orientation: portrait) {

    body {

        background-size: cover;

    }


    #headline {

        margin-top: 10vh;

    }


    .poem {

        margin-top: 10vh;

        font-size: 9vmin;

    }


    #poemland {

        display: none;

    }


    #fof {

        font-size: 20vmin;

        line-height: 50vmin;

    }


    #su {

        margin-top: 6vh;

        margin-bottom: 5vh;

    }


    #star {

        width: 3.5vh;

    }


    #yearland {

        display: none;

    }


    #yearport {

        font-size: 7.4vw;

        line-height: 6vh;

        margin-top: 3vh;

    }


    #progress {

        height: 0.6vh;

        margin-top: 10vh;

    }

}


@media screen and (orientation: landscape) {

    body {

        background-size: contain;

    }


    .poem {

        margin-top: 10vh;

        font-size: 8vmin;

    }


    #poemport {

        display: none;

    }


    #fof {

        font-size: 14vmin;

        line-height: 34vmin;

    }


    #su {

        margin-top: 4vh;

        margin-bottom: 0;

    }


    #star {

        width: 4vh;

    }


    #yearport {

        display: none;

    }


    #yearland {

        font-size: 5vmin;

        margin-top: 1vh;

    }


    #progress {

        height: 0.8vh;

    }

}


#heading {

    margin-bottom: 0;

}


#content {

    width: 90vw;

    overflow: hidden;

    text-align: center;

    align-items: center;

    font-size: 4.8vmin;

    color: #ffd700;

}


#headline {

    margin-bottom: 5vmin;

}


#su {

    font-size: 16vmin;

}


#su ruby rt {

    font-size: 6vmin;

}


#star {

    /*background-image: url("image/star.svg");*/

    cursor: url("image/cursor/hand.cur"), pointer;

}


#progress-bar {

    background-color: transparent;

    visibility: hidden;

}


#progress {

    background-color: #ffd700;

    margin-left: auto;

    margin-right: auto;

}