* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Courier New', Courier, monospace;
}

.noselect,
#highScoreHeader *,
#scoreboard *,
#controlsArea>div>button,
#close-button {
    /* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
    cursor: default;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.orange {
    color: orange;
}

#dash1,
#dash2 {
    z-index: -1;
}

.grey {
    color: grey;
}

.character-element {
    font-family: 'Courier New', Courier, monospace;
    background-color: transparent;
}


/* generic flex container styling
--------------------- */

.flex-container-column-default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flex-container-row-default {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#highScoreHeader,
#scoreboard,
#playArea {
    width: 320px;
    border: 1px solid green;
}

#highScoreHeader,
#scoreboard {
    height: 20px
}

#gameArea {
    border: solid 1px orange;
    overflow: hidden;
}

#playArea {
    /* desired height - highscore -scoreboard - control heights =409*/
    /* 569−20−20−120=409*/
    height: 409px;
    position: relative;
}

#playArea>div {
    font-size: 2rem;
}

#userName {
    background-color:orange;
}


/* #playAreaParent{
    position:relative;
} */

#space {
    grid-area: space;
}

#left {
    grid-area: left;
}

#right {
    grid-area: right;
}

#up {
    grid-area: up;
}

#down {
    grid-area: down;
}

#controlsArea {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: 60px 60px;
    grid-template-areas: 'space space left up right' 'space space left down right';
    background-color: transparent;
}


/* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */

#controlsArea>div>button {
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0px;
}

#start-button {
    position: absolute;
    display: inline-block;
    left: 33%;
    top: 33%;
    margin: auto;
    width: 33%;
    height: 15%;
    z-index: 99;
}

#restart-button {
    position: absolute;
    display: none;
    left: 33%;
    top: 70%;
    margin: auto;
    width: 33%;
    height: 10%;
    z-index: 99;
}

#close-button {
    background-color: transparent;
    width: 320px;
    border: none;
}

#close-button:hover {
    background-color: orange;
}

@media screen and (min-width: 768px) {
    #controlsArea {
        display: none;
    }
    #gameArea {
        border: none;
    }
}