* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #7f7e7e;
    user-select: none;
}

body {
    height: 100vh;
    background-color: #000000;
    text-align: center;
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    align-items: center;
    justify-content: center;
}

@media (orientation: portrait) {
    .setupBox {
        width: 70vmin;
        height: 40vmin;
        background-color: #ffe4c4;
        border-radius: 5vmin;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .setupBox #back {
        position: relative;
        top: -15vmin;
        left: 2vmin;
    }

    .create-join {
        width: 100%;
        /* background-color: #ffe4c4; */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5vmin;
    }

    .create-join button {
        padding: 1vmin;
        font-size: 5vmin;
        border: none;
        border-radius: 2vmin;
        background-color: #2ff7b4fe;
    }

    .create-join button:hover {
        background-color: #00ffaa;
    }

    .chooseIndex {
        width: 100%;
        padding: 0 5vmin;
        font-size: 5vmin;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .choose {
        width: 100%;
        margin-top: 3vmin;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .choose button {
        padding: 0 1vmin;
        font-size: 7vmin;
        border: none;
        border-radius: 2vmin;
        background-color: #000000;
    }

    .enterRoomID {
        font-size: 5vmin;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .enterRoomID input {
        width: 70%;
        padding: 0.25vmin 2vmin 1vmin;
        margin-top: 3vmin;
        font-size: 8vmin;
        text-align: center;
        border: none;
        color: #ffffff7a;
        /* outline: #00c8ff solid 0.5vmin; */
        border-radius: 3vmin;
        background-color: #3c3c3cc3;
    }

    #enterBtn {
        padding: 1.5vmin 4vmin;
        margin-top: 2.5vmin;
        font-size: 5vmin;
        border: none;
        border-radius: 2vmin;
        color: #000000;
        background-color: #63d610;
    }

    .roomIDBox {
        font-size: 5vmin;
        position: absolute;
        top: 5vmin;
    }

    .RoomID {
        width: 50vmin;
        height: 10vmin;
        border-radius: 3vmin;
        font-size: 7.5vmin;
        line-height: 10vmin;
        color: #000000;
        background-color: #ffffff73;
    }

    .quitBox {
        width: 30vmin;
        position: absolute;
        top: 22vmin;
    }

    #QuitBtn {
        width: 50%;
        height: 7vmin;
        margin-top: 2vmin;
        font-size: 5vmin;
        border: none;
        border-radius: 2vmin;
        color: #ffffff;
        background-color: #424242;
    }

    .quitEnsure {
        width: 50vmin;
        height: 25vmin;
        padding: 2.5vmin;
        border-radius: 3vmin;
        font-size: 5vmin;
        color: #ffffff;
        background-color: #deb887;
        position: absolute;
        top: 25%;
    }

    .quitChoose {
        margin-top: 5vmin;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    #quitYes,
    #quitNo {
        width: 30%;
        font-size: 5vmin;
        border: none;
        border-radius: 2vmin;
        background-color: #10b5d6;
    }

    .container {
        width: 75vmin;
        height: 75vmin;
        /* background-color: #999191; */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        /* position: relative; */
    }

    /* #menu {
        color: #ffffff8b;
        position: absolute;
        top: 5vmin;
        right: 5vmin;
    } */

    .tbtBoxes {
        width: 100%;
        height: 100%;
        padding: 2vmin 2vmin;
        border: none;
        border-radius: 3vmin;
        background: #ffffff25;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 2vmin;
    }

    .tbtBoxes #box {
        width: 25%;
        height: 25%;
        border-radius: 2vmin;
        background-color: #fbff00c6;
    }

    .frbfrBoxes {
        width: 100%;
        height: 100%;
        padding: 2vmin 2vmin;
        border: none;
        border-radius: 3vmin;
        background-color: #7e7a7a;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 1vmin;
    }

    .frbfrBoxes #box {
        width: 20%;
        height: 20%;
        border-radius: 2vmin;
        background-color: #63d610;
    }

    .fvbfvBoxes {
        width: 100%;
        height: 100%;
        padding: 2vmin 2vmin;
        border: none;
        border-radius: 3vmin;
        background-color: #929292;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 1vmin;
    }

    .fvbfvBoxes #box {
        width: 17%;
        height: 17%;
        border-radius: 2vmin;
        background-color: #1094d6;
    }

    .box input {
        width: 100%;
        height: 100%;
        border: none;
        text-align: center;
        outline: none;
        color: #000000;
        background-color: transparent;
        /* text-decoration: line-through solid #ff0000; */
    }

    .boxT input {
        font-size: 15vmin;
    }

    .boxFr input {
        font-size: 12vmin;
    }

    .boxFv input {
        font-size: 10vmin;
    }

    .box input[type="number"]::-webkit-outer-spin-button,

    .box input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    #start{
        padding: 1.5vmin 4vmin;
        margin-top: 5vmin;
        font-size: 5vmin;
        border: none;
        border-radius: 3vmin;
        color: #000000;
        background-color: #69b908;
    }


}




.hide {
    display: none;
}