/* Reusable classes */
.flex { display: flex }
.absolute { position: absolute }
.flex-column { flex-direction: column }
.text-center { text-align: center }

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    background: black;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
canvas {
    position: relative;
}
/*StartMenu*/
.controls-title, .highscore-title {
    margin: 0;
}

.controls-div, .highscore-div {
    height: 500px;
    width: 500px;
}

.startmenu-div {
    height: 25%;
}

.backButton {
    margin-top: 1rem;
}

.gameKeys {
    border: solid 2px black;
    padding: 15px 20px 8px 20px;
    background: black;
    border-radius: 10px;
    width: 100px;
    margin: 2px;
    align-self: center;
    color: white;
}

.menu-headline {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    font-size: 3rem;
    padding: 0;
    margin: 1rem;
    width: 100%;
}

/*Gameovermenu*/
.gameovermenu-div {
    display: grid;
    grid-template-columns: 2;
    grid-template-rows: 2;
    height: 500px;
    width: 500px;
}

.button-restart {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
}
.button-menu {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
}

/* All the buttons*/
button {
    opacity: 1;
    border-radius: 20px;
    width: 2rem;
    margin: auto;
    margin-bottom: 1rem;
}

button:hover {
    background: black;
    color: white;
    cursor: pointer;
}
/* Highscore element*/
.score-element {
    font-size: 20px;
    padding: 0;
    margin: 1px;
    color: white;
    justify-content: space-between;
    align-items:stretch;
}

p.highscore-list-items {
    width: 100%;
    letter-spacing: 10px;
    margin: 1rem;
}