@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap');

body {
    margin: 0;
    background-color: #B1F0F7;
}

body::-webkit-scrollbar {
    display: none;
}

/* PC */
@media screen and (min-width:1024px) {
    canvas {
        position: absolute;
    }

    .menu {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 1vw;
        left: 2vw;
        height: 50px;
        cursor: pointer;
    }

    .menu::after {
        position: absolute;
        left: 0;
        top: 45px;
        content: '';
        width: 100%;
        height: 6px;
        background: #FFFFFF;
        transform: scale(0, 1);
        transform-origin: center top;
        transition: transform .3s;
    }

    .menu:hover::after {
        transform: scale(1, 1);
    }

    .menu img {
        width: 50px;
        height: 50px;
    }

    .menu p {
        margin: 0;
        margin-left: 5px;
        font-size: 40px;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #FFFFFF;
    }

    .menuText {
        display: none;
        overflow: scroll;
        position: absolute;
        top: 15vh;
        left: 20vw;
        width: 60vw;
        height: 70vh;
        margin: 0;
        padding: 2vh 0;
        border: 1vw solid #FFFFFF;
        border-radius: 1vw;
        box-sizing: border-box;
        background: #FFFFFF70;
        box-shadow: 0px 0px 50px #00000070;
    }

    .menuText::-webkit-scrollbar {
        display: none;
    }

    .menuText h1 {
        margin: 2vh 0;
        text-align: center;
        font-size: 4vw;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #3E7B27;
    }

    .menuText h2 {
        margin: 2vh 0;
        text-align: center;
        font-size: 3vw;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #3E7B27;
    }

    .menuText p {
        margin: 2vh 4vw;
        text-align: center;
        font-size: 2vw;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #3E7B27;
    }

    .menuText hr {
        margin: 2vh 4vw;
        border: 0.3vh solid #3E7B27;
    }

    .inputBox {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .inputText {
        width: 40%;
        height: 7vh;
        padding: 0 2%;
        border-radius: 1vw;
        border: 0.5vh solid #3E7B27;
        font-size: 2vw;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #3E7B27;
    }

    .setButton {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 7vw;
        height: 7vh;
        border-radius: 1vw;
        border: 0.5vh solid #3E7B27;
        font-size: 2vw;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #3E7B27;
        background-color: #FFFFFF;
        cursor: pointer;
    }

    .flex {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flex p {
        margin: 2vh 0;
    }

    .toggle {
        position: relative;
        width: 78px;
        height: 48px;
        margin-left: 30px;
        border-radius: 50px;
        overflow: hidden;
        cursor: pointer;
    }

    .toggle input[type=checkbox] {
        display: none;
    }

    .toggle:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        background: #FFFFFF90;
        -webkit-transition: 0.2s ease-out;
        transition: 0.2s ease-out;
    }

    .toggle:after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 42px;
        height: 42px;
        display: block;
        border-radius: 50px;
        background: #fff;
        box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3);
        -webkit-transition: 0.2s ease-out;
        transition: 0.2s ease-out;
    }

    .toggle.checked:before {
        background: #3E7B27;
    }

    .toggle.checked:after {
        left: 33px;
        box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5);
    }

    .goal {
        position: absolute;
        top: 10vh;
        left: 7vw;
        width: 7vw;
        pointer-events: none;
    }

    .goalText p {
        margin: 0;
        text-align: center;
        font-size: 3vw;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #FFFFFF;
    }

    .goalValue {
        position: absolute;
        left: 8vw;
    }

    .startValue {
        position: absolute;
        top: 65vh;
        left: 8vw;
    }

    .goalFrame {
        width: 100%;
        height: 65vh;
        padding: 1vw;
        border: 1vw solid #FFFFFF;
        box-sizing: border-box;
    }

    .goalGauge {
        width: 100%;
        height: 100%;
        background: repeating-linear-gradient(-45deg, #FFFFFF, #FFFFFF 1vw, #FFFFFF00 0, #FFFFFF00 2vw);
        background-position: left 0 bottom 0;
        background-repeat: no-repeat;
    }

    .chat {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        top: 10vh;
        right: 7vw;
        height: 80vh;
        pointer-events: none;
    }

    .chatText {
        width: fit-content;
        max-width: 29vw;
        height: 8vh;
        margin: 1vh 0;
        padding: 1vh 2vh;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: right;
        border: 1vh solid #FFFFFF;
        border-radius: 2vh;
        box-sizing: border-box;
        font-size: 3vh;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #FFFFFF;
    }

    .chatText:nth-child(n+9) {
        display: none;
    }

    @keyframes firstSlideAnime {
        0% {
            transform: translateY(10vh);
        }

        100% {
            transform: translateY(0);
        }
    }

    @keyframes slideAnime {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-10vh);
        }
    }

    @keyframes closeAnime {
        0% {
            opacity: 1;
            transform: translateX(0);
        }

        100% {
            opacity: 0;
            transform: translateX(-15vw);
        }
    }

    .tabletSP {
        display: none;
    }
}

/* tablet */
@media screen and (min-width:768px) and (max-width:1024px) {
    canvas {
        display: none;
    }

    .menu {
        display: none;
    }

    .menuText {
        display: none;
    }

    .goal {
        display: none;
    }

    .chat {
        display: none;
    }

    .tabletSP {
        display: block;
    }

    .tabletSP h2 {
        margin: 4vh 0;
        text-align: center;
        font-size: 10vw;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #3E7B27;
    }

    .tabletSP p {
        margin: 4vh 4vw;
        text-align: center;
        font-size: 5vw;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #3E7B27;
    }
}

/* smartphone */
@media screen and (max-width:768px) {
    canvas {
        display: none;
    }

    .menu {
        display: none;
    }

    .menuText {
        display: none;
    }

    .goal {
        display: none;
    }

    .chat {
        display: none;
    }

    .tabletSP {
        display: block;
    }

    .tabletSP h2 {
        margin: 4vh 0;
        text-align: center;
        font-size: 10vw;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #3E7B27;
    }

    .tabletSP p {
        margin: 4vh 4vw;
        text-align: center;
        font-size: 5vw;
        font-family: "M PLUS 1p", serif;
        font-weight: 800;
        color: #3E7B27;
    }
}