@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

* {
    box-sizing: border-box;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 1.3rem;
    display: flex;
    margin: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    /* my dark styling */
    background-color: rgb(19, 17, 17);
    color: rgb(236, 222, 222);
}

.container {
    height: 90vh;
    width: 90vw;
}

.action-zone {
    display: flex;
    flex-direction: row;
    height: 10vh;
    width: 90vw;
}

.action1,
.action2 {
    width: 45vw;
    height: 7vh;
    line-height: 7vh;
    text-align: center;
    /* font-size: 2rem; */
    color: black;
    border-radius: 20px;
}

.action1 {
    background-color: aqua;
}
.action2 {
    background-color: rgb(143, 177, 19);
}

.button-area {
    position: relative;
    bottom: 0;
    height: 200px;
    /* line-height: 200px; */
    width: 90vw;
}

.all-but {
    background-color: rgb(184, 164, 164);
    color: black;
    width: 90vw;
    height: 50px;
    text-align: center;
    justify-content: center;
    font-size: 2rem;
    border-radius: 20px;
}
/* .button1 {
    background-color: limegreen;
}
.button2 {
    background-color: rgb(205, 50, 50);
}
.button3 {
    background-color: rgb(16, 184, 206);
}
.button4 {
    background-color: rgb(143, 177, 19);
} */

.player-move {
    font-size: 2rem;
}

.touchable {
    font-size: 1.5rem;
    color: yellow;
}

.item-pickup {
    color: green;
}