/* tetris  classはwebで開いた時だけ */
html {
    touch-action: manipulation;
}

#install {
    text-decoration: underline;
    text-decoration-color: green;
}



@media screen and (min-width: 481px) {


    body {
        background-color: mistyrose;
    }

    .mobile {
        display: grid;
        position: relative;
        top: 120px;
    }


    .mobile_screen {
        width: 250px;
        height: 550px;
        border: 4px solid #352b3a;
        background-color: #6e6765;
        border-radius: 30px;
        display: grid;
        place-self: center;
    }

    .outer {
        width: 18px;
        height: 18px;
        background-color: #161616;
        display: grid;
        place-self: center;
        border-radius: 50%;
        position: absolute;
        top: 10px;
    }

    .screen_body {
        width: 225px;
        height: 490px;
        border: 4px solid #352b3a;
        background-color: white;
        border-radius: 25px;
        display: grid;
        justify-self: center;
        align-self: center;
        position: absolute;
        top: 35px;
    }

    .tetris {
        margin: 0 auto;
        padding: 10px;
    }

    .square_canvas {
        margin-top: 30px;
        margin-left: 8px;
    }

    .button_section {
        margin-top: 20px;
    }

    .btn {
        font-size: large;
        border-radius: 5px;
        background-color: cornsilk;
        color: #6e6765;
    }

    .hide {
        display: none;
    }

    .home {
        padding: 10px;
        position: relative;
    }

    .info {
        position: absolute;
        top: 80px;
        font-size: 1.1rem;
        font-weight: bold;
        line-height: 1.9rem;
    }

    #start {
        position: absolute;
        bottom: 20px;
        height: 4rem;
        width: 10rem;
        font-size: 1.6rem;
        font-weight: bold;
        background-color: #00736D;
        color: aliceblue;
        border-radius: 10px;
        margin-left: 10%;
    }
}

@media screen and (max-width: 480px) {

    /* 480pxまでのスマホ */
    .body {
        height: 1vh;
        width: auto;
    }

    .screen_body {
        width: 90%;
        height: 90%;
        background-color: white;
        border-radius: 25px;
        display: grid;
        justify-self: center;
        align-self: center;
        position: absolute;
        top: 35px;
    }

    .tetris {
        margin: 0 auto;
        padding: 10px;
    }

    .square_canvas {
        margin-top: 30px;
        margin-left: 10px;
        width: 18rem;
        height: auto;
    }

    .button_section {
        margin-top: 20px;
        margin-left: 10px;
        width: 18rem;
        height: auto;
    }

    .btn {
        font-size: 1.5rem;
        width: 3rem;
        height: 3rem;
        border-radius: 5px;
        background-color: cornsilk;
        color: #6e6765;
        margin: 0.1rem;
    }

    .hide {
        display: none;
    }

    .home {
        padding: 20px;
        position: relative;
    }

    .info {
        position: absolute;
        top: 100px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 2.3rem;
    }

    #start {
        position: absolute;
        bottom: 20px;
        height: 5rem;
        width: 12rem;
        font-size: 1.8rem;
        font-weight: bold;
        background-color: #00736D;
        color: aliceblue;
        border-radius: 10px;
        margin-left: 10%;
        left: 50%;
        transform: translateX(-60%);
    }
}