body {
    width: 100%;
    height: 100%;
    margin: 0px;
    /* overflow: hidden; */
    position: absolute;
    /* touch-action: none; */
    font-family: 'OneUiSans', sans-serif;
}
img {
    /* width: 100%; */
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
    backface-visibility: hidden;
}
* {
    box-sizing: border-box;
}
.canvas-wrapper {
    width: 100%;

    /* height: 100%; */
    min-height: 100vh;
    -webkit-touch-callout: none;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}
.canvas {
    width: 100%;
    height: 100%;
}
.home__bg {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 136, 84, 1);
}

.page__error {
    /* aspect-ratio: 1080/2522; */
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding-top: calc(100% * (139 / 1080));
    padding-bottom: calc(100% * (80 / 1080));
    text-align: center;
    /* padding-left: calc((100% - 87%) / 2);
    padding-right: calc((100% - 87%) / 2);
     */
    /* display: none; */
}

.page__error img {
    width: 100%;
}

.page__main {
    /* aspect-ratio: 1080/2522; */
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding-top: calc(100% * (139 / 1080));
    padding-bottom: calc(100% * (80 / 1080));
    text-align: center;
    /* padding-left: calc((100% - 87%) / 2);
    padding-right: calc((100% - 87%) / 2);
     */
    /* display: none; */
}

.page__main .title {
    width: calc(100% * (929 / 1080));
}

.page__main .frame {
    position: relative;
    width: calc(100% * (924 / 1080));
    aspect-ratio: 924 / 1040;
    margin: calc(100vh * (285 / 2522)) auto;
    background: no-repeat center url(../assets/frame.png);
    background-size: cover;
}

.page__main .frame img {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;
}

    .page__main .frame .frame-fl {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background: no-repeat center url(../assets/frame.png);
        background-size: contain;
        margin-left: -13px;
        margin-right: -13px;
        margin-top: -13px;
        margin-bottom: -10px;
    }

.page__main > .button {
    margin: auto;
    width: calc(100% * (924 / 1080));
}
.page__main > .button > img {
    width: 100%;
}
.page__main .logo {
    width: calc(100% * (268 / 1080));
    margin-top: calc(100vh * (75 / 2522));
}
@font-face {
    font-family: 'OneUiSans';
    src: url(../assets/font/oneUIsans/OneUISansGUI-300Light.ttf) format('truetype');
    font-weight: 300;
}
@font-face {
    font-family: 'OneUiSans';
    src: url(../assets/font/oneUIsans/OneUISansGUI-400Regular.ttf) format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'OneUiSans';
    src: url(../assets/font/oneUIsans/OneUISansGUI-600SemiBold.ttf) format('truetype');
    font-weight: 600;
}
@font-face {
    font-family: 'OneUiSans';
    src: url(../assets/font/oneUIsans/OneUISansGUI-700Bold.ttf) format('truetype');
    font-weight: 700;
}