#back {
    position: fixed;
    font-size: 40px;
    font-weight: bolder;
    top: 2%;
    right: 50%;
    color: #FFF;
    text-shadow: 0 0 5px #fff;
    z-index: 10;
}

#controls-info {
    position: fixed;
    font-size: 25px;
    font-weight: bolder;
    top: 2%;
    left: 10%;
    color: #FFF;
    text-shadow: 0 0 5px #fff;
}
.all-controls {
    display: flex;
    width: 100%;
    min-height: 40px;
    max-height: 55%;
    justify-content: space-evenly;
    align-items: center;
    background-color: #404;
}
#move-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    /*height: 100%; 
    opacity: 0.5;*/
    align-items: center;
    justify-content: center;  
}
#action-buttons {
    position: fixed; 
    display: flex;
    flex-direction: column;
    width: 100%;
    /* height: 100%; 
    opacity: 0.5;*/
    align-items: flex-end;
    justify-content: flex-end;
}

#coupon {
    position: fixed; 
    width: 33%;
    bottom: 5%;
    opacity: 0.5;
}

#shot {
    width: 200px;
    height: auto; 
    background-color: #404;
}

.arrow {
    width: 90%;
}

.action {
    height: 50%;
    width: 100%;
    /* border: #000 solid 5px; */
} 

button {
    /* margin: 10px; */
    font-size: x-large;
    font-weight: bolder;
    padding: 10px;
    border-radius: 15px;
}

.game-button {
    display: flex;
    justify-content: center;
    border: solid 5px #000;
    color: #FFF;
    font-size: large;
    width: 100%;
    
}
#fire-button{
    background-color: #F00;
}
#jump-button {
    background-color: #FF0;
}
.direction-button{
    background-color: #FFF;
}

@media  (max-width: 1000px) {
    #controls {
        display: none;
    }
}

#game-canvas {
            display: block;
            background-color: #000; /* Set a background for better visibility */
            width: 100%; /* Makes it responsive */
            height: 70vh; /* Adjust as needed for screen proportions */
            margin: 0 auto; /* Center it horizontally */
        }

        #move-buttons, #action-buttons {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            gap: 10px;
        }

        /* button {
            padding: 10px 20px;
            font-size: 16px;
        } */