@media (min-width: 0px) and (max-width: 539px) {
    html {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    #title-box {
        transform: scale(0.54);
        transform-origin: left top;
    }

    #copyright {
        transform: scale(0.66);
    }
}

@media (min-width: 540px) and (max-width: 767px) {
    html {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    #title-box {
        transform: scale(0.54);
        transform-origin: left top;
    }

    #copyright {
        transform: scale(0.66);
    }
}

@media (min-width: 768px) and (max-width: 911px) {
    html {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    #title-box {
        transform: scale(0.84);
        transform-origin: left top;
    }

    #copyright {
        transform: scale(0.84);
    }
}

@media (min-width: 912px) and (max-width: 1023px) {
    html {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    #title-box {
        transform: scale(0.84);
        transform-origin: left top;
    }

    #copyright {
        transform: scale(0.84);
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    #title-box {
        transform: scale(0.75);
        transform-origin: left top;
    }

    #copyright {
        transform: scale(0.75);
    }
}

@media (min-width: 1280px) and (max-width: 1500px) {
    html {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    #title-box {
        transform: scale(0.84);
        transform-origin: left top;
    }

    #copyright {
        transform: scale(0.75);
    }
}