body {
    margin: 0;
}

#game-container {
    position: relative;
}

/* use flex for alignment, with 2 groups of 2 buttons */
#touch-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;

    position: absolute;
    bottom: 10px;
    width: 800px;
}

/* flex container for the left buttons */
#left-buttons {
    display: flex;
    align-items: center;
    margin-left: 50px;
}

/* flex container for the right buttons */
#right-buttons {
    display: flex;
    align-items: center;
    margin-right: 50px;
}

/* button default style (either for text or image) */
#left-button,
#right-button,
#jump-button1,
#jump-button2 {
    width: 50px;
    height: 50px;
    margin: 0 10px;
}

/* use an image for the button i.s.o. text (1/2) */
#left-button {
    background-image: url('assets/right-arrow.png');
    transform: rotate(180deg);
}

#right-button {
    background-image: url('assets/right-arrow.png');
}

#jump-button1,
#jump-button2 {
    background-image: url('assets/up-arrow.png');
}

/* use an image for the button i.s.o. text (2/2) */
#left-button,
#right-button,
#jump-button1,
#jump-button2 {
    background-size: cover;
    background-position: center;

    /* now that we use a picture as the background, remove the default button styling */
    background-color: transparent;
    border: none;
}

/* scale the buttons slightly when it's pressed, to create a button press effect */
#right-button:active,
#jump-button1:active,
#jump-button2:active {
    transform: scale(0.95);
}

/* to apply multiple transformations simultaneously, you can combine them into a single transform property */
#left-button:active {
    transform: scale(0.95) rotate(180deg);
}