/*global variables for height and width percentage*/
:root {
    --width: 100%;
    --height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0px;
    background-color: #f0f0f0;

    overflow: hidden;
}

html {
    width: 100%;
    height: 100%;
    margin: 0px;
}

#gameCanvas {
    border: 1px solid #000;
    width: var(--width);
    height: var(--height);
}

/*media query for desktop*/
@media (min-width: 1024px) {
    #gameCanvas {
        width: 45%;
        height: 100%;
    }
}